diff --git a/.deepsource.toml b/.deepsource.toml
new file mode 100644
index 000000000..85de1a5e8
--- /dev/null
+++ b/.deepsource.toml
@@ -0,0 +1,17 @@
+version = 1
+
+[[analyzers]]
+name = "shell"
+
+[[analyzers]]
+name = "javascript"
+
+  [analyzers.meta]
+  plugins = ["react"]
+  environment = ["nodejs"]
+
+[[analyzers]]
+name = "python"
+
+  [analyzers.meta]
+  runtime_version = "3.x.x"
\ No newline at end of file
diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
new file mode 100644
index 000000000..58c404e37
--- /dev/null
+++ b/.github/workflows/build-branch.yml
@@ -0,0 +1,213 @@
+
+name: Branch Build
+
+on:
+  pull_request:
+    types: 
+      - closed
+    branches: 
+      - master
+      - release
+      - qa
+      - develop
+
+env:
+  TARGET_BRANCH: ${{ github.event.pull_request.base.ref }}
+
+jobs:
+  branch_build_and_push:
+    if: ${{ (github.event_name == 'pull_request' && github.event.action =='closed' && github.event.pull_request.merged == true) }}
+    name: Build-Push Web/Space/API/Proxy Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+        
+      # - name: Set Target Branch Name on PR close
+      #   if: ${{ github.event_name == 'pull_request' && github.event.action =='closed' }}
+      #   run: echo "TARGET_BRANCH=${{ github.event.pull_request.base.ref }}" >> $GITHUB_ENV
+
+      # - name: Set Target Branch Name on other than PR close
+      #   if: ${{ github.event_name == 'push' }}
+      #   run: echo "TARGET_BRANCH=${{ github.ref_name }}" >> $GITHUB_ENV
+      
+      - uses: ASzc/change-string-case-action@v2
+        id: gh_branch_upper_lower
+        with:
+          string: ${{env.TARGET_BRANCH}}
+
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_replace_slash
+        with:
+          source: ${{ steps.gh_branch_upper_lower.outputs.lowercase }}
+          find: '/'        
+          replace: '-'
+
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_replace_dot
+        with:
+          source: ${{ steps.gh_branch_replace_slash.outputs.value }}
+          find: '.'        
+          replace: ''
+          
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_clean
+        with:
+          source: ${{ steps.gh_branch_replace_dot.outputs.value }}
+          find: '_'
+          replace: ''
+      - name: Uploading Proxy Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: proxy-src-code
+          path: ./nginx
+      - name: Uploading Backend Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: backend-src-code
+          path: ./apiserver
+      - name: Uploading Web Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-src-code
+          path: |
+            ./
+            !./apiserver
+            !./nginx
+            !./deploy
+            !./space
+      
+      - name: Uploading Space Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: space-src-code
+          path: |
+            ./
+            !./apiserver
+            !./nginx
+            !./deploy
+            !./web
+    outputs:
+        gh_branch_name: ${{ steps.gh_branch_clean.outputs.value }}
+
+  branch_build_push_frontend:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Web Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: web-src-code
+
+      - name: Build and Push Frontend to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./web/Dockerfile.web
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_space:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Space Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: space-src-code
+
+      - name: Build and Push Space to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./space/Dockerfile.space
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_backend:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Backend Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: backend-src-code
+
+      - name: Build and Push Backend to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile.api
+          platforms: linux/amd64
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_proxy:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Downloading Proxy Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: proxy-src-code
+
+      - name: Build and Push Plane-Proxy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
diff --git a/.github/workflows/build-test-pull-request.yml b/.github/workflows/build-test-pull-request.yml
index 6dc7ae1e5..c74975f48 100644
--- a/.github/workflows/build-test-pull-request.yml
+++ b/.github/workflows/build-test-pull-request.yml
@@ -36,15 +36,13 @@ jobs:
       - name: Build Plane's Main App
         if: steps.changed-files.outputs.web_any_changed == 'true'
         run: |
-          cd web
           yarn
-          yarn build
+          yarn build --filter=web
 
       - name: Build Plane's Deploy App
         if: steps.changed-files.outputs.deploy_any_changed == 'true'
         run: |
-          cd space
           yarn 
-          yarn build
+          yarn build --filter=space
 
 
diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 28e47a0d6..c8e27f322 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -2,6 +2,8 @@ name: Create PR in Plane EE Repository to sync the changes
 
 on:
   pull_request:
+    branches:
+      - master
     types:
       - closed
 
diff --git a/.gitignore b/.gitignore
index 1e99e102a..dcb8b8671 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,8 @@ node_modules
 
 # Production
 /build
+dist/
+out/
 
 # Misc
 .DS_Store
@@ -73,3 +75,7 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 
 .npmrc
+.secrets
+tmp/
+## packages
+dist
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index cd74b6121..9fa847b6e 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-hello@plane.so.
+squawk@plane.so.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b25a791d0..73d69fb2d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -8,8 +8,8 @@ Before submitting a new issue, please search the [issues](https://github.com/mak
 
 While we want to fix all the [issues](https://github.com/makeplane/plane/issues), before fixing a bug we need to be able to reproduce and confirm it. Please provide us with a minimal reproduction scenario using a repository or [Gist](https://gist.github.com/). Having a live, reproducible scenario gives us the information without asking questions back & forth with additional questions like:
 
--   3rd-party libraries being used and their versions
--   a use-case that fails
+- 3rd-party libraries being used and their versions
+- a use-case that fails
 
 Without said minimal reproduction, we won't be able to investigate all [issues](https://github.com/makeplane/plane/issues), and the issue might not be resolved.
 
@@ -19,10 +19,10 @@ You can open a new issue with this [issue form](https://github.com/makeplane/pla
 
 ### Requirements
 
--   Node.js version v16.18.0
--   Python version 3.8+
--   Postgres version v14
--   Redis version v6.2.7
+- Node.js version v16.18.0
+- Python version 3.8+
+- Postgres version v14
+- Redis version v6.2.7
 
 ### Setup the project
 
@@ -81,8 +81,8 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
--   All features or bug fixes must be tested by one or more specs (unit-tests).
--   We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
+- All features or bug fixes must be tested by one or more specs (unit-tests).
+- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
 
 ## Need help? Questions and suggestions
 
@@ -90,11 +90,11 @@ Questions, suggestions, and thoughts are most welcome. We can also be reached in
 
 ## Ways to contribute
 
--   Try Plane Cloud and the self hosting platform and give feedback
--   Add new integrations
--   Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
--   Share your thoughts and suggestions with us
--   Help create tutorials and blog posts
--   Request a feature by submitting a proposal
--   Report a bug
--   **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
+- Try Plane Cloud and the self hosting platform and give feedback
+- Add new integrations
+- Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
+- Share your thoughts and suggestions with us
+- Help create tutorials and blog posts
+- Request a feature by submitting a proposal
+- Report a bug
+- **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
diff --git a/ENV_SETUP.md b/ENV_SETUP.md
new file mode 100644
index 000000000..23faf83f7
--- /dev/null
+++ b/ENV_SETUP.md
@@ -0,0 +1,150 @@
+# Environment Variables
+
+​
+Environment variables are distributed in various files. Please refer them carefully.
+
+## {PROJECT_FOLDER}/.env
+
+File is available in the project root folder​
+
+```
+# Database Settings
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+​
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+​
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+​
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
+OPENAI_API_KEY="sk-" # add your openai key here
+GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
+​
+# Settings related to Docker
+DOCKERIZED=1
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+​
+# Nginx Configuration
+NGINX_PORT=80
+```
+
+​
+
+## {PROJECT_FOLDER}/web/.env.example
+
+​
+
+```
+# Enable/Disable OAUTH - default 0 for selfhosted instance
+NEXT_PUBLIC_ENABLE_OAUTH=0
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
+```
+
+​
+
+## {PROJECT_FOLDER}/spaces/.env.example
+
+​
+
+```
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=0
+```
+
+​
+
+## {PROJECT_FOLDER}/apiserver/.env
+
+​
+
+```
+# Backend
+# Debug value for api server use it as 0 for production use
+DEBUG=0
+DJANGO_SETTINGS_MODULE="plane.settings.selfhosted"
+​
+# Error logs
+SENTRY_DSN=""
+​
+# Database Settings
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+​
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+​
+# Email Settings
+EMAIL_HOST=""
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_USE_TLS="1"
+EMAIL_USE_SSL="0"
+​
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+​
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
+OPENAI_API_KEY="sk-" # add your openai key here
+GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
+​
+# Github
+GITHUB_CLIENT_SECRET="" # For fetching release notes
+​
+# Settings related to Docker
+DOCKERIZED=1
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+​
+# Nginx Configuration
+NGINX_PORT=80
+​
+# Default Creds
+DEFAULT_EMAIL="captain@plane.so"
+DEFAULT_PASSWORD="password123"
+​
+# SignUps
+ENABLE_SIGNUP="1"
+​
+# Email Redirection URL
+WEB_URL="http://localhost"
+```
+
+## Updates​
+
+- The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects.
+- The naming convention for containers and images has been updated.
+- The plane-worker image will no longer be maintained, as it has been merged with plane-backend.
+- The Tiptap pro-extension dependency has been removed, eliminating the need for Tiptap API keys.
+- The image name for Plane deployment has been changed to plane-space.
diff --git a/README.md b/README.md
index f9d969d72..53679943b 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 </p>
 
 <h3 align="center"><b>Plane</b></h3>
-<p align="center"><b>Open-source, self-hosted project planning tool</b></p>
+<p align="center"><b>Flexible, extensible open-source project management</b></p>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -39,33 +39,35 @@ 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).
 
-## ⚡️ Quick start with Docker Compose
+## ⚡️ Contributors Quick Start
 
-### Docker Compose Setup
+### Prerequisite
 
-- Clone the repository
+Development system must have docker engine installed and running.
 
-```bash
-git clone https://github.com/makeplane/plane
-cd plane
-chmod +x setup.sh
-```
+### Steps
 
-- Run setup.sh
+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. 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`
 
 ```bash
 ./setup.sh
 ```
 
-> If running in a cloud env replace localhost with public facing IP address of the VM
+You are ready to make changes to the code. Do not forget to refresh the browser (in case id does not auto-reload)
 
-- Run Docker compose up
+Thats it!
 
-```bash
-docker compose up -d
-```
+## 🍙 Self Hosting
 
-<strong>You can use the default email and password for your first login `captain@plane.so` and `password123`.</strong>
+For self hosting environment setup, visit the [Self Hosting](https://docs.plane.so/self-hosting) documentation page
 
 ## 🚀 Features
 
diff --git a/apiserver/.env.example b/apiserver/.env.example
index 8193b5e77..d3ad596e5 100644
--- a/apiserver/.env.example
+++ b/apiserver/.env.example
@@ -70,3 +70,6 @@ ENABLE_MAGIC_LINK_LOGIN="0"
 # Email redirections and minio domain settings
 WEB_URL="http://localhost"
 
+
+# Gunicorn Workers
+GUNICORN_WORKERS=2
diff --git a/apiserver/Dockerfile.dev b/apiserver/Dockerfile.dev
new file mode 100644
index 000000000..f1c9b4cac
--- /dev/null
+++ b/apiserver/Dockerfile.dev
@@ -0,0 +1,52 @@
+FROM python:3.11.1-alpine3.17 AS backend
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1 
+
+RUN apk --no-cache add \
+    "bash~=5.2" \
+    "libpq~=15" \
+    "libxslt~=1.1" \
+    "nodejs-current~=19" \
+    "xmlsec~=1.2" \
+    "libffi-dev" \
+    "bash~=5.2" \
+    "g++~=12.2" \
+    "gcc~=12.2" \
+    "cargo~=1.64" \
+    "git~=2" \
+    "make~=4.3" \
+    "postgresql13-dev~=13" \
+    "libc-dev" \
+    "linux-headers"
+
+WORKDIR /code
+
+COPY requirements.txt ./requirements.txt
+ADD requirements ./requirements
+
+RUN pip install -r requirements.txt --compile --no-cache-dir
+
+RUN addgroup -S plane && \
+    adduser -S captain -G plane
+
+RUN chown captain.plane /code
+
+USER captain
+
+# Add in Django deps and generate Django's static files
+
+USER root
+
+# RUN chmod +x ./bin/takeoff ./bin/worker ./bin/beat
+RUN chmod -R 777 /code
+
+USER captain
+
+# Expose container port and run entry point script
+EXPOSE 8000
+
+# CMD [ "./bin/takeoff" ]
+
diff --git a/apiserver/bin/bucket_script.py b/apiserver/bin/bucket_script.py
new file mode 100644
index 000000000..cb2d05540
--- /dev/null
+++ b/apiserver/bin/bucket_script.py
@@ -0,0 +1,57 @@
+import os, sys
+import boto3
+from botocore.exceptions import ClientError
+
+
+sys.path.append("/code")
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "plane.settings.production")
+import django
+
+django.setup()
+
+def create_bucket():
+    try:
+        from django.conf import settings
+        
+        # Create a session using the credentials from Django settings
+        session = boto3.session.Session(
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+        )
+
+        # Create an S3 client using the session
+        s3_client = session.client('s3', endpoint_url=settings.AWS_S3_ENDPOINT_URL)
+        bucket_name = settings.AWS_STORAGE_BUCKET_NAME
+        
+        print("Checking bucket...")
+        
+        # Check if the bucket exists
+        s3_client.head_bucket(Bucket=bucket_name)
+        
+        # If head_bucket does not raise an exception, the bucket exists
+        print(f"Bucket '{bucket_name}' already exists.")
+        
+    except ClientError as e:
+        error_code = int(e.response['Error']['Code'])
+        bucket_name = settings.AWS_STORAGE_BUCKET_NAME
+        if error_code == 404:
+            # Bucket does not exist, create it
+            print(f"Bucket '{bucket_name}' does not exist. Creating bucket...")
+            try:
+                s3_client.create_bucket(Bucket=bucket_name)
+                print(f"Bucket '{bucket_name}' created successfully.")
+            except ClientError as create_error:
+                print(f"Failed to create bucket: {create_error}")
+        elif error_code == 403:
+            # Access to the bucket is forbidden
+            print(f"Access to the bucket '{bucket_name}' is forbidden. Check permissions.")
+        else:
+            # Another ClientError occurred
+            print(f"Failed to check bucket: {e}")
+    except Exception as ex:
+        # Handle any other exception
+        print(f"An error occurred: {ex}")
+
+if __name__ == "__main__":
+    create_bucket()
diff --git a/apiserver/bin/takeoff b/apiserver/bin/takeoff
index dc25a14e2..74980dd62 100755
--- a/apiserver/bin/takeoff
+++ b/apiserver/bin/takeoff
@@ -5,5 +5,7 @@ python manage.py migrate
 
 # Create a Default User
 python bin/user_script.py
+# Create the default bucket
+python bin/bucket_script.py
 
-exec gunicorn -w 8 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:8000 --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
+exec gunicorn -w $GUNICORN_WORKERS -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:8000 --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
diff --git a/apiserver/bin/user_script.py b/apiserver/bin/user_script.py
index e115b20b8..a356f2ec9 100644
--- a/apiserver/bin/user_script.py
+++ b/apiserver/bin/user_script.py
@@ -1,4 +1,4 @@
-import os, sys, random, string
+import os, sys
 import uuid
 
 sys.path.append("/code")
diff --git a/apiserver/gunicorn.config.py b/apiserver/gunicorn.config.py
index 67205b5ec..51c2a5488 100644
--- a/apiserver/gunicorn.config.py
+++ b/apiserver/gunicorn.config.py
@@ -3,4 +3,4 @@ from psycogreen.gevent import patch_psycopg
 
 def post_fork(server, worker):
     patch_psycopg()
-    worker.log.info("Made Psycopg2 Green")
\ No newline at end of file
+    worker.log.info("Made Psycopg2 Green")
diff --git a/apiserver/plane/api/permissions/project.py b/apiserver/plane/api/permissions/project.py
index e4e3e0f9b..4f907dbd6 100644
--- a/apiserver/plane/api/permissions/project.py
+++ b/apiserver/plane/api/permissions/project.py
@@ -101,4 +101,4 @@ class ProjectLitePermission(BasePermission):
             workspace__slug=view.workspace_slug,
             member=request.user,
             project_id=view.project_id,
-        ).exists()
\ No newline at end of file
+        ).exists()
diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index 72806fd28..7eff00104 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -1,5 +1,13 @@
 from .base import BaseSerializer
-from .user import UserSerializer, UserLiteSerializer, ChangePasswordSerializer, ResetPasswordSerializer, UserAdminLiteSerializer
+from .user import (
+    UserSerializer,
+    UserLiteSerializer,
+    ChangePasswordSerializer,
+    ResetPasswordSerializer,
+    UserAdminLiteSerializer,
+    UserMeSerializer,
+    UserMeSettingsSerializer,
+)
 from .workspace import (
     WorkSpaceSerializer,
     WorkSpaceMemberSerializer,
@@ -8,9 +16,11 @@ from .workspace import (
     WorkspaceLiteSerializer,
     WorkspaceThemeSerializer,
     WorkspaceMemberAdminSerializer,
+    WorkspaceMemberMeSerializer,
 )
 from .project import (
     ProjectSerializer,
+    ProjectListSerializer,
     ProjectDetailSerializer,
     ProjectMemberSerializer,
     ProjectMemberInviteSerializer,
@@ -20,11 +30,16 @@ from .project import (
     ProjectMemberLiteSerializer,
     ProjectDeployBoardSerializer,
     ProjectMemberAdminSerializer,
-    ProjectPublicMemberSerializer
+    ProjectPublicMemberSerializer,
 )
 from .state import StateSerializer, StateLiteSerializer
 from .view import GlobalViewSerializer, IssueViewSerializer, IssueViewFavoriteSerializer
-from .cycle import CycleSerializer, CycleIssueSerializer, CycleFavoriteSerializer, CycleWriteSerializer
+from .cycle import (
+    CycleSerializer,
+    CycleIssueSerializer,
+    CycleFavoriteSerializer,
+    CycleWriteSerializer,
+)
 from .asset import FileAssetSerializer
 from .issue import (
     IssueCreateSerializer,
diff --git a/apiserver/plane/api/serializers/analytic.py b/apiserver/plane/api/serializers/analytic.py
index 5f35e1117..9f3ee6d0a 100644
--- a/apiserver/plane/api/serializers/analytic.py
+++ b/apiserver/plane/api/serializers/analytic.py
@@ -17,7 +17,7 @@ class AnalyticViewSerializer(BaseSerializer):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         return AnalyticView.objects.create(**validated_data)
 
     def update(self, instance, validated_data):
@@ -25,6 +25,6 @@ class AnalyticViewSerializer(BaseSerializer):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         validated_data["query"] = issue_filters(query_params, "PATCH")
         return super().update(instance, validated_data)
diff --git a/apiserver/plane/api/serializers/base.py b/apiserver/plane/api/serializers/base.py
index 0c6bba468..89c9725d9 100644
--- a/apiserver/plane/api/serializers/base.py
+++ b/apiserver/plane/api/serializers/base.py
@@ -3,3 +3,56 @@ from rest_framework import serializers
 
 class BaseSerializer(serializers.ModelSerializer):
     id = serializers.PrimaryKeyRelatedField(read_only=True)
+
+class DynamicBaseSerializer(BaseSerializer):
+
+    def __init__(self, *args, **kwargs):
+        # If 'fields' is provided in the arguments, remove it and store it separately.
+        # This is done so as not to pass this custom argument up to the superclass.
+        fields = kwargs.pop("fields", None)
+
+        # Call the initialization of the superclass.
+        super().__init__(*args, **kwargs)
+
+        # If 'fields' was provided, filter the fields of the serializer accordingly.
+        if fields is not None:
+            self.fields = self._filter_fields(fields)
+
+    def _filter_fields(self, fields):
+        """
+        Adjust the serializer's fields based on the provided 'fields' list.
+
+        :param fields: List or dictionary specifying which fields to include in the serializer.
+        :return: The updated fields for the serializer.
+        """
+        # Check each field_name in the provided fields.
+        for field_name in fields:
+            # If the field is a dictionary (indicating nested fields),
+            # loop through its keys and values.
+            if isinstance(field_name, dict):
+                for key, value in field_name.items():
+                    # If the value of this nested field is a list, 
+                    # perform a recursive filter on it.
+                    if isinstance(value, list):
+                        self._filter_fields(self.fields[key], value)
+
+        # Create a list to store allowed fields.
+        allowed = []
+        for item in fields:
+            # If the item is a string, it directly represents a field's name.
+            if isinstance(item, str):
+                allowed.append(item)
+            # If the item is a dictionary, it represents a nested field.
+            # Add the key of this dictionary to the allowed list.
+            elif isinstance(item, dict):
+                allowed.append(list(item.keys())[0])
+
+        # Convert the current serializer's fields and the allowed fields to sets.
+        existing = set(self.fields)
+        allowed = set(allowed)
+
+        # Remove fields from the serializer that aren't in the 'allowed' list.
+        for field_name in (existing - allowed):
+            self.fields.pop(field_name)
+
+        return self.fields
diff --git a/apiserver/plane/api/serializers/cycle.py b/apiserver/plane/api/serializers/cycle.py
index ad214c52a..104a3dd06 100644
--- a/apiserver/plane/api/serializers/cycle.py
+++ b/apiserver/plane/api/serializers/cycle.py
@@ -1,6 +1,3 @@
-# Django imports
-from django.db.models.functions import TruncDate
-
 # Third party imports
 from rest_framework import serializers
 
@@ -12,10 +9,14 @@ from .workspace import WorkspaceLiteSerializer
 from .project import ProjectLiteSerializer
 from plane.db.models import Cycle, CycleIssue, CycleFavorite
 
-class CycleWriteSerializer(BaseSerializer):
 
+class CycleWriteSerializer(BaseSerializer):
     def validate(self, data):
-        if data.get("start_date", None) is not None and data.get("end_date", None) is not None and data.get("start_date", None) > data.get("end_date", None):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("end_date", None) is not None
+            and data.get("start_date", None) > data.get("end_date", None)
+        ):
             raise serializers.ValidationError("Start date cannot exceed end date")
         return data
 
@@ -41,10 +42,14 @@ class CycleSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
 
     def validate(self, data):
-        if data.get("start_date", None) is not None and data.get("end_date", None) is not None and data.get("start_date", None) > data.get("end_date", None):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("end_date", None) is not None
+            and data.get("start_date", None) > data.get("end_date", None)
+        ):
             raise serializers.ValidationError("Start date cannot exceed end date")
         return data
-    
+
     def get_assignees(self, obj):
         members = [
             {
@@ -52,7 +57,9 @@ class CycleSerializer(BaseSerializer):
                 "display_name": assignee.display_name,
                 "id": assignee.id,
             }
-            for issue_cycle in obj.issue_cycle.prefetch_related("issue__assignees").all()
+            for issue_cycle in obj.issue_cycle.prefetch_related(
+                "issue__assignees"
+            ).all()
             for assignee in issue_cycle.issue.assignees.all()
         ]
         # Use a set comprehension to return only the unique objects
diff --git a/apiserver/plane/api/serializers/inbox.py b/apiserver/plane/api/serializers/inbox.py
index ae17b749b..f52a90660 100644
--- a/apiserver/plane/api/serializers/inbox.py
+++ b/apiserver/plane/api/serializers/inbox.py
@@ -6,7 +6,6 @@ from .base import BaseSerializer
 from .issue import IssueFlatSerializer, LabelLiteSerializer
 from .project import ProjectLiteSerializer
 from .state import StateLiteSerializer
-from .project import ProjectLiteSerializer
 from .user import UserLiteSerializer
 from plane.db.models import Inbox, InboxIssue, Issue
 
diff --git a/apiserver/plane/api/serializers/integration/__init__.py b/apiserver/plane/api/serializers/integration/__init__.py
index 963fc295e..112ff02d1 100644
--- a/apiserver/plane/api/serializers/integration/__init__.py
+++ b/apiserver/plane/api/serializers/integration/__init__.py
@@ -5,4 +5,4 @@ from .github import (
     GithubIssueSyncSerializer,
     GithubCommentSyncSerializer,
 )
-from .slack import SlackProjectSyncSerializer
\ No newline at end of file
+from .slack import SlackProjectSyncSerializer
diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 57539f24c..ae033969f 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -5,11 +5,10 @@ from django.utils import timezone
 from rest_framework import serializers
 
 # Module imports
-from .base import BaseSerializer
+from .base import BaseSerializer, DynamicBaseSerializer
 from .user import UserLiteSerializer
 from .state import StateSerializer, StateLiteSerializer
-from .user import UserLiteSerializer
-from .project import ProjectSerializer, ProjectLiteSerializer
+from .project import ProjectLiteSerializer
 from .workspace import WorkspaceLiteSerializer
 from plane.db.models import (
     User,
@@ -75,13 +74,13 @@ class IssueCreateSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
 
-    assignees_list = serializers.ListField(
+    assignees = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
         write_only=True,
         required=False,
     )
 
-    labels_list = serializers.ListField(
+    labels = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
@@ -99,6 +98,12 @@ class IssueCreateSerializer(BaseSerializer):
             "updated_at",
         ]
 
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['assignees'] = [str(assignee.id) for assignee in instance.assignees.all()]
+        data['labels'] = [str(label.id) for label in instance.labels.all()]
+        return data
+
     def validate(self, data):
         if (
             data.get("start_date", None) is not None
@@ -109,8 +114,8 @@ class IssueCreateSerializer(BaseSerializer):
         return data
 
     def create(self, validated_data):
-        assignees = validated_data.pop("assignees_list", None)
-        labels = validated_data.pop("labels_list", None)
+        assignees = validated_data.pop("assignees", None)
+        labels = validated_data.pop("labels", None)
 
         project_id = self.context["project_id"]
         workspace_id = self.context["workspace_id"]
@@ -168,8 +173,8 @@ class IssueCreateSerializer(BaseSerializer):
         return issue
 
     def update(self, instance, validated_data):
-        assignees = validated_data.pop("assignees_list", None)
-        labels = validated_data.pop("labels_list", None)
+        assignees = validated_data.pop("assignees", None)
+        labels = validated_data.pop("labels", None)
 
         # Related models
         project_id = instance.project_id
@@ -226,25 +231,6 @@ class IssueActivitySerializer(BaseSerializer):
         fields = "__all__"
 
 
-class IssueCommentSerializer(BaseSerializer):
-    actor_detail = UserLiteSerializer(read_only=True, source="actor")
-    issue_detail = IssueFlatSerializer(read_only=True, source="issue")
-    project_detail = ProjectLiteSerializer(read_only=True, source="project")
-    workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
-
-    class Meta:
-        model = IssueComment
-        fields = "__all__"
-        read_only_fields = [
-            "workspace",
-            "project",
-            "issue",
-            "created_by",
-            "updated_by",
-            "created_at",
-            "updated_at",
-        ]
-
 
 class IssuePropertySerializer(BaseSerializer):
     class Meta:
@@ -281,7 +267,6 @@ class LabelLiteSerializer(BaseSerializer):
 
 
 class IssueLabelSerializer(BaseSerializer):
-    # label_details = LabelSerializer(read_only=True, source="label")
 
     class Meta:
         model = IssueLabel
@@ -563,7 +548,7 @@ class IssueSerializer(BaseSerializer):
         ]
 
 
-class IssueLiteSerializer(BaseSerializer):
+class IssueLiteSerializer(DynamicBaseSerializer):
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     state_detail = StateLiteSerializer(read_only=True, source="state")
diff --git a/apiserver/plane/api/serializers/module.py b/apiserver/plane/api/serializers/module.py
index aaabd4ae0..48f773b0f 100644
--- a/apiserver/plane/api/serializers/module.py
+++ b/apiserver/plane/api/serializers/module.py
@@ -4,9 +4,8 @@ from rest_framework import serializers
 # Module imports
 from .base import BaseSerializer
 from .user import UserLiteSerializer
-from .project import ProjectSerializer, ProjectLiteSerializer
+from .project import ProjectLiteSerializer
 from .workspace import WorkspaceLiteSerializer
-from .issue import IssueStateSerializer
 
 from plane.db.models import (
     User,
@@ -19,7 +18,7 @@ from plane.db.models import (
 
 
 class ModuleWriteSerializer(BaseSerializer):
-    members_list = serializers.ListField(
+    members = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
         write_only=True,
         required=False,
@@ -39,6 +38,11 @@ class ModuleWriteSerializer(BaseSerializer):
             "created_at",
             "updated_at",
         ]
+    
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['members'] = [str(member.id) for member in instance.members.all()]
+        return data
 
     def validate(self, data):
         if data.get("start_date", None) is not None and data.get("target_date", None) is not None and data.get("start_date", None) > data.get("target_date", None):
@@ -46,7 +50,7 @@ class ModuleWriteSerializer(BaseSerializer):
         return data    
 
     def create(self, validated_data):
-        members = validated_data.pop("members_list", None)
+        members = validated_data.pop("members", None)
 
         project = self.context["project"]
 
@@ -72,7 +76,7 @@ class ModuleWriteSerializer(BaseSerializer):
         return module
 
     def update(self, instance, validated_data):
-        members = validated_data.pop("members_list", None)
+        members = validated_data.pop("members", None)
 
         if members is not None:
             ModuleMember.objects.filter(module=instance).delete()
diff --git a/apiserver/plane/api/serializers/page.py b/apiserver/plane/api/serializers/page.py
index 5fd5d1e2d..b052a34fe 100644
--- a/apiserver/plane/api/serializers/page.py
+++ b/apiserver/plane/api/serializers/page.py
@@ -12,7 +12,7 @@ from plane.db.models import Page, PageTransaction, PageFavorite, PageLabel, Labe
 class PageSerializer(BaseSerializer):
     is_favorite = serializers.BooleanField(read_only=True)
     label_details = LabelLiteSerializer(read_only=True, source="labels", many=True)
-    labels_list = serializers.ListField(
+    labels = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
@@ -28,9 +28,13 @@ class PageSerializer(BaseSerializer):
             "project",
             "owned_by",
         ]
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['labels'] = [str(label.id) for label in instance.labels.all()]
+        return data
 
     def create(self, validated_data):
-        labels = validated_data.pop("labels_list", None)
+        labels = validated_data.pop("labels", None)
         project_id = self.context["project_id"]
         owned_by_id = self.context["owned_by_id"]
         page = Page.objects.create(
@@ -55,7 +59,7 @@ class PageSerializer(BaseSerializer):
         return page
 
     def update(self, instance, validated_data):
-        labels = validated_data.pop("labels_list", None)
+        labels = validated_data.pop("labels", None)
         if labels is not None:
             PageLabel.objects.filter(page=instance).delete()
             PageLabel.objects.bulk_create(
diff --git a/apiserver/plane/api/serializers/project.py b/apiserver/plane/api/serializers/project.py
index 49d986cae..36fa6ecca 100644
--- a/apiserver/plane/api/serializers/project.py
+++ b/apiserver/plane/api/serializers/project.py
@@ -1,11 +1,8 @@
-# Django imports
-from django.db import IntegrityError
-
 # Third party imports
 from rest_framework import serializers
 
 # Module imports
-from .base import BaseSerializer
+from .base import BaseSerializer, DynamicBaseSerializer
 from plane.api.serializers.workspace import WorkSpaceSerializer, WorkspaceLiteSerializer
 from plane.api.serializers.user import UserLiteSerializer, UserAdminLiteSerializer
 from plane.db.models import (
@@ -94,8 +91,33 @@ class ProjectLiteSerializer(BaseSerializer):
         read_only_fields = fields
 
 
+class ProjectListSerializer(DynamicBaseSerializer):
+    is_favorite = serializers.BooleanField(read_only=True)
+    total_members = serializers.IntegerField(read_only=True)
+    total_cycles = serializers.IntegerField(read_only=True)
+    total_modules = serializers.IntegerField(read_only=True)
+    is_member = serializers.BooleanField(read_only=True)
+    sort_order = serializers.FloatField(read_only=True)
+    member_role = serializers.IntegerField(read_only=True)
+    is_deployed = serializers.BooleanField(read_only=True)
+    members = serializers.SerializerMethodField()
+
+    def get_members(self, obj):
+        project_members = ProjectMember.objects.filter(project_id=obj.id).values(
+            "id",
+            "member_id",
+            "member__display_name",
+            "member__avatar",
+        )
+        return project_members
+
+    class Meta:
+        model = Project
+        fields = "__all__"
+
+
 class ProjectDetailSerializer(BaseSerializer):
-    workspace = WorkSpaceSerializer(read_only=True)
+    # workspace = WorkSpaceSerializer(read_only=True)
     default_assignee = UserLiteSerializer(read_only=True)
     project_lead = UserLiteSerializer(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
@@ -148,8 +170,6 @@ class ProjectIdentifierSerializer(BaseSerializer):
 
 
 class ProjectFavoriteSerializer(BaseSerializer):
-    project_detail = ProjectLiteSerializer(source="project", read_only=True)
-
     class Meta:
         model = ProjectFavorite
         fields = "__all__"
@@ -178,12 +198,12 @@ class ProjectDeployBoardSerializer(BaseSerializer):
         fields = "__all__"
         read_only_fields = [
             "workspace",
-            "project", "anchor",
+            "project",
+            "anchor",
         ]
 
 
 class ProjectPublicMemberSerializer(BaseSerializer):
-
     class Meta:
         model = ProjectPublicMember
         fields = "__all__"
diff --git a/apiserver/plane/api/serializers/state.py b/apiserver/plane/api/serializers/state.py
index 097bc4c93..ad416c340 100644
--- a/apiserver/plane/api/serializers/state.py
+++ b/apiserver/plane/api/serializers/state.py
@@ -7,8 +7,6 @@ from plane.db.models import State
 
 
 class StateSerializer(BaseSerializer):
-    workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
-    project_detail = ProjectLiteSerializer(read_only=True, source="project")
 
     class Meta:
         model = State
diff --git a/apiserver/plane/api/serializers/user.py b/apiserver/plane/api/serializers/user.py
index dcb00c6cb..b8f9dedd4 100644
--- a/apiserver/plane/api/serializers/user.py
+++ b/apiserver/plane/api/serializers/user.py
@@ -3,7 +3,7 @@ from rest_framework import serializers
 
 # Module import
 from .base import BaseSerializer
-from plane.db.models import User
+from plane.db.models import User, Workspace, WorkspaceMemberInvite
 
 
 class UserSerializer(BaseSerializer):
@@ -33,6 +33,81 @@ class UserSerializer(BaseSerializer):
             return bool(obj.first_name) or bool(obj.last_name)
 
 
+class UserMeSerializer(BaseSerializer):
+    class Meta:
+        model = User
+        fields = [
+            "id",
+            "avatar",
+            "cover_image",
+            "date_joined",
+            "display_name",
+            "email",
+            "first_name",
+            "last_name",
+            "is_active",
+            "is_bot",
+            "is_email_verified",
+            "is_managed",
+            "is_onboarded",
+            "is_tour_completed",
+            "mobile_number",
+            "role",
+            "onboarding_step",
+            "user_timezone",
+            "username",
+            "theme",
+            "last_workspace_id",
+        ]
+        read_only_fields = fields
+
+
+class UserMeSettingsSerializer(BaseSerializer):
+    workspace = serializers.SerializerMethodField()
+
+    class Meta:
+        model = User
+        fields = [
+            "id",
+            "email",
+            "workspace",
+        ]
+        read_only_fields = fields
+
+    def get_workspace(self, obj):
+        workspace_invites = WorkspaceMemberInvite.objects.filter(
+            email=obj.email
+        ).count()
+        if obj.last_workspace_id is not None:
+            workspace = Workspace.objects.filter(
+                pk=obj.last_workspace_id, workspace_member__member=obj.id
+            ).first()
+            return {
+                "last_workspace_id": obj.last_workspace_id,
+                "last_workspace_slug": workspace.slug if workspace is not None else "",
+                "fallback_workspace_id": obj.last_workspace_id,
+                "fallback_workspace_slug": workspace.slug if workspace is not None else "",
+                "invites": workspace_invites,
+            }
+        else:
+            fallback_workspace = (
+                Workspace.objects.filter(workspace_member__member_id=obj.id)
+                .order_by("created_at")
+                .first()
+            )
+            return {
+                "last_workspace_id": None,
+                "last_workspace_slug": None,
+                "fallback_workspace_id": fallback_workspace.id
+                if fallback_workspace is not None
+                else None,
+                "fallback_workspace_slug": fallback_workspace.slug
+                if fallback_workspace is not None
+                else None,
+                "invites": workspace_invites,
+            }
+
+
 class UserLiteSerializer(BaseSerializer):
     class Meta:
         model = User
@@ -51,7 +126,6 @@ class UserLiteSerializer(BaseSerializer):
 
 
 class UserAdminLiteSerializer(BaseSerializer):
-
     class Meta:
         model = User
         fields = [
diff --git a/apiserver/plane/api/serializers/view.py b/apiserver/plane/api/serializers/view.py
index a3b6f48be..e7502609a 100644
--- a/apiserver/plane/api/serializers/view.py
+++ b/apiserver/plane/api/serializers/view.py
@@ -57,7 +57,7 @@ class IssueViewSerializer(BaseSerializer):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         return IssueView.objects.create(**validated_data)
 
     def update(self, instance, validated_data):
@@ -65,7 +65,7 @@ class IssueViewSerializer(BaseSerializer):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         validated_data["query"] = issue_filters(query_params, "PATCH")
         return super().update(instance, validated_data)
 
diff --git a/apiserver/plane/api/serializers/workspace.py b/apiserver/plane/api/serializers/workspace.py
index d27b66481..0a80ce8b7 100644
--- a/apiserver/plane/api/serializers/workspace.py
+++ b/apiserver/plane/api/serializers/workspace.py
@@ -54,6 +54,13 @@ class WorkSpaceMemberSerializer(BaseSerializer):
         fields = "__all__"
 
 
+class WorkspaceMemberMeSerializer(BaseSerializer):
+
+    class Meta:
+        model = WorkspaceMember
+        fields = "__all__"
+
+
 class WorkspaceMemberAdminSerializer(BaseSerializer):
     member = UserAdminLiteSerializer(read_only=True)
     workspace = WorkspaceLiteSerializer(read_only=True)
@@ -103,9 +110,8 @@ class TeamSerializer(BaseSerializer):
             ]
             TeamMember.objects.bulk_create(team_members, batch_size=10)
             return team
-        else:
-            team = Team.objects.create(**validated_data)
-            return team
+        team = Team.objects.create(**validated_data)
+        return team
 
     def update(self, instance, validated_data):
         if "members" in validated_data:
@@ -117,8 +123,7 @@ class TeamSerializer(BaseSerializer):
             ]
             TeamMember.objects.bulk_create(team_members, batch_size=10)
             return super().update(instance, validated_data)
-        else:
-            return super().update(instance, validated_data)
+        return super().update(instance, validated_data)
 
 
 class WorkspaceThemeSerializer(BaseSerializer):
diff --git a/apiserver/plane/api/urls/__init__.py b/apiserver/plane/api/urls/__init__.py
new file mode 100644
index 000000000..957dac24e
--- /dev/null
+++ b/apiserver/plane/api/urls/__init__.py
@@ -0,0 +1,46 @@
+from .analytic import urlpatterns as analytic_urls
+from .asset import urlpatterns as asset_urls
+from .authentication import urlpatterns as authentication_urls
+from .config import urlpatterns as configuration_urls
+from .cycle import urlpatterns as cycle_urls
+from .estimate import urlpatterns as estimate_urls
+from .external import urlpatterns as external_urls
+from .importer import urlpatterns as importer_urls
+from .inbox import urlpatterns as inbox_urls
+from .integration import urlpatterns as integration_urls
+from .issue import urlpatterns as issue_urls
+from .module import urlpatterns as module_urls
+from .notification import urlpatterns as notification_urls
+from .page import urlpatterns as page_urls
+from .project import urlpatterns as project_urls
+from .public_board import urlpatterns as public_board_urls
+from .search import urlpatterns as search_urls
+from .state import urlpatterns as state_urls
+from .user import urlpatterns as user_urls
+from .views import urlpatterns as view_urls
+from .workspace import urlpatterns as workspace_urls
+
+
+urlpatterns = [
+    *analytic_urls,
+    *asset_urls,
+    *authentication_urls,
+    *configuration_urls,
+    *cycle_urls,
+    *estimate_urls,
+    *external_urls,
+    *importer_urls,
+    *inbox_urls,
+    *integration_urls,
+    *issue_urls,
+    *module_urls,
+    *notification_urls,
+    *page_urls,
+    *project_urls,
+    *public_board_urls,
+    *search_urls,
+    *state_urls,
+    *user_urls,
+    *view_urls,
+    *workspace_urls,
+]
diff --git a/apiserver/plane/api/urls/analytic.py b/apiserver/plane/api/urls/analytic.py
new file mode 100644
index 000000000..cb6155e32
--- /dev/null
+++ b/apiserver/plane/api/urls/analytic.py
@@ -0,0 +1,46 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    AnalyticsEndpoint,
+    AnalyticViewViewset,
+    SavedAnalyticEndpoint,
+    ExportAnalyticsEndpoint,
+    DefaultAnalyticsEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/analytics/",
+        AnalyticsEndpoint.as_view(),
+        name="plane-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/",
+        AnalyticViewViewset.as_view({"get": "list", "post": "create"}),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/<uuid:pk>/",
+        AnalyticViewViewset.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/saved-analytic-view/<uuid:analytic_id>/",
+        SavedAnalyticEndpoint.as_view(),
+        name="saved-analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/export-analytics/",
+        ExportAnalyticsEndpoint.as_view(),
+        name="export-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/default-analytics/",
+        DefaultAnalyticsEndpoint.as_view(),
+        name="default-analytics",
+    ),
+]
diff --git a/apiserver/plane/api/urls/asset.py b/apiserver/plane/api/urls/asset.py
new file mode 100644
index 000000000..b6ae9f42c
--- /dev/null
+++ b/apiserver/plane/api/urls/asset.py
@@ -0,0 +1,31 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    FileAssetEndpoint,
+    UserAssetsEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/file-assets/",
+        FileAssetEndpoint.as_view(),
+        name="file-assets",
+    ),
+    path(
+        "workspaces/file-assets/<uuid:workspace_id>/<str:asset_key>/",
+        FileAssetEndpoint.as_view(),
+        name="file-assets",
+    ),
+    path(
+        "users/file-assets/",
+        UserAssetsEndpoint.as_view(),
+        name="user-file-assets",
+    ),
+    path(
+        "users/file-assets/<str:asset_key>/",
+        UserAssetsEndpoint.as_view(),
+        name="user-file-assets",
+    ),
+]
diff --git a/apiserver/plane/api/urls/authentication.py b/apiserver/plane/api/urls/authentication.py
new file mode 100644
index 000000000..44b7000ea
--- /dev/null
+++ b/apiserver/plane/api/urls/authentication.py
@@ -0,0 +1,68 @@
+from django.urls import path
+
+from rest_framework_simplejwt.views import TokenRefreshView
+
+
+from plane.api.views import (
+    # Authentication
+    SignUpEndpoint,
+    SignInEndpoint,
+    SignOutEndpoint,
+    MagicSignInEndpoint,
+    MagicSignInGenerateEndpoint,
+    OauthEndpoint,
+    ## End Authentication
+    # Auth Extended
+    ForgotPasswordEndpoint,
+    VerifyEmailEndpoint,
+    ResetPasswordEndpoint,
+    RequestEmailVerificationEndpoint,
+    ChangePasswordEndpoint,
+    ## End Auth Extender
+    # API Tokens
+    ApiTokenEndpoint,
+    ## End API Tokens
+)
+
+
+urlpatterns = [
+    #  Social Auth
+    path("social-auth/", OauthEndpoint.as_view(), name="oauth"),
+    # Auth
+    path("sign-up/", SignUpEndpoint.as_view(), name="sign-up"),
+    path("sign-in/", SignInEndpoint.as_view(), name="sign-in"),
+    path("sign-out/", SignOutEndpoint.as_view(), name="sign-out"),
+    # Magic Sign In/Up
+    path(
+        "magic-generate/", MagicSignInGenerateEndpoint.as_view(), name="magic-generate"
+    ),
+    path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
+    path("token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
+    # Email verification
+    path("email-verify/", VerifyEmailEndpoint.as_view(), name="email-verify"),
+    path(
+        "request-email-verify/",
+        RequestEmailVerificationEndpoint.as_view(),
+        name="request-reset-email",
+    ),
+    # Password Manipulation
+    path(
+        "users/me/change-password/",
+        ChangePasswordEndpoint.as_view(),
+        name="change-password",
+    ),
+    path(
+        "reset-password/<uidb64>/<token>/",
+        ResetPasswordEndpoint.as_view(),
+        name="password-reset",
+    ),
+    path(
+        "forgot-password/",
+        ForgotPasswordEndpoint.as_view(),
+        name="forgot-password",
+    ),
+    # API Tokens
+    path("api-tokens/", ApiTokenEndpoint.as_view(), name="api-tokens"),
+    path("api-tokens/<uuid:pk>/", ApiTokenEndpoint.as_view(), name="api-tokens"),
+    ## End API Tokens
+]
diff --git a/apiserver/plane/api/urls/config.py b/apiserver/plane/api/urls/config.py
new file mode 100644
index 000000000..321a56200
--- /dev/null
+++ b/apiserver/plane/api/urls/config.py
@@ -0,0 +1,12 @@
+from django.urls import path
+
+
+from plane.api.views import ConfigurationEndpoint
+
+urlpatterns = [
+    path(
+        "configs/",
+        ConfigurationEndpoint.as_view(),
+        name="configuration",
+    ),
+]
\ No newline at end of file
diff --git a/apiserver/plane/api/urls/cycle.py b/apiserver/plane/api/urls/cycle.py
new file mode 100644
index 000000000..068276361
--- /dev/null
+++ b/apiserver/plane/api/urls/cycle.py
@@ -0,0 +1,87 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    CycleViewSet,
+    CycleIssueViewSet,
+    CycleDateCheckEndpoint,
+    CycleFavoriteViewSet,
+    TransferCycleIssueEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/",
+        CycleViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:pk>/",
+        CycleViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/",
+        CycleIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/<uuid:pk>/",
+        CycleIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/date-check/",
+        CycleDateCheckEndpoint.as_view(),
+        name="project-cycle-date",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/",
+        CycleFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/<uuid:cycle_id>/",
+        CycleFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/transfer-issues/",
+        TransferCycleIssueEndpoint.as_view(),
+        name="transfer-issues",
+    ),
+]
diff --git a/apiserver/plane/api/urls/estimate.py b/apiserver/plane/api/urls/estimate.py
new file mode 100644
index 000000000..89363e849
--- /dev/null
+++ b/apiserver/plane/api/urls/estimate.py
@@ -0,0 +1,37 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ProjectEstimatePointEndpoint,
+    BulkEstimatePointEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-estimates/",
+        ProjectEstimatePointEndpoint.as_view(),
+        name="project-estimate-points",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/",
+        BulkEstimatePointEndpoint.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="bulk-create-estimate-points",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/<uuid:estimate_id>/",
+        BulkEstimatePointEndpoint.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="bulk-create-estimate-points",
+    ),
+]
diff --git a/apiserver/plane/api/urls/external.py b/apiserver/plane/api/urls/external.py
new file mode 100644
index 000000000..c22289035
--- /dev/null
+++ b/apiserver/plane/api/urls/external.py
@@ -0,0 +1,25 @@
+from django.urls import path
+
+
+from plane.api.views import UnsplashEndpoint
+from plane.api.views import ReleaseNotesEndpoint
+from plane.api.views import GPTIntegrationEndpoint
+
+
+urlpatterns = [
+    path(
+        "unsplash/",
+        UnsplashEndpoint.as_view(),
+        name="unsplash",
+    ),
+    path(
+        "release-notes/",
+        ReleaseNotesEndpoint.as_view(),
+        name="release-notes",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
+        GPTIntegrationEndpoint.as_view(),
+        name="importer",
+    ),
+]
diff --git a/apiserver/plane/api/urls/importer.py b/apiserver/plane/api/urls/importer.py
new file mode 100644
index 000000000..c0a9aa5b5
--- /dev/null
+++ b/apiserver/plane/api/urls/importer.py
@@ -0,0 +1,37 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ServiceIssueImportSummaryEndpoint,
+    ImportServiceEndpoint,
+    UpdateServiceImportStatusEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/importers/<str:service>/",
+        ServiceIssueImportSummaryEndpoint.as_view(),
+        name="importer-summary",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/importers/<str:service>/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/importers/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/importers/<str:service>/<uuid:pk>/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/service/<str:service>/importers/<uuid:importer_id>/",
+        UpdateServiceImportStatusEndpoint.as_view(),
+        name="importer-status",
+    ),
+]
diff --git a/apiserver/plane/api/urls/inbox.py b/apiserver/plane/api/urls/inbox.py
new file mode 100644
index 000000000..315f30601
--- /dev/null
+++ b/apiserver/plane/api/urls/inbox.py
@@ -0,0 +1,53 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    InboxViewSet,
+    InboxIssueViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/",
+        InboxViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:pk>/",
+        InboxViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
+        InboxIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
+        InboxIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox-issue",
+    ),
+]
diff --git a/apiserver/plane/api/urls/integration.py b/apiserver/plane/api/urls/integration.py
new file mode 100644
index 000000000..dd431b6c8
--- /dev/null
+++ b/apiserver/plane/api/urls/integration.py
@@ -0,0 +1,150 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    IntegrationViewSet,
+    WorkspaceIntegrationViewSet,
+    GithubRepositoriesEndpoint,
+    GithubRepositorySyncViewSet,
+    GithubIssueSyncViewSet,
+    GithubCommentSyncViewSet,
+    BulkCreateGithubIssueSyncEndpoint,
+    SlackProjectSyncViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "integrations/",
+        IntegrationViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="integrations",
+    ),
+    path(
+        "integrations/<uuid:pk>/",
+        IntegrationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<str:provider>/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<uuid:pk>/provider/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    # Github Integrations
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<uuid:workspace_integration_id>/github-repositories/",
+        GithubRepositoriesEndpoint.as_view(),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/",
+        GithubRepositorySyncViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/<uuid:pk>/",
+        GithubRepositorySyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/",
+        GithubIssueSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/bulk-create-github-issue-sync/",
+        BulkCreateGithubIssueSyncEndpoint.as_view(),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:pk>/",
+        GithubIssueSyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/",
+        GithubCommentSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/<uuid:pk>/",
+        GithubCommentSyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    ## End Github Integrations
+    # Slack Integration
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/",
+        SlackProjectSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/<uuid:pk>/",
+        SlackProjectSyncViewSet.as_view(
+            {
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+    ),
+    ## End Slack Integration
+]
diff --git a/apiserver/plane/api/urls/issue.py b/apiserver/plane/api/urls/issue.py
new file mode 100644
index 000000000..23a8e4fa6
--- /dev/null
+++ b/apiserver/plane/api/urls/issue.py
@@ -0,0 +1,327 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    IssueViewSet,
+    IssueListEndpoint,
+    IssueListGroupedEndpoint,
+    LabelViewSet,
+    BulkCreateIssueLabelsEndpoint,
+    BulkDeleteIssuesEndpoint,
+    BulkImportIssuesEndpoint,
+    UserWorkSpaceIssues,
+    SubIssuesEndpoint,
+    IssueLinkViewSet,
+    IssueAttachmentEndpoint,
+    ExportIssuesEndpoint,
+    IssueActivityEndpoint,
+    IssueCommentViewSet,
+    IssueSubscriberViewSet,
+    IssueReactionViewSet,
+    CommentReactionViewSet,
+    IssueUserDisplayPropertyEndpoint,
+    IssueArchiveViewSet,
+    IssueRelationViewSet,
+    IssueDraftViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
+        IssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue",
+    ),
+    path(
+        "v2/workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
+        IssueListEndpoint.as_view(),
+        name="project-issue",
+    ),
+    path(
+        "v3/workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
+        IssueListGroupedEndpoint.as_view(),
+        name="project-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/",
+        IssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/",
+        LabelViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/<uuid:pk>/",
+        LabelViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-create-labels/",
+        BulkCreateIssueLabelsEndpoint.as_view(),
+        name="project-bulk-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-delete-issues/",
+        BulkDeleteIssuesEndpoint.as_view(),
+        name="project-issues-bulk",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-issues/<str:service>/",
+        BulkImportIssuesEndpoint.as_view(),
+        name="project-issues-bulk",
+    ),
+    path(
+        "workspaces/<str:slug>/my-issues/",
+        UserWorkSpaceIssues.as_view(),
+        name="workspace-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/sub-issues/",
+        SubIssuesEndpoint.as_view(),
+        name="sub-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/",
+        IssueLinkViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/<uuid:pk>/",
+        IssueLinkViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/",
+        IssueAttachmentEndpoint.as_view(),
+        name="project-issue-attachments",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/<uuid:pk>/",
+        IssueAttachmentEndpoint.as_view(),
+        name="project-issue-attachments",
+    ),
+    path(
+        "workspaces/<str:slug>/export-issues/",
+        ExportIssuesEndpoint.as_view(),
+        name="export-issues",
+    ),
+    ## End Issues
+    ## Issue Activity
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/history/",
+        IssueActivityEndpoint.as_view(),
+        name="project-issue-history",
+    ),
+    ## Issue Activity
+    ## IssueComments
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
+        IssueCommentViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
+        IssueCommentViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment",
+    ),
+    ## End IssueComments
+    # Issue Subscribers
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/",
+        IssueSubscriberViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-subscribers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/<uuid:subscriber_id>/",
+        IssueSubscriberViewSet.as_view({"delete": "destroy"}),
+        name="project-issue-subscribers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/subscribe/",
+        IssueSubscriberViewSet.as_view(
+            {
+                "get": "subscription_status",
+                "post": "subscribe",
+                "delete": "unsubscribe",
+            }
+        ),
+        name="project-issue-subscribers",
+    ),
+    ## End Issue Subscribers
+    # Issue Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    ## End Issue Reactions
+    # Comment Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    ## End Comment Reactions
+    ## IssueProperty
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
+        IssueUserDisplayPropertyEndpoint.as_view(),
+        name="project-issue-display-properties",
+    ),
+    ## IssueProperty End
+    ## Issue Archives
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/unarchive/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "post": "unarchive",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    ## End Issue Archives
+    ## Issue Relation
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-relation/",
+        IssueRelationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="issue-relation",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-relation/<uuid:pk>/",
+        IssueRelationViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="issue-relation",
+    ),
+    ## End Issue Relation
+    ## Issue Drafts
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-draft",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/<uuid:pk>/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-draft",
+    ),
+]
diff --git a/apiserver/plane/api/urls/module.py b/apiserver/plane/api/urls/module.py
new file mode 100644
index 000000000..3239af1e4
--- /dev/null
+++ b/apiserver/plane/api/urls/module.py
@@ -0,0 +1,104 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ModuleViewSet,
+    ModuleIssueViewSet,
+    ModuleLinkViewSet,
+    ModuleFavoriteViewSet,
+    BulkImportModulesEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/",
+        ModuleViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-modules",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:pk>/",
+        ModuleViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-modules",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/",
+        ModuleIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-module-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/<uuid:pk>/",
+        ModuleIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-module-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/",
+        ModuleLinkViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-module-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/<uuid:pk>/",
+        ModuleLinkViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-module-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/",
+        ModuleFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-module",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/<uuid:module_id>/",
+        ModuleFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-module",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-modules/<str:service>/",
+        BulkImportModulesEndpoint.as_view(),
+        name="bulk-modules-create",
+    ),
+]
diff --git a/apiserver/plane/api/urls/notification.py b/apiserver/plane/api/urls/notification.py
new file mode 100644
index 000000000..5e1936d01
--- /dev/null
+++ b/apiserver/plane/api/urls/notification.py
@@ -0,0 +1,66 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    NotificationViewSet,
+    UnreadNotificationEndpoint,
+    MarkAllReadNotificationViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/users/notifications/",
+        NotificationViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/",
+        NotificationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/read/",
+        NotificationViewSet.as_view(
+            {
+                "post": "mark_read",
+                "delete": "mark_unread",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/archive/",
+        NotificationViewSet.as_view(
+            {
+                "post": "archive",
+                "delete": "unarchive",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/unread/",
+        UnreadNotificationEndpoint.as_view(),
+        name="unread-notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/mark-all-read/",
+        MarkAllReadNotificationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="mark-all-read-notifications",
+    ),
+]
diff --git a/apiserver/plane/api/urls/page.py b/apiserver/plane/api/urls/page.py
new file mode 100644
index 000000000..648702283
--- /dev/null
+++ b/apiserver/plane/api/urls/page.py
@@ -0,0 +1,79 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    PageViewSet,
+    PageBlockViewSet,
+    PageFavoriteViewSet,
+    CreateIssueFromPageBlockEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/",
+        PageViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:pk>/",
+        PageViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/",
+        PageBlockViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-page-blocks",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:pk>/",
+        PageBlockViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-page-blocks",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/",
+        PageFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/<uuid:page_id>/",
+        PageFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:page_block_id>/issues/",
+        CreateIssueFromPageBlockEndpoint.as_view(),
+        name="page-block-issues",
+    ),
+]
diff --git a/apiserver/plane/api/urls/project.py b/apiserver/plane/api/urls/project.py
new file mode 100644
index 000000000..2d9e513df
--- /dev/null
+++ b/apiserver/plane/api/urls/project.py
@@ -0,0 +1,132 @@
+from django.urls import path
+
+from plane.api.views import (
+    ProjectViewSet,
+    InviteProjectEndpoint,
+    ProjectMemberViewSet,
+    ProjectMemberInvitationsViewset,
+    ProjectMemberUserEndpoint,
+    ProjectJoinEndpoint,
+    AddTeamToProjectEndpoint,
+    ProjectUserViewsEndpoint,
+    ProjectIdentifierEndpoint,
+    ProjectFavoritesViewSet,
+    LeaveProjectEndpoint,
+    ProjectPublicCoverImagesEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/",
+        ProjectViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:pk>/",
+        ProjectViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/project-identifiers/",
+        ProjectIdentifierEndpoint.as_view(),
+        name="project-identifiers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invite/",
+        InviteProjectEndpoint.as_view(),
+        name="invite-project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/",
+        ProjectMemberViewSet.as_view({"get": "list", "post": "create"}),
+        name="project-member",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/<uuid:pk>/",
+        ProjectMemberViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-member",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/join/",
+        ProjectJoinEndpoint.as_view(),
+        name="project-join",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/team-invite/",
+        AddTeamToProjectEndpoint.as_view(),
+        name="projects",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/",
+        ProjectMemberInvitationsViewset.as_view({"get": "list"}),
+        name="project-member-invite",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/<uuid:pk>/",
+        ProjectMemberInvitationsViewset.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project-member-invite",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-views/",
+        ProjectUserViewsEndpoint.as_view(),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/me/",
+        ProjectMemberUserEndpoint.as_view(),
+        name="project-member-view",
+    ),
+    path(
+        "workspaces/<str:slug>/user-favorite-projects/",
+        ProjectFavoritesViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-favorite",
+    ),
+    path(
+        "workspaces/<str:slug>/user-favorite-projects/<uuid:project_id>/",
+        ProjectFavoritesViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-favorite",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/leave/",
+        LeaveProjectEndpoint.as_view(),
+        name="leave-project",
+    ),
+    path(
+        "project-covers/",
+        ProjectPublicCoverImagesEndpoint.as_view(),
+        name="project-covers",
+    ),
+]
diff --git a/apiserver/plane/api/urls/public_board.py b/apiserver/plane/api/urls/public_board.py
new file mode 100644
index 000000000..272d5961c
--- /dev/null
+++ b/apiserver/plane/api/urls/public_board.py
@@ -0,0 +1,151 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ProjectDeployBoardViewSet,
+    ProjectDeployBoardPublicSettingsEndpoint,
+    ProjectIssuesPublicEndpoint,
+    IssueRetrievePublicEndpoint,
+    IssueCommentPublicViewSet,
+    IssueReactionPublicViewSet,
+    CommentReactionPublicViewSet,
+    InboxIssuePublicViewSet,
+    IssueVotePublicViewSet,
+    WorkspaceProjectDeployBoardEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/",
+        ProjectDeployBoardViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-deploy-board",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/<uuid:pk>/",
+        ProjectDeployBoardViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-deploy-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/settings/",
+        ProjectDeployBoardPublicSettingsEndpoint.as_view(),
+        name="project-deploy-board-settings",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/",
+        ProjectIssuesPublicEndpoint.as_view(),
+        name="project-deploy-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/",
+        IssueRetrievePublicEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
+        IssueCommentPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="issue-comments-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
+        IssueCommentPublicViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="issue-comments-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="issue-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionPublicViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="issue-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="comment-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionPublicViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="comment-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
+        InboxIssuePublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
+        InboxIssuePublicViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/votes/",
+        IssueVotePublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+                "delete": "destroy",
+            }
+        ),
+        name="issue-vote-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/",
+        WorkspaceProjectDeployBoardEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
+]
diff --git a/apiserver/plane/api/urls/search.py b/apiserver/plane/api/urls/search.py
new file mode 100644
index 000000000..282feb046
--- /dev/null
+++ b/apiserver/plane/api/urls/search.py
@@ -0,0 +1,21 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    GlobalSearchEndpoint,
+    IssueSearchEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/search/",
+        GlobalSearchEndpoint.as_view(),
+        name="global-search",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/search-issues/",
+        IssueSearchEndpoint.as_view(),
+        name="project-issue-search",
+    ),
+]
diff --git a/apiserver/plane/api/urls/state.py b/apiserver/plane/api/urls/state.py
new file mode 100644
index 000000000..94aa55f24
--- /dev/null
+++ b/apiserver/plane/api/urls/state.py
@@ -0,0 +1,38 @@
+from django.urls import path
+
+
+from plane.api.views import StateViewSet
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/",
+        StateViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-states",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/",
+        StateViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-state",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/mark-default/",
+        StateViewSet.as_view(
+            {
+                "post": "mark_as_default",
+            }
+        ),
+        name="project-state",
+    ),
+]
diff --git a/apiserver/plane/api/urls/user.py b/apiserver/plane/api/urls/user.py
new file mode 100644
index 000000000..5282a7cf6
--- /dev/null
+++ b/apiserver/plane/api/urls/user.py
@@ -0,0 +1,113 @@
+from django.urls import path
+
+from plane.api.views import (
+    ## User
+    UserEndpoint,
+    UpdateUserOnBoardedEndpoint,
+    UpdateUserTourCompletedEndpoint,
+    UserActivityEndpoint,
+    ChangePasswordEndpoint,
+    ## End User
+    ## Workspaces
+    UserWorkspaceInvitationsEndpoint,
+    UserWorkSpacesEndpoint,
+    JoinWorkspaceEndpoint,
+    UserWorkspaceInvitationsEndpoint,
+    UserWorkspaceInvitationEndpoint,
+    UserActivityGraphEndpoint,
+    UserIssueCompletedGraphEndpoint,
+    UserWorkspaceDashboardEndpoint,
+    UserProjectInvitationsViewset,
+    ## End Workspaces
+)
+
+urlpatterns = [
+    # User Profile
+    path(
+        "users/me/",
+        UserEndpoint.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="users",
+    ),
+    path(
+        "users/me/settings/",
+        UserEndpoint.as_view(
+            {
+                "get": "retrieve_user_settings",
+            }
+        ),
+        name="users",
+    ),
+    path(
+        "users/me/change-password/",
+        ChangePasswordEndpoint.as_view(),
+        name="change-password",
+    ),
+    path(
+        "users/me/onboard/",
+        UpdateUserOnBoardedEndpoint.as_view(),
+        name="user-onboard",
+    ),
+    path(
+        "users/me/tour-completed/",
+        UpdateUserTourCompletedEndpoint.as_view(),
+        name="user-tour",
+    ),
+    path(
+        "users/workspaces/<str:slug>/activities/",
+        UserActivityEndpoint.as_view(),
+        name="user-activities",
+    ),
+    # user workspaces
+    path(
+        "users/me/workspaces/",
+        UserWorkSpacesEndpoint.as_view(),
+        name="user-workspace",
+    ),
+    # user workspace invitations
+    path(
+        "users/me/invitations/workspaces/",
+        UserWorkspaceInvitationsEndpoint.as_view({"get": "list", "post": "create"}),
+        name="user-workspace-invitations",
+    ),
+    # user workspace invitation
+    path(
+        "users/me/invitations/<uuid:pk>/",
+        UserWorkspaceInvitationEndpoint.as_view(
+            {
+                "get": "retrieve",
+            }
+        ),
+        name="user-workspace-invitation",
+    ),
+    # user join workspace
+    # User Graphs
+    path(
+        "users/me/workspaces/<str:slug>/activity-graph/",
+        UserActivityGraphEndpoint.as_view(),
+        name="user-activity-graph",
+    ),
+    path(
+        "users/me/workspaces/<str:slug>/issues-completed-graph/",
+        UserIssueCompletedGraphEndpoint.as_view(),
+        name="completed-graph",
+    ),
+    path(
+        "users/me/workspaces/<str:slug>/dashboard/",
+        UserWorkspaceDashboardEndpoint.as_view(),
+        name="user-workspace-dashboard",
+    ),
+    ## End User Graph
+    path(
+        "users/me/invitations/workspaces/<str:slug>/<uuid:pk>/join/",
+        JoinWorkspaceEndpoint.as_view(),
+        name="user-join-workspace",
+    ),
+    # user project invitations
+    path(
+        "users/me/invitations/projects/",
+        UserProjectInvitationsViewset.as_view({"get": "list", "post": "create"}),
+        name="user-project-invitations",
+    ),
+]
diff --git a/apiserver/plane/api/urls/views.py b/apiserver/plane/api/urls/views.py
new file mode 100644
index 000000000..560855e80
--- /dev/null
+++ b/apiserver/plane/api/urls/views.py
@@ -0,0 +1,85 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    IssueViewViewSet,
+    GlobalViewViewSet,
+    GlobalViewIssuesViewSet,
+    IssueViewFavoriteViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/views/",
+        IssueViewViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/views/<uuid:pk>/",
+        IssueViewViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/views/",
+        GlobalViewViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="global-view",
+    ),
+    path(
+        "workspaces/<str:slug>/views/<uuid:pk>/",
+        GlobalViewViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="global-view",
+    ),
+    path(
+        "workspaces/<str:slug>/issues/",
+        GlobalViewIssuesViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="global-view-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/",
+        IssueViewFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/<uuid:view_id>/",
+        IssueViewFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-view",
+    ),
+]
diff --git a/apiserver/plane/api/urls/workspace.py b/apiserver/plane/api/urls/workspace.py
new file mode 100644
index 000000000..f26730833
--- /dev/null
+++ b/apiserver/plane/api/urls/workspace.py
@@ -0,0 +1,176 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    WorkSpaceViewSet,
+    InviteWorkspaceEndpoint,
+    WorkSpaceMemberViewSet,
+    WorkspaceInvitationsViewset,
+    WorkspaceMemberUserEndpoint,
+    WorkspaceMemberUserViewsEndpoint,
+    WorkSpaceAvailabilityCheckEndpoint,
+    TeamMemberViewSet,
+    UserLastProjectWithWorkspaceEndpoint,
+    WorkspaceThemeViewSet,
+    WorkspaceUserProfileStatsEndpoint,
+    WorkspaceUserActivityEndpoint,
+    WorkspaceUserProfileEndpoint,
+    WorkspaceUserProfileIssuesEndpoint,
+    WorkspaceLabelsEndpoint,
+    LeaveWorkspaceEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspace-slug-check/",
+        WorkSpaceAvailabilityCheckEndpoint.as_view(),
+        name="workspace-availability",
+    ),
+    path(
+        "workspaces/",
+        WorkSpaceViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/",
+        WorkSpaceViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invite/",
+        InviteWorkspaceEndpoint.as_view(),
+        name="invite-workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invitations/",
+        WorkspaceInvitationsViewset.as_view({"get": "list"}),
+        name="workspace-invitations",
+    ),
+    path(
+        "workspaces/<str:slug>/invitations/<uuid:pk>/",
+        WorkspaceInvitationsViewset.as_view(
+            {
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace-invitations",
+    ),
+    path(
+        "workspaces/<str:slug>/members/",
+        WorkSpaceMemberViewSet.as_view({"get": "list"}),
+        name="workspace-member",
+    ),
+    path(
+        "workspaces/<str:slug>/members/<uuid:pk>/",
+        WorkSpaceMemberViewSet.as_view(
+            {
+                "patch": "partial_update",
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace-member",
+    ),
+    path(
+        "workspaces/<str:slug>/teams/",
+        TeamMemberViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace-team-members",
+    ),
+    path(
+        "workspaces/<str:slug>/teams/<uuid:pk>/",
+        TeamMemberViewSet.as_view(
+            {
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace-team-members",
+    ),
+    path(
+        "users/last-visited-workspace/",
+        UserLastProjectWithWorkspaceEndpoint.as_view(),
+        name="workspace-project-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-members/me/",
+        WorkspaceMemberUserEndpoint.as_view(),
+        name="workspace-member-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-views/",
+        WorkspaceMemberUserViewsEndpoint.as_view(),
+        name="workspace-member-views-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-themes/",
+        WorkspaceThemeViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace-themes",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-themes/<uuid:pk>/",
+        WorkspaceThemeViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-themes",
+    ),
+    path(
+        "workspaces/<str:slug>/user-stats/<uuid:user_id>/",
+        WorkspaceUserProfileStatsEndpoint.as_view(),
+        name="workspace-user-stats",
+    ),
+    path(
+        "workspaces/<str:slug>/user-activity/<uuid:user_id>/",
+        WorkspaceUserActivityEndpoint.as_view(),
+        name="workspace-user-activity",
+    ),
+    path(
+        "workspaces/<str:slug>/user-profile/<uuid:user_id>/",
+        WorkspaceUserProfileEndpoint.as_view(),
+        name="workspace-user-profile-page",
+    ),
+    path(
+        "workspaces/<str:slug>/user-issues/<uuid:user_id>/",
+        WorkspaceUserProfileIssuesEndpoint.as_view(),
+        name="workspace-user-profile-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/labels/",
+        WorkspaceLabelsEndpoint.as_view(),
+        name="workspace-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/members/leave/",
+        LeaveWorkspaceEndpoint.as_view(),
+        name="leave-workspace-members",
+    ),
+]
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls_deprecated.py
similarity index 98%
rename from apiserver/plane/api/urls.py
rename to apiserver/plane/api/urls_deprecated.py
index a235b456f..2424fe161 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls_deprecated.py
@@ -1,5 +1,6 @@
 from django.urls import path
 
+from rest_framework_simplejwt.views import TokenRefreshView
 
 # Create your urls here.
 
@@ -27,7 +28,6 @@ from plane.api.views import (
     ## End User
     # Workspaces
     WorkSpaceViewSet,
-    UserWorkspaceInvitationsEndpoint,
     UserWorkSpacesEndpoint,
     InviteWorkspaceEndpoint,
     JoinWorkspaceEndpoint,
@@ -81,7 +81,7 @@ from plane.api.views import (
     BulkDeleteIssuesEndpoint,
     BulkImportIssuesEndpoint,
     ProjectUserViewsEndpoint,
-    IssuePropertyViewSet,
+    IssueUserDisplayPropertyEndpoint,
     LabelViewSet,
     SubIssuesEndpoint,
     IssueLinkViewSet,
@@ -106,7 +106,6 @@ from plane.api.views import (
     GlobalViewViewSet,
     GlobalViewIssuesViewSet,
     IssueViewViewSet,
-    ViewIssuesEndpoint,
     IssueViewFavoriteViewSet,
     ## End Views
     # Cycles
@@ -193,6 +192,9 @@ from plane.api.views import (
 )
 
 
+#TODO: Delete this file
+# This url file has been deprecated use apiserver/plane/urls folder to create new urls
+
 urlpatterns = [
     #  Social Auth
     path("social-auth/", OauthEndpoint.as_view(), name="oauth"),
@@ -205,6 +207,7 @@ urlpatterns = [
         "magic-generate/", MagicSignInGenerateEndpoint.as_view(), name="magic-generate"
     ),
     path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
+    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
     # Email verification
     path("email-verify/", VerifyEmailEndpoint.as_view(), name="email-verify"),
     path(
@@ -231,6 +234,15 @@ urlpatterns = [
         ),
         name="users",
     ),
+    path(
+        "users/me/settings/",
+        UserEndpoint.as_view(
+            {
+                "get": "retrieve_user_settings",
+            }
+        ),
+        name="users",
+    ),
     path(
         "users/me/change-password/",
         ChangePasswordEndpoint.as_view(),
@@ -558,6 +570,7 @@ urlpatterns = [
         "workspaces/<str:slug>/user-favorite-projects/",
         ProjectFavoritesViewSet.as_view(
             {
+                "get": "list",
                 "post": "create",
             }
         ),
@@ -658,11 +671,6 @@ urlpatterns = [
         ),
         name="project-view",
     ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/views/<uuid:view_id>/issues/",
-        ViewIssuesEndpoint.as_view(),
-        name="project-view-issues",
-    ),
     path(
         "workspaces/<str:slug>/views/",
         GlobalViewViewSet.as_view(
@@ -1000,26 +1008,9 @@ urlpatterns = [
     ## End Comment Reactions
     ## IssueProperty
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-roadmap",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/<uuid:pk>/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-roadmap",
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
+        IssueUserDisplayPropertyEndpoint.as_view(),
+        name="project-issue-display-properties",
     ),
     ## IssueProperty Ebd
     ## Issue Archives
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 7be8dd1cb..9b24c7706 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -7,14 +7,12 @@ from .project import (
     ProjectMemberInvitationsViewset,
     ProjectMemberInviteDetailViewSet,
     ProjectIdentifierEndpoint,
-    AddMemberToProjectEndpoint,
     ProjectJoinEndpoint,
     ProjectUserViewsEndpoint,
     ProjectMemberUserEndpoint,
     ProjectFavoritesViewSet,
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
-    ProjectMemberEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
     LeaveProjectEndpoint,
     ProjectPublicCoverImagesEndpoint,
@@ -53,11 +51,15 @@ from .workspace import (
     WorkspaceUserProfileEndpoint,
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
-    WorkspaceMembersEndpoint,
     LeaveWorkspaceEndpoint,
 )
 from .state import StateViewSet
-from .view import GlobalViewViewSet, GlobalViewIssuesViewSet, IssueViewViewSet, ViewIssuesEndpoint, IssueViewFavoriteViewSet
+from .view import (
+    GlobalViewViewSet,
+    GlobalViewIssuesViewSet,
+    IssueViewViewSet,
+    IssueViewFavoriteViewSet,
+)
 from .cycle import (
     CycleViewSet,
     CycleIssueViewSet,
@@ -68,10 +70,12 @@ from .cycle import (
 from .asset import FileAssetEndpoint, UserAssetsEndpoint
 from .issue import (
     IssueViewSet,
+    IssueListEndpoint,
+    IssueListGroupedEndpoint,
     WorkSpaceIssuesEndpoint,
     IssueActivityEndpoint,
     IssueCommentViewSet,
-    IssuePropertyViewSet,
+    IssueUserDisplayPropertyEndpoint,
     LabelViewSet,
     BulkDeleteIssuesEndpoint,
     UserWorkSpaceIssues,
@@ -166,8 +170,12 @@ from .analytic import (
     DefaultAnalyticsEndpoint,
 )
 
-from .notification import NotificationViewSet, UnreadNotificationEndpoint, MarkAllReadNotificationViewSet
+from .notification import (
+    NotificationViewSet,
+    UnreadNotificationEndpoint,
+    MarkAllReadNotificationViewSet,
+)
 
 from .exporter import ExportIssuesEndpoint
 
-from .config import ConfigurationEndpoint
\ No newline at end of file
+from .config import ConfigurationEndpoint
diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index feb766b46..c29a4b692 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -1,10 +1,5 @@
 # Django imports
-from django.db.models import (
-    Count,
-    Sum,
-    F,
-    Q
-)
+from django.db.models import Count, Sum, F, Q
 from django.db.models.functions import ExtractMonth
 
 # Third party imports
@@ -28,82 +23,156 @@ class AnalyticsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            x_axis = request.GET.get("x_axis", False)
-            y_axis = request.GET.get("y_axis", False)
+        x_axis = request.GET.get("x_axis", False)
+        y_axis = request.GET.get("y_axis", False)
+        segment = request.GET.get("segment", False)
 
-            if not x_axis or not y_axis:
-                return Response(
-                    {"error": "x-axis and y-axis dimensions are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            segment = request.GET.get("segment", False)
-            filters = issue_filters(request.GET, "GET")
-
-            queryset = Issue.issue_objects.filter(workspace__slug=slug, **filters)
-
-            total_issues = queryset.count()
-            distribution = build_graph_plot(
-                queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
-            )
-
-            colors = dict()
-            if x_axis in ["state__name", "state__group"] or segment in [
-                "state__name",
-                "state__group",
-            ]:
-                if x_axis in ["state__name", "state__group"]:
-                    key = "name" if x_axis == "state__name" else "group"
-                else:
-                    key = "name" if segment == "state__name" else "group"
-
-                colors = (
-                    State.objects.filter(
-                        ~Q(name="Triage"),
-                        workspace__slug=slug, project_id__in=filters.get("project__in")
-                    ).values(key, "color")
-                    if filters.get("project__in", False)
-                    else State.objects.filter(~Q(name="Triage"), workspace__slug=slug).values(key, "color")
-                )
-
-            if x_axis in ["labels__name"] or segment in ["labels__name"]:
-                colors = (
-                    Label.objects.filter(
-                        workspace__slug=slug, project_id__in=filters.get("project__in")
-                    ).values("name", "color")
-                    if filters.get("project__in", False)
-                    else Label.objects.filter(workspace__slug=slug).values(
-                        "name", "color"
-                    )
-                )
-
-            assignee_details = {}
-            if x_axis in ["assignees__id"] or segment in ["assignees__id"]:
-                assignee_details = (
-                    Issue.issue_objects.filter(workspace__slug=slug, **filters, assignees__avatar__isnull=False)
-                    .order_by("assignees__id")
-                    .distinct("assignees__id")
-                    .values("assignees__avatar", "assignees__display_name", "assignees__first_name", "assignees__last_name", "assignees__id")
-                )
+        valid_xaxis_segment = [
+            "state_id",
+            "state__group",
+            "labels__id",
+            "assignees__id",
+            "estimate_point",
+            "issue_cycle__cycle_id",
+            "issue_module__module_id",
+            "priority",
+            "start_date",
+            "target_date",
+            "created_at",
+            "completed_at",
+        ]
 
+        valid_yaxis = [
+            "issue_count",
+            "estimate",
+        ]
 
+        # Check for x-axis and y-axis as thery are required parameters
+        if (
+            not x_axis
+            or not y_axis
+            or not x_axis in valid_xaxis_segment
+            or not y_axis in valid_yaxis
+        ):
             return Response(
                 {
-                    "total": total_issues,
-                    "distribution": distribution,
-                    "extras": {"colors": colors, "assignee_details": assignee_details},
+                    "error": "x-axis and y-axis dimensions are required and the values should be valid"
                 },
-                status=status.HTTP_200_OK,
-            )
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # If segment is present it cannot be same as x-axis
+        if segment and (segment not in valid_xaxis_segment or x_axis == segment):
+            return Response(
+                {
+                    "error": "Both segment and x axis cannot be same and segment should be valid"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Additional filters that need to be applied
+        filters = issue_filters(request.GET, "GET")
+
+        # Get the issues for the workspace with the additional filters applied
+        queryset = Issue.issue_objects.filter(workspace__slug=slug, **filters)
+
+        # Get the total issue count
+        total_issues = queryset.count()
+
+        # Build the graph payload
+        distribution = build_graph_plot(
+            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+        )
+
+        state_details = {}
+        if x_axis in ["state_id"] or segment in ["state_id"]:
+            state_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    **filters,
+                )
+                .distinct("state_id")
+                .order_by("state_id")
+                .values("state_id", "state__name", "state__color")
+            )
+
+        label_details = {}
+        if x_axis in ["labels__id"] or segment in ["labels__id"]:
+            label_details = (
+                Issue.objects.filter(
+                    workspace__slug=slug, **filters, labels__id__isnull=False
+                )
+                .distinct("labels__id")
+                .order_by("labels__id")
+                .values("labels__id", "labels__color", "labels__name")
+            )
+
+        assignee_details = {}
+        if x_axis in ["assignees__id"] or segment in ["assignees__id"]:
+            assignee_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug, **filters, assignees__avatar__isnull=False
+                )
+                .order_by("assignees__id")
+                .distinct("assignees__id")
+                .values(
+                    "assignees__avatar",
+                    "assignees__display_name",
+                    "assignees__first_name",
+                    "assignees__last_name",
+                    "assignees__id",
+                )
+            )
+
+        cycle_details = {}
+        if x_axis in ["issue_cycle__cycle_id"] or segment in ["issue_cycle__cycle_id"]:
+            cycle_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    **filters,
+                    issue_cycle__cycle_id__isnull=False,
+                )
+                .distinct("issue_cycle__cycle_id")
+                .order_by("issue_cycle__cycle_id")
+                .values(
+                    "issue_cycle__cycle_id",
+                    "issue_cycle__cycle__name",
+                )
+            )
+
+        module_details = {}
+        if x_axis in ["issue_module__module_id"] or segment in [
+            "issue_module__module_id"
+        ]:
+            module_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    **filters,
+                    issue_module__module_id__isnull=False,
+                )
+                .distinct("issue_module__module_id")
+                .order_by("issue_module__module_id")
+                .values(
+                    "issue_module__module_id",
+                    "issue_module__module__name",
+                )
+            )
+
+        return Response(
+            {
+                "total": total_issues,
+                "distribution": distribution,
+                "extras": {
+                    "state_details": state_details,
+                    "assignee_details": assignee_details,
+                    "label_details": label_details,
+                    "cycle_details": cycle_details,
+                    "module_details": module_details,
+                },
+            },
+            status=status.HTTP_200_OK,
+        )
+
 
 class AnalyticViewViewset(BaseViewSet):
     permission_classes = [
@@ -128,45 +197,30 @@ class SavedAnalyticEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, analytic_id):
-        try:
-            analytic_view = AnalyticView.objects.get(
-                pk=analytic_id, workspace__slug=slug
-            )
+        analytic_view = AnalyticView.objects.get(pk=analytic_id, workspace__slug=slug)
 
-            filter = analytic_view.query
-            queryset = Issue.issue_objects.filter(**filter)
+        filter = analytic_view.query
+        queryset = Issue.issue_objects.filter(**filter)
 
-            x_axis = analytic_view.query_dict.get("x_axis", False)
-            y_axis = analytic_view.query_dict.get("y_axis", False)
+        x_axis = analytic_view.query_dict.get("x_axis", False)
+        y_axis = analytic_view.query_dict.get("y_axis", False)
 
-            if not x_axis or not y_axis:
-                return Response(
-                    {"error": "x-axis and y-axis dimensions are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            segment = request.GET.get("segment", False)
-            distribution = build_graph_plot(
-                queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
-            )
-            total_issues = queryset.count()
+        if not x_axis or not y_axis:
             return Response(
-                {"total": total_issues, "distribution": distribution},
-                status=status.HTTP_200_OK,
-            )
-
-        except AnalyticView.DoesNotExist:
-            return Response(
-                {"error": "Analytic View Does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "x-axis and y-axis dimensions are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        segment = request.GET.get("segment", False)
+        distribution = build_graph_plot(
+            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+        )
+        total_issues = queryset.count()
+        return Response(
+            {"total": total_issues, "distribution": distribution},
+            status=status.HTTP_200_OK,
+        )
+
 
 class ExportAnalyticsEndpoint(BaseAPIView):
     permission_classes = [
@@ -174,33 +228,64 @@ class ExportAnalyticsEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug):
-        try:
-            x_axis = request.data.get("x_axis", False)
-            y_axis = request.data.get("y_axis", False)
+        x_axis = request.data.get("x_axis", False)
+        y_axis = request.data.get("y_axis", False)
+        segment = request.data.get("segment", False)
 
-            if not x_axis or not y_axis:
-                return Response(
-                    {"error": "x-axis and y-axis dimensions are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        valid_xaxis_segment = [
+            "state_id",
+            "state__group",
+            "labels__id",
+            "assignees__id",
+            "estimate_point",
+            "issue_cycle__cycle_id",
+            "issue_module__module_id",
+            "priority",
+            "start_date",
+            "target_date",
+            "created_at",
+            "completed_at",
+        ]
 
-            analytic_export_task.delay(
-                email=request.user.email, data=request.data, slug=slug
-            )
+        valid_yaxis = [
+            "issue_count",
+            "estimate",
+        ]
 
+        # Check for x-axis and y-axis as thery are required parameters
+        if (
+            not x_axis
+            or not y_axis
+            or not x_axis in valid_xaxis_segment
+            or not y_axis in valid_yaxis
+        ):
             return Response(
                 {
-                    "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+                    "error": "x-axis and y-axis dimensions are required and the values should be valid"
                 },
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # If segment is present it cannot be same as x-axis
+        if segment and (segment not in valid_xaxis_segment or x_axis == segment):
+            return Response(
+                {
+                    "error": "Both segment and x axis cannot be same and segment should be valid"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        analytic_export_task.delay(
+            email=request.user.email, data=request.data, slug=slug
+        )
+
+        return Response(
+            {
+                "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+            },
+            status=status.HTTP_200_OK,
+        )
+
 
 class DefaultAnalyticsEndpoint(BaseAPIView):
     permission_classes = [
@@ -208,90 +293,92 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            filters = issue_filters(request.GET, "GET")
+        filters = issue_filters(request.GET, "GET")
+        base_issues = Issue.issue_objects.filter(workspace__slug=slug, **filters)
 
-            queryset = Issue.issue_objects.filter(workspace__slug=slug, **filters)
+        total_issues = base_issues.count()
 
-            total_issues = queryset.count()
+        state_groups = base_issues.annotate(state_group=F("state__group"))
 
-            total_issues_classified = (
-                queryset.annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        total_issues_classified = (
+            state_groups.values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            open_issues = queryset.filter(
-                state__group__in=["backlog", "unstarted", "started"]
-            ).count()
+        open_issues_groups = ["backlog", "unstarted", "started"]
+        open_issues_queryset = state_groups.filter(state__group__in=open_issues_groups)
 
-            open_issues_classified = (
-                queryset.filter(state__group__in=["backlog", "unstarted", "started"])
-                .annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        open_issues = open_issues_queryset.count()
+        open_issues_classified = (
+            open_issues_queryset.values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            issue_completed_month_wise = (
-                queryset.filter(completed_at__isnull=False)
-                .annotate(month=ExtractMonth("completed_at"))
-                .values("month")
-                .annotate(count=Count("*"))
-                .order_by("month")
-            )
-            most_issue_created_user = (
-                queryset.exclude(created_by=None)
-                .values("created_by__first_name", "created_by__last_name", "created_by__avatar", "created_by__display_name", "created_by__id")
-                .annotate(count=Count("id"))
-                .order_by("-count")
-            )[:5]
+        issue_completed_month_wise = (
+            base_issues.filter(completed_at__isnull=False)
+            .annotate(month=ExtractMonth("completed_at"))
+            .values("month")
+            .annotate(count=Count("*"))
+            .order_by("month")
+        )
 
-            most_issue_closed_user = (
-                queryset.filter(completed_at__isnull=False, assignees__isnull=False)
-                .values("assignees__first_name", "assignees__last_name", "assignees__avatar", "assignees__display_name", "assignees__id")
-                .annotate(count=Count("id"))
-                .order_by("-count")
-            )[:5]
+        user_details = [
+            "created_by__first_name",
+            "created_by__last_name",
+            "created_by__avatar",
+            "created_by__display_name",
+            "created_by__id",
+        ]
 
-            pending_issue_user = (
-                queryset.filter(completed_at__isnull=True)
-                .values("assignees__first_name", "assignees__last_name", "assignees__avatar", "assignees__display_name", "assignees__id")
-                .annotate(count=Count("id"))
-                .order_by("-count")
-            )
+        most_issue_created_user = (
+            base_issues.exclude(created_by=None)
+            .values(*user_details)
+            .annotate(count=Count("id"))
+            .order_by("-count")[:5]
+        )
 
-            open_estimate_sum = (
-                queryset.filter(
-                    state__group__in=["backlog", "unstarted", "started"]
-                ).aggregate(open_estimate_sum=Sum("estimate_point"))
-            )["open_estimate_sum"]
-            print(open_estimate_sum)
-            
-            total_estimate_sum = queryset.aggregate(
-                total_estimate_sum=Sum("estimate_point")
-            )["total_estimate_sum"]
+        user_assignee_details = [
+            "assignees__first_name",
+            "assignees__last_name",
+            "assignees__avatar",
+            "assignees__display_name",
+            "assignees__id",
+        ]
 
-            return Response(
-                {
-                    "total_issues": total_issues,
-                    "total_issues_classified": total_issues_classified,
-                    "open_issues": open_issues,
-                    "open_issues_classified": open_issues_classified,
-                    "issue_completed_month_wise": issue_completed_month_wise,
-                    "most_issue_created_user": most_issue_created_user,
-                    "most_issue_closed_user": most_issue_closed_user,
-                    "pending_issue_user": pending_issue_user,
-                    "open_estimate_sum": open_estimate_sum,
-                    "total_estimate_sum": total_estimate_sum,
-                },
-                status=status.HTTP_200_OK,
-            )
+        most_issue_closed_user = (
+            base_issues.filter(completed_at__isnull=False)
+            .exclude(assignees=None)
+            .values(*user_assignee_details)
+            .annotate(count=Count("id"))
+            .order_by("-count")[:5]
+        )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        pending_issue_user = (
+            base_issues.filter(completed_at__isnull=True)
+            .values(*user_assignee_details)
+            .annotate(count=Count("id"))
+            .order_by("-count")
+        )
+
+        open_estimate_sum = open_issues_queryset.aggregate(sum=Sum("estimate_point"))[
+            "sum"
+        ]
+        total_estimate_sum = base_issues.aggregate(sum=Sum("estimate_point"))["sum"]
+
+        return Response(
+            {
+                "total_issues": total_issues,
+                "total_issues_classified": total_issues_classified,
+                "open_issues": open_issues,
+                "open_issues_classified": open_issues_classified,
+                "issue_completed_month_wise": issue_completed_month_wise,
+                "most_issue_created_user": most_issue_created_user,
+                "most_issue_closed_user": most_issue_closed_user,
+                "pending_issue_user": pending_issue_user,
+                "open_estimate_sum": open_estimate_sum,
+                "total_estimate_sum": total_estimate_sum,
+            },
+            status=status.HTTP_200_OK,
+        )
diff --git a/apiserver/plane/api/views/api_token.py b/apiserver/plane/api/views/api_token.py
index a94ffb45c..2253903a9 100644
--- a/apiserver/plane/api/views/api_token.py
+++ b/apiserver/plane/api/views/api_token.py
@@ -14,57 +14,34 @@ from plane.api.serializers import APITokenSerializer
 
 class ApiTokenEndpoint(BaseAPIView):
     def post(self, request):
-        try:
-            label = request.data.get("label", str(uuid4().hex))
-            workspace = request.data.get("workspace", False)
+        label = request.data.get("label", str(uuid4().hex))
+        workspace = request.data.get("workspace", False)
 
-            if not workspace:
-                return Response(
-                    {"error": "Workspace is required"}, status=status.HTTP_200_OK
-                )
-
-            api_token = APIToken.objects.create(
-                label=label, user=request.user, workspace_id=workspace
-            )
-
-            serializer = APITokenSerializer(api_token)
-            # Token will be only vissible while creating
+        if not workspace:
             return Response(
-                {"api_token": serializer.data, "token": api_token.token},
-                status=status.HTTP_201_CREATED,
+                {"error": "Workspace is required"}, status=status.HTTP_200_OK
             )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        api_token = APIToken.objects.create(
+            label=label, user=request.user, workspace_id=workspace
+        )
+
+        serializer = APITokenSerializer(api_token)
+        # Token will be only vissible while creating
+        return Response(
+            {"api_token": serializer.data, "token": api_token.token},
+            status=status.HTTP_201_CREATED,
+        )
+
 
     def get(self, request):
-        try:
-            api_tokens = APIToken.objects.filter(user=request.user)
-            serializer = APITokenSerializer(api_tokens, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        api_tokens = APIToken.objects.filter(user=request.user)
+        serializer = APITokenSerializer(api_tokens, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
 
     def delete(self, request, pk):
-        try:
-            api_token = APIToken.objects.get(pk=pk)
-            api_token.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except APIToken.DoesNotExist:
-            return Response(
-                {"error": "Token does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        api_token = APIToken.objects.get(pk=pk)
+        api_token.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
diff --git a/apiserver/plane/api/views/asset.py b/apiserver/plane/api/views/asset.py
index d9b6e502d..3f5dcceac 100644
--- a/apiserver/plane/api/views/asset.py
+++ b/apiserver/plane/api/views/asset.py
@@ -18,108 +18,58 @@ class FileAssetEndpoint(BaseAPIView):
     """
 
     def get(self, request, workspace_id, asset_key):
-        try:
-            asset_key = str(workspace_id) + "/" + asset_key
-            files = FileAsset.objects.filter(asset=asset_key)
-            if files.exists():
-                serializer = FileAssetSerializer(files, context={"request": request}, many=True)
-                return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
-            else:
-                return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        asset_key = str(workspace_id) + "/" + asset_key
+        files = FileAsset.objects.filter(asset=asset_key)
+        if files.exists():
+            serializer = FileAssetSerializer(files, context={"request": request}, many=True)
+            return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
+        else:
+            return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
 
 
     def post(self, request, slug):
-        try:
-            serializer = FileAssetSerializer(data=request.data)
-            if serializer.is_valid():
-                # Get the workspace
-                workspace = Workspace.objects.get(slug=slug)
-                serializer.save(workspace_id=workspace.id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Workspace.DoesNotExist:
-            return Response({"error": "Workspace does not exist"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = FileAssetSerializer(data=request.data)
+        if serializer.is_valid():
+            # Get the workspace
+            workspace = Workspace.objects.get(slug=slug)
+            serializer.save(workspace_id=workspace.id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
 
     def delete(self, request, workspace_id, asset_key):
-        try:
-            asset_key = str(workspace_id) + "/" + asset_key
-            file_asset = FileAsset.objects.get(asset=asset_key)
-            # Delete the file from storage
-            file_asset.asset.delete(save=False)
-            # Delete the file object
-            file_asset.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except FileAsset.DoesNotExist:
-            return Response(
-                {"error": "File Asset doesn't exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        asset_key = str(workspace_id) + "/" + asset_key
+        file_asset = FileAsset.objects.get(asset=asset_key)
+        # Delete the file from storage
+        file_asset.asset.delete(save=False)
+        # Delete the file object
+        file_asset.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserAssetsEndpoint(BaseAPIView):
     parser_classes = (MultiPartParser, FormParser)
 
     def get(self, request, asset_key):
-        try:
             files = FileAsset.objects.filter(asset=asset_key, created_by=request.user)
             if files.exists():
                 serializer = FileAssetSerializer(files, context={"request": request})
                 return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
             else:
                 return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
     def post(self, request):
-        try:
             serializer = FileAssetSerializer(data=request.data)
             if serializer.is_valid():
                 serializer.save()
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+
 
     def delete(self, request, asset_key):
-        try:
             file_asset = FileAsset.objects.get(asset=asset_key, created_by=request.user)
             # Delete the file from storage
             file_asset.asset.delete(save=False)
             # Delete the file object
             file_asset.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
-        except FileAsset.DoesNotExist:
-            return Response(
-                {"error": "File Asset doesn't exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/api/views/auth_extended.py b/apiserver/plane/api/views/auth_extended.py
index df3f3aaca..fbffacff8 100644
--- a/apiserver/plane/api/views/auth_extended.py
+++ b/apiserver/plane/api/views/auth_extended.py
@@ -9,7 +9,6 @@ from django.utils.encoding import (
     DjangoUnicodeDecodeError,
 )
 from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
-from django.contrib.sites.shortcuts import get_current_site
 from django.conf import settings
 
 ## Third Party Imports
@@ -56,11 +55,11 @@ class VerifyEmailEndpoint(BaseAPIView):
             return Response(
                 {"email": "Successfully activated"}, status=status.HTTP_200_OK
             )
-        except jwt.ExpiredSignatureError as indentifier:
+        except jwt.ExpiredSignatureError as _indentifier:
             return Response(
                 {"email": "Activation expired"}, status=status.HTTP_400_BAD_REQUEST
             )
-        except jwt.exceptions.DecodeError as indentifier:
+        except jwt.exceptions.DecodeError as _indentifier:
             return Response(
                 {"email": "Invalid token"}, status=status.HTTP_400_BAD_REQUEST
             )
@@ -128,32 +127,25 @@ class ResetPasswordEndpoint(BaseAPIView):
 
 class ChangePasswordEndpoint(BaseAPIView):
     def post(self, request):
-        try:
-            serializer = ChangePasswordSerializer(data=request.data)
+        serializer = ChangePasswordSerializer(data=request.data)
 
-            user = User.objects.get(pk=request.user.id)
-            if serializer.is_valid():
-                # Check old password
-                if not user.object.check_password(serializer.data.get("old_password")):
-                    return Response(
-                        {"old_password": ["Wrong password."]},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                # set_password also hashes the password that the user will get
-                self.object.set_password(serializer.data.get("new_password"))
-                self.object.save()
-                response = {
-                    "status": "success",
-                    "code": status.HTTP_200_OK,
-                    "message": "Password updated successfully",
-                }
+        user = User.objects.get(pk=request.user.id)
+        if serializer.is_valid():
+            # Check old password
+            if not user.object.check_password(serializer.data.get("old_password")):
+                return Response(
+                    {"old_password": ["Wrong password."]},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            # set_password also hashes the password that the user will get
+            self.object.set_password(serializer.data.get("new_password"))
+            self.object.save()
+            response = {
+                "status": "success",
+                "code": status.HTTP_200_OK,
+                "message": "Password updated successfully",
+            }
 
-                return Response(response)
+            return Response(response)
 
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
diff --git a/apiserver/plane/api/views/authentication.py b/apiserver/plane/api/views/authentication.py
index aa8ff4511..eadfeef61 100644
--- a/apiserver/plane/api/views/authentication.py
+++ b/apiserver/plane/api/views/authentication.py
@@ -40,229 +40,194 @@ class SignUpEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
-        try:
-            if not settings.ENABLE_SIGNUP:
-                return Response(
-                    {
-                        "error": "New account creation is disabled. Please contact your site administrator"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            email = request.data.get("email", False)
-            password = request.data.get("password", False)
-
-            ## Raise exception if any of the above are missing
-            if not email or not password:
-                return Response(
-                    {"error": "Both email and password are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            email = email.strip().lower()
-
-            try:
-                validate_email(email)
-            except ValidationError as e:
-                return Response(
-                    {"error": "Please provide a valid email address."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Check if the user already exists
-            if User.objects.filter(email=email).exists():
-                return Response(
-                    {"error": "User with this email already exists"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            user = User.objects.create(email=email, username=uuid.uuid4().hex)
-            user.set_password(password)
-
-            # settings last actives for the user
-            user.last_active = timezone.now()
-            user.last_login_time = timezone.now()
-            user.last_login_ip = request.META.get("REMOTE_ADDR")
-            user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
-            user.token_updated_at = timezone.now()
-            user.save()
-
-            serialized_user = UserSerializer(user).data
-
-            access_token, refresh_token = get_tokens_for_user(user)
-
-            data = {
-                "access_token": access_token,
-                "refresh_token": refresh_token,
-                "user": serialized_user,
-            }
-
-            # Send Analytics
-            if settings.ANALYTICS_BASE_API:
-                _ = requests.post(
-                    settings.ANALYTICS_BASE_API,
-                    headers={
-                        "Content-Type": "application/json",
-                        "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
-                    },
-                    json={
-                        "event_id": uuid.uuid4().hex,
-                        "event_data": {
-                            "medium": "email",
-                        },
-                        "user": {"email": email, "id": str(user.id)},
-                        "device_ctx": {
-                            "ip": request.META.get("REMOTE_ADDR"),
-                            "user_agent": request.META.get("HTTP_USER_AGENT"),
-                        },
-                        "event_type": "SIGN_UP",
-                    },
-                )
-
-            return Response(data, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
+        if not settings.ENABLE_SIGNUP:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "New account creation is disabled. Please contact your site administrator"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        email = request.data.get("email", False)
+        password = request.data.get("password", False)
+
+        ## Raise exception if any of the above are missing
+        if not email or not password:
+            return Response(
+                {"error": "Both email and password are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        email = email.strip().lower()
+
+        try:
+            validate_email(email)
+        except ValidationError as e:
+            return Response(
+                {"error": "Please provide a valid email address."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Check if the user already exists
+        if User.objects.filter(email=email).exists():
+            return Response(
+                {"error": "User with this email already exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        user = User.objects.create(email=email, username=uuid.uuid4().hex)
+        user.set_password(password)
+
+        # settings last actives for the user
+        user.last_active = timezone.now()
+        user.last_login_time = timezone.now()
+        user.last_login_ip = request.META.get("REMOTE_ADDR")
+        user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
+        user.token_updated_at = timezone.now()
+        user.save()
+
+        access_token, refresh_token = get_tokens_for_user(user)
+
+        data = {
+            "access_token": access_token,
+            "refresh_token": refresh_token,
+        }
+
+        # Send Analytics
+        if settings.ANALYTICS_BASE_API:
+            _ = requests.post(
+                settings.ANALYTICS_BASE_API,
+                headers={
+                    "Content-Type": "application/json",
+                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                },
+                json={
+                    "event_id": uuid.uuid4().hex,
+                    "event_data": {
+                        "medium": "email",
+                    },
+                    "user": {"email": email, "id": str(user.id)},
+                    "device_ctx": {
+                        "ip": request.META.get("REMOTE_ADDR"),
+                        "user_agent": request.META.get("HTTP_USER_AGENT"),
+                    },
+                    "event_type": "SIGN_UP",
+                },
+            )
+
+        return Response(data, status=status.HTTP_200_OK)
+
 
 class SignInEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
-        try:
-            email = request.data.get("email", False)
-            password = request.data.get("password", False)
+        email = request.data.get("email", False)
+        password = request.data.get("password", False)
 
-            ## Raise exception if any of the above are missing
-            if not email or not password:
-                return Response(
-                    {"error": "Both email and password are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            email = email.strip().lower()
-
-            try:
-                validate_email(email)
-            except ValidationError as e:
-                return Response(
-                    {"error": "Please provide a valid email address."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            user = User.objects.filter(email=email).first()
-
-            if user is None:
-                return Response(
-                    {
-                        "error": "Sorry, we could not find a user with the provided credentials. Please try again."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
-
-            # Sign up Process
-            if not user.check_password(password):
-                return Response(
-                    {
-                        "error": "Sorry, we could not find a user with the provided credentials. Please try again."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
-            if not user.is_active:
-                return Response(
-                    {
-                        "error": "Your account has been deactivated. Please contact your site administrator."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
-
-            serialized_user = UserSerializer(user).data
-
-            # settings last active for the user
-            user.last_active = timezone.now()
-            user.last_login_time = timezone.now()
-            user.last_login_ip = request.META.get("REMOTE_ADDR")
-            user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
-            user.token_updated_at = timezone.now()
-            user.save()
-
-            access_token, refresh_token = get_tokens_for_user(user)
-            # Send Analytics
-            if settings.ANALYTICS_BASE_API:
-                _ = requests.post(
-                    settings.ANALYTICS_BASE_API,
-                    headers={
-                        "Content-Type": "application/json",
-                        "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
-                    },
-                    json={
-                        "event_id": uuid.uuid4().hex,
-                        "event_data": {
-                            "medium": "email",
-                        },
-                        "user": {"email": email, "id": str(user.id)},
-                        "device_ctx": {
-                            "ip": request.META.get("REMOTE_ADDR"),
-                            "user_agent": request.META.get("HTTP_USER_AGENT"),
-                        },
-                        "event_type": "SIGN_IN",
-                    },
-                )
-            data = {
-                "access_token": access_token,
-                "refresh_token": refresh_token,
-                "user": serialized_user,
-            }
-
-            return Response(data, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
+        ## Raise exception if any of the above are missing
+        if not email or not password:
             return Response(
-                {
-                    "error": "Something went wrong. Please try again later or contact the support team."
-                },
+                {"error": "Both email and password are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        email = email.strip().lower()
+
+        try:
+            validate_email(email)
+        except ValidationError as e:
+            return Response(
+                {"error": "Please provide a valid email address."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        user = User.objects.filter(email=email).first()
+
+        if user is None:
+            return Response(
+                {
+                    "error": "Sorry, we could not find a user with the provided credentials. Please try again."
+                },
+                status=status.HTTP_403_FORBIDDEN,
+            )
+
+        # Sign up Process
+        if not user.check_password(password):
+            return Response(
+                {
+                    "error": "Sorry, we could not find a user with the provided credentials. Please try again."
+                },
+                status=status.HTTP_403_FORBIDDEN,
+            )
+        if not user.is_active:
+            return Response(
+                {
+                    "error": "Your account has been deactivated. Please contact your site administrator."
+                },
+                status=status.HTTP_403_FORBIDDEN,
+            )
+
+        # settings last active for the user
+        user.last_active = timezone.now()
+        user.last_login_time = timezone.now()
+        user.last_login_ip = request.META.get("REMOTE_ADDR")
+        user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
+        user.token_updated_at = timezone.now()
+        user.save()
+
+        access_token, refresh_token = get_tokens_for_user(user)
+        # Send Analytics
+        if settings.ANALYTICS_BASE_API:
+            _ = requests.post(
+                settings.ANALYTICS_BASE_API,
+                headers={
+                    "Content-Type": "application/json",
+                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                },
+                json={
+                    "event_id": uuid.uuid4().hex,
+                    "event_data": {
+                        "medium": "email",
+                    },
+                    "user": {"email": email, "id": str(user.id)},
+                    "device_ctx": {
+                        "ip": request.META.get("REMOTE_ADDR"),
+                        "user_agent": request.META.get("HTTP_USER_AGENT"),
+                    },
+                    "event_type": "SIGN_IN",
+                },
+            )
+        data = {
+            "access_token": access_token,
+            "refresh_token": refresh_token,
+        }
+
+        return Response(data, status=status.HTTP_200_OK)
+
 
 class SignOutEndpoint(BaseAPIView):
     def post(self, request):
-        try:
-            refresh_token = request.data.get("refresh_token", False)
+        refresh_token = request.data.get("refresh_token", False)
 
-            if not refresh_token:
-                capture_message("No refresh token provided")
-                return Response(
-                    {
-                        "error": "Something went wrong. Please try again later or contact the support team."
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            user = User.objects.get(pk=request.user.id)
-
-            user.last_logout_time = timezone.now()
-            user.last_logout_ip = request.META.get("REMOTE_ADDR")
-
-            user.save()
-
-            token = RefreshToken(refresh_token)
-            token.blacklist()
-            return Response({"message": "success"}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        if not refresh_token:
+            capture_message("No refresh token provided")
             return Response(
-                {
-                    "error": "Something went wrong. Please try again later or contact the support team."
-                },
+                {"error": "No refresh token provided"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        user = User.objects.get(pk=request.user.id)
+
+        user.last_logout_time = timezone.now()
+        user.last_logout_ip = request.META.get("REMOTE_ADDR")
+
+        user.save()
+
+        token = RefreshToken(refresh_token)
+        token.blacklist()
+        return Response({"message": "success"}, status=status.HTTP_200_OK)
+
 
 class MagicSignInGenerateEndpoint(BaseAPIView):
     permission_classes = [
@@ -270,74 +235,62 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
     ]
 
     def post(self, request):
-        try:
-            email = request.data.get("email", False)
+        email = request.data.get("email", False)
 
-            if not email:
+        if not email:
+            return Response(
+                {"error": "Please provide a valid email address"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Clean up
+        email = email.strip().lower()
+        validate_email(email)
+
+        ## Generate a random token
+        token = (
+            "".join(random.choices(string.ascii_lowercase, k=4))
+            + "-"
+            + "".join(random.choices(string.ascii_lowercase, k=4))
+            + "-"
+            + "".join(random.choices(string.ascii_lowercase, k=4))
+        )
+
+        ri = redis_instance()
+
+        key = "magic_" + str(email)
+
+        # Check if the key already exists in python
+        if ri.exists(key):
+            data = json.loads(ri.get(key))
+
+            current_attempt = data["current_attempt"] + 1
+
+            if data["current_attempt"] > 2:
                 return Response(
-                    {"error": "Please provide a valid email address"},
+                    {"error": "Max attempts exhausted. Please try again later."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            # Clean up
-            email = email.strip().lower()
-            validate_email(email)
+            value = {
+                "current_attempt": current_attempt,
+                "email": email,
+                "token": token,
+            }
+            expiry = 600
 
-            ## Generate a random token
-            token = (
-                "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
-                + "-"
-                + "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
-                + "-"
-                + "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
-            )
+            ri.set(key, json.dumps(value), ex=expiry)
 
-            ri = redis_instance()
+        else:
+            value = {"current_attempt": 0, "email": email, "token": token}
+            expiry = 600
 
-            key = "magic_" + str(email)
+            ri.set(key, json.dumps(value), ex=expiry)
 
-            # Check if the key already exists in python
-            if ri.exists(key):
-                data = json.loads(ri.get(key))
+        current_site = settings.WEB_URL
+        magic_link.delay(email, key, token, current_site)
 
-                current_attempt = data["current_attempt"] + 1
-
-                if data["current_attempt"] > 2:
-                    return Response(
-                        {"error": "Max attempts exhausted. Please try again later."},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-
-                value = {
-                    "current_attempt": current_attempt,
-                    "email": email,
-                    "token": token,
-                }
-                expiry = 600
-
-                ri.set(key, json.dumps(value), ex=expiry)
-
-            else:
-                value = {"current_attempt": 0, "email": email, "token": token}
-                expiry = 600
-
-                ri.set(key, json.dumps(value), ex=expiry)
-
-            current_site = settings.WEB_URL
-            magic_link.delay(email, key, token, current_site)
-
-            return Response({"key": key}, status=status.HTTP_200_OK)
-        except ValidationError:
-            return Response(
-                {"error": "Please provide a valid email address."},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response({"key": key}, status=status.HTTP_200_OK)
 
 
 class MagicSignInEndpoint(BaseAPIView):
@@ -346,113 +299,99 @@ class MagicSignInEndpoint(BaseAPIView):
     ]
 
     def post(self, request):
-        try:
-            user_token = request.data.get("token", "").strip()
-            key = request.data.get("key", False).strip().lower()
+        user_token = request.data.get("token", "").strip()
+        key = request.data.get("key", False).strip().lower()
 
-            if not key or user_token == "":
-                return Response(
-                    {"error": "User token and key are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        if not key or user_token == "":
+            return Response(
+                {"error": "User token and key are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            ri = redis_instance()
+        ri = redis_instance()
 
-            if ri.exists(key):
-                data = json.loads(ri.get(key))
+        if ri.exists(key):
+            data = json.loads(ri.get(key))
 
-                token = data["token"]
-                email = data["email"]
+            token = data["token"]
+            email = data["email"]
 
-                if str(token) == str(user_token):
-                    if User.objects.filter(email=email).exists():
-                        user = User.objects.get(email=email)
-                        # Send event to Jitsu for tracking
-                        if settings.ANALYTICS_BASE_API:
-                            _ = requests.post(
-                                settings.ANALYTICS_BASE_API,
-                                headers={
-                                    "Content-Type": "application/json",
-                                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+            if str(token) == str(user_token):
+                if User.objects.filter(email=email).exists():
+                    user = User.objects.get(email=email)
+                    # Send event to Jitsu for tracking
+                    if settings.ANALYTICS_BASE_API:
+                        _ = requests.post(
+                            settings.ANALYTICS_BASE_API,
+                            headers={
+                                "Content-Type": "application/json",
+                                "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                            },
+                            json={
+                                "event_id": uuid.uuid4().hex,
+                                "event_data": {
+                                    "medium": "code",
                                 },
-                                json={
-                                    "event_id": uuid.uuid4().hex,
-                                    "event_data": {
-                                        "medium": "code",
-                                    },
-                                    "user": {"email": email, "id": str(user.id)},
-                                    "device_ctx": {
-                                        "ip": request.META.get("REMOTE_ADDR"),
-                                        "user_agent": request.META.get(
-                                            "HTTP_USER_AGENT"
-                                        ),
-                                    },
-                                    "event_type": "SIGN_IN",
+                                "user": {"email": email, "id": str(user.id)},
+                                "device_ctx": {
+                                    "ip": request.META.get("REMOTE_ADDR"),
+                                    "user_agent": request.META.get("HTTP_USER_AGENT"),
                                 },
-                            )
-                    else:
-                        user = User.objects.create(
-                            email=email,
-                            username=uuid.uuid4().hex,
-                            password=make_password(uuid.uuid4().hex),
-                            is_password_autoset=True,
+                                "event_type": "SIGN_IN",
+                            },
                         )
-                        # Send event to Jitsu for tracking
-                        if settings.ANALYTICS_BASE_API:
-                            _ = requests.post(
-                                settings.ANALYTICS_BASE_API,
-                                headers={
-                                    "Content-Type": "application/json",
-                                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
-                                },
-                                json={
-                                    "event_id": uuid.uuid4().hex,
-                                    "event_data": {
-                                        "medium": "code",
-                                    },
-                                    "user": {"email": email, "id": str(user.id)},
-                                    "device_ctx": {
-                                        "ip": request.META.get("REMOTE_ADDR"),
-                                        "user_agent": request.META.get(
-                                            "HTTP_USER_AGENT"
-                                        ),
-                                    },
-                                    "event_type": "SIGN_UP",
-                                },
-                            )
-
-                    user.last_active = timezone.now()
-                    user.last_login_time = timezone.now()
-                    user.last_login_ip = request.META.get("REMOTE_ADDR")
-                    user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
-                    user.token_updated_at = timezone.now()
-                    user.save()
-                    serialized_user = UserSerializer(user).data
-
-                    access_token, refresh_token = get_tokens_for_user(user)
-                    data = {
-                        "access_token": access_token,
-                        "refresh_token": refresh_token,
-                        "user": serialized_user,
-                    }
-
-                    return Response(data, status=status.HTTP_200_OK)
-
                 else:
-                    return Response(
-                        {"error": "Your login code was incorrect. Please try again."},
-                        status=status.HTTP_400_BAD_REQUEST,
+                    user = User.objects.create(
+                        email=email,
+                        username=uuid.uuid4().hex,
+                        password=make_password(uuid.uuid4().hex),
+                        is_password_autoset=True,
                     )
+                    # Send event to Jitsu for tracking
+                    if settings.ANALYTICS_BASE_API:
+                        _ = requests.post(
+                            settings.ANALYTICS_BASE_API,
+                            headers={
+                                "Content-Type": "application/json",
+                                "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                            },
+                            json={
+                                "event_id": uuid.uuid4().hex,
+                                "event_data": {
+                                    "medium": "code",
+                                },
+                                "user": {"email": email, "id": str(user.id)},
+                                "device_ctx": {
+                                    "ip": request.META.get("REMOTE_ADDR"),
+                                    "user_agent": request.META.get("HTTP_USER_AGENT"),
+                                },
+                                "event_type": "SIGN_UP",
+                            },
+                        )
+
+                user.last_active = timezone.now()
+                user.last_login_time = timezone.now()
+                user.last_login_ip = request.META.get("REMOTE_ADDR")
+                user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
+                user.token_updated_at = timezone.now()
+                user.save()
+
+                access_token, refresh_token = get_tokens_for_user(user)
+                data = {
+                    "access_token": access_token,
+                    "refresh_token": refresh_token,
+                }
+
+                return Response(data, status=status.HTTP_200_OK)
 
             else:
                 return Response(
-                    {"error": "The magic code/link has expired please try again"},
+                    {"error": "Your login code was incorrect. Please try again."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        except Exception as e:
-            capture_exception(e)
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "The magic code/link has expired please try again"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
diff --git a/apiserver/plane/api/views/base.py b/apiserver/plane/api/views/base.py
index 60b0ec0c6..7ab660e81 100644
--- a/apiserver/plane/api/views/base.py
+++ b/apiserver/plane/api/views/base.py
@@ -5,10 +5,14 @@ import zoneinfo
 from django.urls import resolve
 from django.conf import settings
 from django.utils import timezone
-# Third part imports
+from django.db import IntegrityError
+from django.core.exceptions import ObjectDoesNotExist, ValidationError
 
+# Third part imports
+from rest_framework import status
 from rest_framework import status
 from rest_framework.viewsets import ModelViewSet
+from rest_framework.response import Response
 from rest_framework.exceptions import APIException
 from rest_framework.views import APIView
 from rest_framework.filters import SearchFilter
@@ -33,8 +37,6 @@ class TimezoneMixin:
             timezone.deactivate()
 
 
-
-
 class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
 
     model = None
@@ -58,17 +60,50 @@ class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
         except Exception as e:
             capture_exception(e)
             raise APIException("Please check the view", status.HTTP_400_BAD_REQUEST)
+        
+    def handle_exception(self, exc):
+        """
+        Handle any exception that occurs, by returning an appropriate response,
+        or re-raising the error.
+        """
+        try:
+            response = super().handle_exception(exc)
+            return response
+        except Exception as e:
+            if isinstance(e, IntegrityError):
+                return Response({"error": "The payload is not valid"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ValidationError):
+                return Response({"error": "Please provide valid detail"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ObjectDoesNotExist):
+                model_name = str(exc).split(" matching query does not exist.")[0]
+                return Response({"error": f"{model_name} does not exist."}, status=status.HTTP_404_NOT_FOUND)
+            
+            if isinstance(e, KeyError):
+                capture_exception(e)
+                return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            print(e) if settings.DEBUG else print("Server Error")
+            capture_exception(e)
+            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
 
     def dispatch(self, request, *args, **kwargs):
-        response = super().dispatch(request, *args, **kwargs)
+        try:
+            response = super().dispatch(request, *args, **kwargs)
 
-        if settings.DEBUG:
-            from django.db import connection
+            if settings.DEBUG:
+                from django.db import connection
 
-            print(
-                f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
-            )
-        return response
+                print(
+                    f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
+                )
+            return response
+
+        except Exception as exc:
+            response = self.handle_exception(exc)
+            return exc
 
     @property
     def workspace_slug(self):
@@ -104,16 +139,49 @@ class BaseAPIView(TimezoneMixin, APIView, BasePaginator):
             queryset = backend().filter_queryset(self.request, queryset, self)
         return queryset
 
+
+    def handle_exception(self, exc):
+        """
+        Handle any exception that occurs, by returning an appropriate response,
+        or re-raising the error.
+        """
+        try:
+            response = super().handle_exception(exc)
+            return response
+        except Exception as e:
+            if isinstance(e, IntegrityError):
+                return Response({"error": "The payload is not valid"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ValidationError):
+                return Response({"error": "Please provide valid detail"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ObjectDoesNotExist):
+                model_name = str(exc).split(" matching query does not exist.")[0]
+                return Response({"error": f"{model_name} does not exist."}, status=status.HTTP_404_NOT_FOUND)
+            
+            if isinstance(e, KeyError):
+                return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            print(e) if settings.DEBUG else print("Server Error")
+            capture_exception(e)
+            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
+
     def dispatch(self, request, *args, **kwargs):
-        response = super().dispatch(request, *args, **kwargs)
+        try:
+            response = super().dispatch(request, *args, **kwargs)
 
-        if settings.DEBUG:
-            from django.db import connection
+            if settings.DEBUG:
+                from django.db import connection
 
-            print(
-                f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
-            )
-        return response
+                print(
+                    f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
+                )
+            return response
+
+        except Exception as exc:
+            response = self.handle_exception(exc)
+            return exc
 
     @property
     def workspace_slug(self):
diff --git a/apiserver/plane/api/views/config.py b/apiserver/plane/api/views/config.py
index ea1b39d9c..d035c4740 100644
--- a/apiserver/plane/api/views/config.py
+++ b/apiserver/plane/api/views/config.py
@@ -20,21 +20,18 @@ class ConfigurationEndpoint(BaseAPIView):
     ]
 
     def get(self, request):
-        try:
-            data = {}
-            data["google"] = os.environ.get("GOOGLE_CLIENT_ID", None)
-            data["github"] = os.environ.get("GITHUB_CLIENT_ID", None)
-            data["github_app_name"] = os.environ.get("GITHUB_APP_NAME", None)
-            data["magic_login"] = (
-                bool(settings.EMAIL_HOST_USER) and bool(settings.EMAIL_HOST_PASSWORD)
-            ) and os.environ.get("ENABLE_MAGIC_LINK_LOGIN", "0") == "1"
-            data["email_password_login"] = (
-                os.environ.get("ENABLE_EMAIL_PASSWORD", "0") == "1"
-            )
-            return Response(data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        data = {}
+        data["google_client_id"] = os.environ.get("GOOGLE_CLIENT_ID", None)
+        data["github_client_id"] = os.environ.get("GITHUB_CLIENT_ID", None)
+        data["github_app_name"] = os.environ.get("GITHUB_APP_NAME", None)
+        data["magic_login"] = (
+            bool(settings.EMAIL_HOST_USER) and bool(settings.EMAIL_HOST_PASSWORD)
+        ) and os.environ.get("ENABLE_MAGIC_LINK_LOGIN", "0") == "1"
+        data["email_password_login"] = (
+            os.environ.get("ENABLE_EMAIL_PASSWORD", "0") == "1"
+        )
+        data["slack_client_id"] = os.environ.get("SLACK_CLIENT_ID", None)
+        data["posthog_api_key"] = os.environ.get("POSTHOG_API_KEY", None)
+        data["posthog_host"] = os.environ.get("POSTHOG_HOST", None)
+        data["has_unsplash_configured"] = bool(settings.UNSPLASH_ACCESS_KEY)
+        return Response(data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index e84b6dd0a..21defcc13 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -2,9 +2,7 @@
 import json
 
 # Django imports
-from django.db import IntegrityError
 from django.db.models import (
-    OuterRef,
     Func,
     F,
     Q,
@@ -62,29 +60,6 @@ class CycleViewSet(BaseViewSet):
             project_id=self.kwargs.get("project_id"), owned_by=self.request.user
         )
 
-    def perform_destroy(self, instance):
-        cycle_issues = list(
-            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
-        issue_activity.delay(
-            type="cycle.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "cycle_id": str(self.kwargs.get("pk")),
-                    "issues": [str(issue_id) for issue_id in cycle_issues],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
-        )
-
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         subquery = CycleFavorite.objects.filter(
             user=self.request.user,
@@ -199,349 +174,329 @@ class CycleViewSet(BaseViewSet):
         )
 
     def list(self, request, slug, project_id):
-        try:
-            queryset = self.get_queryset()
-            cycle_view = request.GET.get("cycle_view", "all")
-            order_by = request.GET.get("order_by", "sort_order")
+        queryset = self.get_queryset()
+        cycle_view = request.GET.get("cycle_view", "all")
 
-            queryset = queryset.order_by(order_by)
+        queryset = queryset.order_by("-is_favorite","-created_at")
 
-            # All Cycles
-            if cycle_view == "all":
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
+        # Current Cycle
+        if cycle_view == "current":
+            queryset = queryset.filter(
+                start_date__lte=timezone.now(),
+                end_date__gte=timezone.now(),
+            )
 
-            # Current Cycle
-            if cycle_view == "current":
-                queryset = queryset.filter(
-                    start_date__lte=timezone.now(),
-                    end_date__gte=timezone.now(),
-                )
+            data = CycleSerializer(queryset, many=True).data
 
-                data = CycleSerializer(queryset, many=True).data
-
-                if len(data):
-                    assignee_distribution = (
-                        Issue.objects.filter(
-                            issue_cycle__cycle_id=data[0]["id"],
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
-                        .annotate(display_name=F("assignees__display_name"))
-                        .annotate(assignee_id=F("assignees__id"))
-                        .annotate(avatar=F("assignees__avatar"))
-                        .values("display_name", "assignee_id", "avatar")
-                        .annotate(
-                            total_issues=Count(
-                                "assignee_id",
-                                filter=Q(archived_at__isnull=True, is_draft=False),
+            if len(data):
+                assignee_distribution = (
+                    Issue.objects.filter(
+                        issue_cycle__cycle_id=data[0]["id"],
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+                    .annotate(display_name=F("assignees__display_name"))
+                    .annotate(assignee_id=F("assignees__id"))
+                    .annotate(avatar=F("assignees__avatar"))
+                    .values("display_name", "assignee_id", "avatar")
+                    .annotate(
+                        total_issues=Count(
+                            "assignee_id",
+                            filter=Q(archived_at__isnull=True, is_draft=False),
+                        ),
+                    )
+                    .annotate(
+                        completed_issues=Count(
+                            "assignee_id",
+                            filter=Q(
+                                completed_at__isnull=False,
+                                archived_at__isnull=True,
+                                is_draft=False,
                             ),
                         )
-                        .annotate(
-                            completed_issues=Count(
-                                "assignee_id",
-                                filter=Q(
-                                    completed_at__isnull=False,
-                                    archived_at__isnull=True,
-                                    is_draft=False,
-                                ),
-                            )
+                    )
+                    .annotate(
+                        pending_issues=Count(
+                            "assignee_id",
+                            filter=Q(
+                                completed_at__isnull=True,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
                         )
-                        .annotate(
-                            pending_issues=Count(
-                                "assignee_id",
-                                filter=Q(
-                                    completed_at__isnull=True,
-                                    archived_at__isnull=True,
-                                    is_draft=False,
-                                ),
-                            )
+                    )
+                    .order_by("display_name")
+                )
+
+                label_distribution = (
+                    Issue.objects.filter(
+                        issue_cycle__cycle_id=data[0]["id"],
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+                    .annotate(label_name=F("labels__name"))
+                    .annotate(color=F("labels__color"))
+                    .annotate(label_id=F("labels__id"))
+                    .values("label_name", "color", "label_id")
+                    .annotate(
+                        total_issues=Count(
+                            "label_id",
+                            filter=Q(archived_at__isnull=True, is_draft=False),
                         )
-                        .order_by("display_name")
+                    )
+                    .annotate(
+                        completed_issues=Count(
+                            "label_id",
+                            filter=Q(
+                                completed_at__isnull=False,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
+                        )
+                    )
+                    .annotate(
+                        pending_issues=Count(
+                            "label_id",
+                            filter=Q(
+                                completed_at__isnull=True,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
+                        )
+                    )
+                    .order_by("label_name")
+                )
+                data[0]["distribution"] = {
+                    "assignees": assignee_distribution,
+                    "labels": label_distribution,
+                    "completion_chart": {},
+                }
+                if data[0]["start_date"] and data[0]["end_date"]:
+                    data[0]["distribution"]["completion_chart"] = burndown_plot(
+                        queryset=queryset.first(),
+                        slug=slug,
+                        project_id=project_id,
+                        cycle_id=data[0]["id"],
                     )
 
-                    label_distribution = (
-                        Issue.objects.filter(
-                            issue_cycle__cycle_id=data[0]["id"],
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
-                        .annotate(label_name=F("labels__name"))
-                        .annotate(color=F("labels__color"))
-                        .annotate(label_id=F("labels__id"))
-                        .values("label_name", "color", "label_id")
-                        .annotate(
-                            total_issues=Count(
-                                "label_id",
-                                filter=Q(archived_at__isnull=True, is_draft=False),
-                            )
-                        )
-                        .annotate(
-                            completed_issues=Count(
-                                "label_id",
-                                filter=Q(
-                                    completed_at__isnull=False,
-                                    archived_at__isnull=True,
-                                    is_draft=False,
-                                ),
-                            )
-                        )
-                        .annotate(
-                            pending_issues=Count(
-                                "label_id",
-                                filter=Q(
-                                    completed_at__isnull=True,
-                                    archived_at__isnull=True,
-                                    is_draft=False,
-                                ),
-                            )
-                        )
-                        .order_by("label_name")
-                    )
-                    data[0]["distribution"] = {
-                        "assignees": assignee_distribution,
-                        "labels": label_distribution,
-                        "completion_chart": {},
-                    }
-                    if data[0]["start_date"] and data[0]["end_date"]:
-                        data[0]["distribution"]["completion_chart"] = burndown_plot(
-                            queryset=queryset.first(),
-                            slug=slug,
-                            project_id=project_id,
-                            cycle_id=data[0]["id"],
-                        )
-
-                return Response(data, status=status.HTTP_200_OK)
-
-            # Upcoming Cycles
-            if cycle_view == "upcoming":
-                queryset = queryset.filter(start_date__gt=timezone.now())
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
-
-            # Completed Cycles
-            if cycle_view == "completed":
-                queryset = queryset.filter(end_date__lt=timezone.now())
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
-
-            # Draft Cycles
-            if cycle_view == "draft":
-                queryset = queryset.filter(
-                    end_date=None,
-                    start_date=None,
-                )
-
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
-
-            # Incomplete Cycles
-            if cycle_view == "incomplete":
-                queryset = queryset.filter(
-                    Q(end_date__gte=timezone.now().date()) | Q(end_date__isnull=True),
-                )
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
+            return Response(data, status=status.HTTP_200_OK)
 
+        # Upcoming Cycles
+        if cycle_view == "upcoming":
+            queryset = queryset.filter(start_date__gt=timezone.now())
             return Response(
-                {"error": "No matching view found"}, status=status.HTTP_400_BAD_REQUEST
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
             )
 
-        except Exception as e:
-            capture_exception(e)
+        # Completed Cycles
+        if cycle_view == "completed":
+            queryset = queryset.filter(end_date__lt=timezone.now())
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
             )
 
+        # Draft Cycles
+        if cycle_view == "draft":
+            queryset = queryset.filter(
+                end_date=None,
+                start_date=None,
+            )
+
+            return Response(
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+            )
+
+        # Incomplete Cycles
+        if cycle_view == "incomplete":
+            queryset = queryset.filter(
+                Q(end_date__gte=timezone.now().date()) | Q(end_date__isnull=True),
+            )
+            return Response(
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+            )
+
+        # If no matching view is found return all cycles
+        return Response(
+            CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+        )
+
     def create(self, request, slug, project_id):
-        try:
-            if (
-                request.data.get("start_date", None) is None
-                and request.data.get("end_date", None) is None
-            ) or (
-                request.data.get("start_date", None) is not None
-                and request.data.get("end_date", None) is not None
-            ):
-                serializer = CycleSerializer(data=request.data)
-                if serializer.is_valid():
-                    serializer.save(
-                        project_id=project_id,
-                        owned_by=request.user,
-                    )
-                    return Response(serializer.data, status=status.HTTP_201_CREATED)
-                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-            else:
-                return Response(
-                    {
-                        "error": "Both start date and end date are either required or are to be null"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
+        if (
+            request.data.get("start_date", None) is None
+            and request.data.get("end_date", None) is None
+        ) or (
+            request.data.get("start_date", None) is not None
+            and request.data.get("end_date", None) is not None
+        ):
+            serializer = CycleSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(
+                    project_id=project_id,
+                    owned_by=request.user,
                 )
-        except Exception as e:
-            capture_exception(e)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "Both start date and end date are either required or are to be null"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
     def partial_update(self, request, slug, project_id, pk):
-        try:
-            cycle = Cycle.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
+        cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
-            request_data = request.data
+        request_data = request.data
 
-            if cycle.end_date is not None and cycle.end_date < timezone.now().date():
-                if "sort_order" in request_data:
-                    # Can only change sort order
-                    request_data = {
-                        "sort_order": request_data.get("sort_order", cycle.sort_order)
-                    }
-                else:
-                    return Response(
-                        {
-                            "error": "The Cycle has already been completed so it cannot be edited"
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
+        if cycle.end_date is not None and cycle.end_date < timezone.now().date():
+            if "sort_order" in request_data:
+                # Can only change sort order
+                request_data = {
+                    "sort_order": request_data.get("sort_order", cycle.sort_order)
+                }
+            else:
+                return Response(
+                    {
+                        "error": "The Cycle has already been completed so it cannot be edited"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
 
-            serializer = CycleWriteSerializer(cycle, data=request.data, partial=True)
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Cycle.DoesNotExist:
-            return Response(
-                {"error": "Cycle does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = CycleWriteSerializer(cycle, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, pk):
-        try:
-            queryset = self.get_queryset().get(pk=pk)
+        queryset = self.get_queryset().get(pk=pk)
 
-            # Assignee Distribution
-            assignee_distribution = (
-                Issue.objects.filter(
-                    issue_cycle__cycle_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(first_name=F("assignees__first_name"))
-                .annotate(last_name=F("assignees__last_name"))
-                .annotate(assignee_id=F("assignees__id"))
-                .annotate(avatar=F("assignees__avatar"))
-                .annotate(display_name=F("assignees__display_name"))
-                .values(
-                    "first_name", "last_name", "assignee_id", "avatar", "display_name"
-                )
-                .annotate(
-                    total_issues=Count(
-                        "assignee_id",
-                        filter=Q(archived_at__isnull=True, is_draft=False),
+        # Assignee Distribution
+        assignee_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(first_name=F("assignees__first_name"))
+            .annotate(last_name=F("assignees__last_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(avatar=F("assignees__avatar"))
+            .annotate(display_name=F("assignees__display_name"))
+            .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
+            .annotate(
+                total_issues=Count(
+                    "assignee_id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
                     ),
                 )
-                .annotate(
-                    completed_issues=Count(
-                        "assignee_id",
-                        filter=Q(
-                            completed_at__isnull=False,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .annotate(
-                    pending_issues=Count(
-                        "assignee_id",
-                        filter=Q(
-                            completed_at__isnull=True,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .order_by("first_name", "last_name")
             )
-
-            # Label Distribution
-            label_distribution = (
-                Issue.objects.filter(
-                    issue_cycle__cycle_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(label_name=F("labels__name"))
-                .annotate(color=F("labels__color"))
-                .annotate(label_id=F("labels__id"))
-                .values("label_name", "color", "label_id")
-                .annotate(
-                    total_issues=Count(
-                        "label_id",
-                        filter=Q(archived_at__isnull=True, is_draft=False),
+            .annotate(
+                pending_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
                     ),
                 )
-                .annotate(
-                    completed_issues=Count(
-                        "label_id",
-                        filter=Q(
-                            completed_at__isnull=False,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
+            )
+            .order_by("first_name", "last_name")
+        )
+
+        # Label Distribution
+        label_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(label_name=F("labels__name"))
+            .annotate(color=F("labels__color"))
+            .annotate(label_id=F("labels__id"))
+            .values("label_name", "color", "label_id")
+            .annotate(
+                total_issues=Count(
+                    "label_id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .annotate(
-                    pending_issues=Count(
-                        "label_id",
-                        filter=Q(
-                            completed_at__isnull=True,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .order_by("label_name")
+            )
+            .order_by("label_name")
+        )
+
+        data = CycleSerializer(queryset).data
+        data["distribution"] = {
+            "assignees": assignee_distribution,
+            "labels": label_distribution,
+            "completion_chart": {},
+        }
+
+        if queryset.start_date and queryset.end_date:
+            data["distribution"]["completion_chart"] = burndown_plot(
+                queryset=queryset, slug=slug, project_id=project_id, cycle_id=pk
             )
 
-            data = CycleSerializer(queryset).data
-            data["distribution"] = {
-                "assignees": assignee_distribution,
-                "labels": label_distribution,
-                "completion_chart": {},
-            }
+        return Response(
+            data,
+            status=status.HTTP_200_OK,
+        )
 
-            if queryset.start_date and queryset.end_date:
-                data["distribution"]["completion_chart"] = burndown_plot(
-                    queryset=queryset, slug=slug, project_id=project_id, cycle_id=pk
-                )
+    def destroy(self, request, slug, project_id, pk):
+        cycle_issues = list(
+            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
+                "issue", flat=True
+            )
+        )
+        cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
-            return Response(
-                data,
-                status=status.HTTP_200_OK,
-            )
-        except Cycle.DoesNotExist:
-            return Response(
-                {"error": "Cycle Does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_activity.delay(
+            type="cycle.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "cycle_id": str(pk),
+                    "cycle_name": str(cycle.name),
+                    "issues": [str(issue_id) for issue_id in cycle_issues],
+                }
+            ),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        # Delete the cycle
+        cycle.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CycleIssueViewSet(BaseViewSet):
@@ -557,29 +512,6 @@ class CycleIssueViewSet(BaseViewSet):
         "issue__assignees__id",
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            cycle_id=self.kwargs.get("cycle_id"),
-        )
-
-    def perform_destroy(self, instance):
-        issue_activity.delay(
-            type="cycle.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "cycle_id": str(self.kwargs.get("cycle_id")),
-                    "issues": [str(instance.issue_id)],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
-        )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -604,174 +536,175 @@ class CycleIssueViewSet(BaseViewSet):
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id, cycle_id):
-        try:
-            order_by = request.GET.get("order_by", "created_at")
-            group_by = request.GET.get("group_by", False)
-            sub_group_by = request.GET.get("sub_group_by", False)
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id)
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(bridge_id=F("issue_cycle__id"))
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .order_by(order_by)
-                .filter(**filters)
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        order_by = request.GET.get("order_by", "created_at")
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id)
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-
-            issues_data = IssueStateSerializer(issues, many=True).data
-
-            if sub_group_by and sub_group_by == group_by:
-                return Response(
-                    {"error": "Group by and sub group by cannot be same"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if group_by:
-                return Response(
-                    group_results(issues_data, group_by, sub_group_by),
-                    status=status.HTTP_200_OK,
-                )
-
-            return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
+            .annotate(bridge_id=F("issue_cycle__id"))
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(order_by)
+            .filter(**filters)
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-        except Exception as e:
-            capture_exception(e)
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
+
+        issues_data = IssueStateSerializer(issues, many=True).data
+
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Group by and sub group by cannot be same"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if group_by:
+            grouped_results = group_results(issues_data, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(
+            issues_data, status=status.HTTP_200_OK
+        )
+
     def create(self, request, slug, project_id, cycle_id):
-        try:
-            issues = request.data.get("issues", [])
+        issues = request.data.get("issues", [])
 
-            if not len(issues):
-                return Response(
-                    {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            cycle = Cycle.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=cycle_id
-            )
-
-            if cycle.end_date is not None and cycle.end_date < timezone.now().date():
-                return Response(
-                    {
-                        "error": "The Cycle has already been completed so no new issues can be added"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Get all CycleIssues already created
-            cycle_issues = list(CycleIssue.objects.filter(issue_id__in=issues))
-            update_cycle_issue_activity = []
-            record_to_create = []
-            records_to_update = []
-
-            for issue in issues:
-                cycle_issue = [
-                    cycle_issue
-                    for cycle_issue in cycle_issues
-                    if str(cycle_issue.issue_id) in issues
-                ]
-                # Update only when cycle changes
-                if len(cycle_issue):
-                    if cycle_issue[0].cycle_id != cycle_id:
-                        update_cycle_issue_activity.append(
-                            {
-                                "old_cycle_id": str(cycle_issue[0].cycle_id),
-                                "new_cycle_id": str(cycle_id),
-                                "issue_id": str(cycle_issue[0].issue_id),
-                            }
-                        )
-                        cycle_issue[0].cycle_id = cycle_id
-                        records_to_update.append(cycle_issue[0])
-                else:
-                    record_to_create.append(
-                        CycleIssue(
-                            project_id=project_id,
-                            workspace=cycle.workspace,
-                            created_by=request.user,
-                            updated_by=request.user,
-                            cycle=cycle,
-                            issue_id=issue,
-                        )
-                    )
-
-            CycleIssue.objects.bulk_create(
-                record_to_create,
-                batch_size=10,
-                ignore_conflicts=True,
-            )
-            CycleIssue.objects.bulk_update(
-                records_to_update,
-                ["cycle"],
-                batch_size=10,
-            )
-
-            # Capture Issue Activity
-            issue_activity.delay(
-                type="cycle.activity.created",
-                requested_data=json.dumps({"cycles_list": issues}),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "updated_cycle_issues": update_cycle_issue_activity,
-                        "created_cycle_issues": serializers.serialize(
-                            "json", record_to_create
-                        ),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-
-            # Return all Cycle Issues
+        if not len(issues):
             return Response(
-                CycleIssueSerializer(self.get_queryset(), many=True).data,
-                status=status.HTTP_200_OK,
+                {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        except Cycle.DoesNotExist:
+        cycle = Cycle.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=cycle_id
+        )
+
+        if cycle.end_date is not None and cycle.end_date < timezone.now().date():
             return Response(
-                {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "The Cycle has already been completed so no new issues can be added"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Get all CycleIssues already created
+        cycle_issues = list(CycleIssue.objects.filter(issue_id__in=issues))
+        update_cycle_issue_activity = []
+        record_to_create = []
+        records_to_update = []
+
+        for issue in issues:
+            cycle_issue = [
+                cycle_issue
+                for cycle_issue in cycle_issues
+                if str(cycle_issue.issue_id) in issues
+            ]
+            # Update only when cycle changes
+            if len(cycle_issue):
+                if cycle_issue[0].cycle_id != cycle_id:
+                    update_cycle_issue_activity.append(
+                        {
+                            "old_cycle_id": str(cycle_issue[0].cycle_id),
+                            "new_cycle_id": str(cycle_id),
+                            "issue_id": str(cycle_issue[0].issue_id),
+                        }
+                    )
+                    cycle_issue[0].cycle_id = cycle_id
+                    records_to_update.append(cycle_issue[0])
+            else:
+                record_to_create.append(
+                    CycleIssue(
+                        project_id=project_id,
+                        workspace=cycle.workspace,
+                        created_by=request.user,
+                        updated_by=request.user,
+                        cycle=cycle,
+                        issue_id=issue,
+                    )
+                )
+
+        CycleIssue.objects.bulk_create(
+            record_to_create,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+        CycleIssue.objects.bulk_update(
+            records_to_update,
+            ["cycle"],
+            batch_size=10,
+        )
+
+        # Capture Issue Activity
+        issue_activity.delay(
+            type="cycle.activity.created",
+            requested_data=json.dumps({"cycles_list": issues}),
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "updated_cycle_issues": update_cycle_issue_activity,
+                    "created_cycle_issues": serializers.serialize(
+                        "json", record_to_create
+                    ),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+
+        # Return all Cycle Issues
+        return Response(
+            CycleIssueSerializer(self.get_queryset(), many=True).data,
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, project_id, cycle_id, pk):
+        cycle_issue = CycleIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, cycle_id=cycle_id
+        )
+        issue_id = cycle_issue.issue_id
+        cycle_issue.delete()
+        issue_activity.delay(
+            type="cycle.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "cycle_id": str(self.kwargs.get("cycle_id")),
+                    "issues": [str(issue_id)],
+                }
+            ),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("pk", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class CycleDateCheckEndpoint(BaseAPIView):
     permission_classes = [
@@ -779,42 +712,35 @@ class CycleDateCheckEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            start_date = request.data.get("start_date", False)
-            end_date = request.data.get("end_date", False)
-            cycle_id = request.data.get("cycle_id")
-            if not start_date or not end_date:
-                return Response(
-                    {"error": "Start date and end date both are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            cycles = Cycle.objects.filter(
-                Q(workspace__slug=slug)
-                & Q(project_id=project_id)
-                & (
-                    Q(start_date__lte=start_date, end_date__gte=start_date)
-                    | Q(start_date__lte=end_date, end_date__gte=end_date)
-                    | Q(start_date__gte=start_date, end_date__lte=end_date)
-                )
-            ).exclude(pk=cycle_id)
-
-            if cycles.exists():
-                return Response(
-                    {
-                        "error": "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
-                        "status": False,
-                    }
-                )
-            else:
-                return Response({"status": True}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        start_date = request.data.get("start_date", False)
+        end_date = request.data.get("end_date", False)
+        cycle_id = request.data.get("cycle_id")
+        if not start_date or not end_date:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Start date and end date both are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        cycles = Cycle.objects.filter(
+            Q(workspace__slug=slug)
+            & Q(project_id=project_id)
+            & (
+                Q(start_date__lte=start_date, end_date__gte=start_date)
+                | Q(start_date__lte=end_date, end_date__gte=end_date)
+                | Q(start_date__gte=start_date, end_date__lte=end_date)
+            )
+        ).exclude(pk=cycle_id)
+
+        if cycles.exists():
+            return Response(
+                {
+                    "error": "You have a cycle already on the given dates, if you want to create a draft cycle you can do that by removing dates",
+                    "status": False,
+                }
+            )
+        else:
+            return Response({"status": True}, status=status.HTTP_200_OK)
+
 
 class CycleFavoriteViewSet(BaseViewSet):
     serializer_class = CycleFavoriteSerializer
@@ -830,52 +756,21 @@ class CycleFavoriteViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = CycleFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The cycle is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = CycleFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, cycle_id):
-        try:
-            cycle_favorite = CycleFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                cycle_id=cycle_id,
-            )
-            cycle_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except CycleFavorite.DoesNotExist:
-            return Response(
-                {"error": "Cycle is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        cycle_favorite = CycleFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            cycle_id=cycle_id,
+        )
+        cycle_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class TransferCycleIssueEndpoint(BaseAPIView):
@@ -884,55 +779,43 @@ class TransferCycleIssueEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id, cycle_id):
-        try:
-            new_cycle_id = request.data.get("new_cycle_id", False)
+        new_cycle_id = request.data.get("new_cycle_id", False)
 
-            if not new_cycle_id:
-                return Response(
-                    {"error": "New Cycle Id is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            new_cycle = Cycle.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=new_cycle_id
-            )
-
-            if (
-                new_cycle.end_date is not None
-                and new_cycle.end_date < timezone.now().date()
-            ):
-                return Response(
-                    {
-                        "error": "The cycle where the issues are transferred is already completed"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            cycle_issues = CycleIssue.objects.filter(
-                cycle_id=cycle_id,
-                project_id=project_id,
-                workspace__slug=slug,
-                issue__state__group__in=["backlog", "unstarted", "started"],
-            )
-
-            updated_cycles = []
-            for cycle_issue in cycle_issues:
-                cycle_issue.cycle_id = new_cycle_id
-                updated_cycles.append(cycle_issue)
-
-            cycle_issues = CycleIssue.objects.bulk_update(
-                updated_cycles, ["cycle_id"], batch_size=100
-            )
-
-            return Response({"message": "Success"}, status=status.HTTP_200_OK)
-        except Cycle.DoesNotExist:
+        if not new_cycle_id:
             return Response(
-                {"error": "New Cycle Does not exist"},
+                {"error": "New Cycle Id is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        new_cycle = Cycle.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=new_cycle_id
+        )
+
+        if (
+            new_cycle.end_date is not None
+            and new_cycle.end_date < timezone.now().date()
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "The cycle where the issues are transferred is already completed"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+        cycle_issues = CycleIssue.objects.filter(
+            cycle_id=cycle_id,
+            project_id=project_id,
+            workspace__slug=slug,
+            issue__state__group__in=["backlog", "unstarted", "started"],
+        )
+
+        updated_cycles = []
+        for cycle_issue in cycle_issues:
+            cycle_issue.cycle_id = new_cycle_id
+            updated_cycles.append(cycle_issue)
+
+        cycle_issues = CycleIssue.objects.bulk_update(
+            updated_cycles, ["cycle_id"], batch_size=100
+        )
+
+        return Response({"message": "Success"}, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/estimate.py b/apiserver/plane/api/views/estimate.py
index 68de54d7a..3c2cca4d5 100644
--- a/apiserver/plane/api/views/estimate.py
+++ b/apiserver/plane/api/views/estimate.py
@@ -1,6 +1,3 @@
-# Django imports
-from django.db import IntegrityError
-
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
@@ -23,7 +20,6 @@ class ProjectEstimatePointEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id):
-        try:
             project = Project.objects.get(workspace__slug=slug, pk=project_id)
             if project.estimate_id is not None:
                 estimate_points = EstimatePoint.objects.filter(
@@ -34,12 +30,6 @@ class ProjectEstimatePointEndpoint(BaseAPIView):
                 serializer = EstimatePointSerializer(estimate_points, many=True)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response([], status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
 
 class BulkEstimatePointEndpoint(BaseViewSet):
@@ -50,204 +40,139 @@ class BulkEstimatePointEndpoint(BaseViewSet):
     serializer_class = EstimateSerializer
 
     def list(self, request, slug, project_id):
-        try:
-            estimates = Estimate.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).prefetch_related("points").select_related("workspace", "project")
-            serializer = EstimateReadSerializer(estimates, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        estimates = Estimate.objects.filter(
+            workspace__slug=slug, project_id=project_id
+        ).prefetch_related("points").select_related("workspace", "project")
+        serializer = EstimateReadSerializer(estimates, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):
-        try:
-            if not request.data.get("estimate", False):
-                return Response(
-                    {"error": "Estimate is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_points = request.data.get("estimate_points", [])
-
-            if not len(estimate_points) or len(estimate_points) > 8:
-                return Response(
-                    {"error": "Estimate points are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_serializer = EstimateSerializer(data=request.data.get("estimate"))
-            if not estimate_serializer.is_valid():
-                return Response(
-                    estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
-                )
-            try:
-                estimate = estimate_serializer.save(project_id=project_id)
-            except IntegrityError:
-                return Response(
-                    {"errror": "Estimate with the name already exists"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            estimate_points = EstimatePoint.objects.bulk_create(
-                [
-                    EstimatePoint(
-                        estimate=estimate,
-                        key=estimate_point.get("key", 0),
-                        value=estimate_point.get("value", ""),
-                        description=estimate_point.get("description", ""),
-                        project_id=project_id,
-                        workspace_id=estimate.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for estimate_point in estimate_points
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
-            )
-
-            estimate_point_serializer = EstimatePointSerializer(
-                estimate_points, many=True
-            )
-
+        if not request.data.get("estimate", False):
             return Response(
-                {
-                    "estimate": estimate_serializer.data,
-                    "estimate_points": estimate_point_serializer.data,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Estimate.DoesNotExist:
-            return Response(
-                {"error": "Estimate does not exist"},
+                {"error": "Estimate is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        estimate_points = request.data.get("estimate_points", [])
+
+        if not len(estimate_points) or len(estimate_points) > 8:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Estimate points are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        estimate_serializer = EstimateSerializer(data=request.data.get("estimate"))
+        if not estimate_serializer.is_valid():
+            return Response(
+                estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
+            )
+        estimate = estimate_serializer.save(project_id=project_id)
+        estimate_points = EstimatePoint.objects.bulk_create(
+            [
+                EstimatePoint(
+                    estimate=estimate,
+                    key=estimate_point.get("key", 0),
+                    value=estimate_point.get("value", ""),
+                    description=estimate_point.get("description", ""),
+                    project_id=project_id,
+                    workspace_id=estimate.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for estimate_point in estimate_points
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        estimate_point_serializer = EstimatePointSerializer(
+            estimate_points, many=True
+        )
+
+        return Response(
+            {
+                "estimate": estimate_serializer.data,
+                "estimate_points": estimate_point_serializer.data,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     def retrieve(self, request, slug, project_id, estimate_id):
-        try:
-            estimate = Estimate.objects.get(
-                pk=estimate_id, workspace__slug=slug, project_id=project_id
-            )
-            serializer = EstimateReadSerializer(estimate)
-            return Response(
-                serializer.data,
-                status=status.HTTP_200_OK,
-            )
-        except Estimate.DoesNotExist:
-            return Response(
-                {"error": "Estimate does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        estimate = Estimate.objects.get(
+            pk=estimate_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = EstimateReadSerializer(estimate)
+        return Response(
+            serializer.data,
+            status=status.HTTP_200_OK,
+        )
 
     def partial_update(self, request, slug, project_id, estimate_id):
-        try:
-            if not request.data.get("estimate", False):
-                return Response(
-                    {"error": "Estimate is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if not len(request.data.get("estimate_points", [])):
-                return Response(
-                    {"error": "Estimate points are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate = Estimate.objects.get(pk=estimate_id)
-
-            estimate_serializer = EstimateSerializer(
-                estimate, data=request.data.get("estimate"), partial=True
-            )
-            if not estimate_serializer.is_valid():
-                return Response(
-                    estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
-                )
-            try:
-                estimate = estimate_serializer.save()
-            except IntegrityError:
-                return Response(
-                    {"errror": "Estimate with the name already exists"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_points_data = request.data.get("estimate_points", [])
-
-            estimate_points = EstimatePoint.objects.filter(
-                pk__in=[
-                    estimate_point.get("id") for estimate_point in estimate_points_data
-                ],
-                workspace__slug=slug,
-                project_id=project_id,
-                estimate_id=estimate_id,
-            )
-
-            updated_estimate_points = []
-            for estimate_point in estimate_points:
-                # Find the data for that estimate point
-                estimate_point_data = [
-                    point
-                    for point in estimate_points_data
-                    if point.get("id") == str(estimate_point.id)
-                ]
-                if len(estimate_point_data):
-                    estimate_point.value = estimate_point_data[0].get(
-                        "value", estimate_point.value
-                    )
-                    updated_estimate_points.append(estimate_point)
-
-            try:
-                EstimatePoint.objects.bulk_update(
-                    updated_estimate_points, ["value"], batch_size=10,
-                )
-            except IntegrityError as e:
-                return Response(
-                    {"error": "Values need to be unique for each key"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_point_serializer = EstimatePointSerializer(estimate_points, many=True)
+        if not request.data.get("estimate", False):
             return Response(
-                {
-                    "estimate": estimate_serializer.data,
-                    "estimate_points": estimate_point_serializer.data,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Estimate.DoesNotExist:
-            return Response(
-                {"error": "Estimate does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Estimate is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if not len(request.data.get("estimate_points", [])):
+            return Response(
+                {"error": "Estimate points are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        estimate = Estimate.objects.get(pk=estimate_id)
+
+        estimate_serializer = EstimateSerializer(
+            estimate, data=request.data.get("estimate"), partial=True
+        )
+        if not estimate_serializer.is_valid():
+            return Response(
+                estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
+            )
+
+        estimate = estimate_serializer.save()
+
+        estimate_points_data = request.data.get("estimate_points", [])
+
+        estimate_points = EstimatePoint.objects.filter(
+            pk__in=[
+                estimate_point.get("id") for estimate_point in estimate_points_data
+            ],
+            workspace__slug=slug,
+            project_id=project_id,
+            estimate_id=estimate_id,
+        )
+
+        updated_estimate_points = []
+        for estimate_point in estimate_points:
+            # Find the data for that estimate point
+            estimate_point_data = [
+                point
+                for point in estimate_points_data
+                if point.get("id") == str(estimate_point.id)
+            ]
+            if len(estimate_point_data):
+                estimate_point.value = estimate_point_data[0].get(
+                    "value", estimate_point.value
+                )
+                updated_estimate_points.append(estimate_point)
+
+        EstimatePoint.objects.bulk_update(
+            updated_estimate_points, ["value"], batch_size=10,
+        )
+
+        estimate_point_serializer = EstimatePointSerializer(estimate_points, many=True)
+        return Response(
+            {
+                "estimate": estimate_serializer.data,
+                "estimate_points": estimate_point_serializer.data,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     def destroy(self, request, slug, project_id, estimate_id):
-        try:
-            estimate = Estimate.objects.get(
-                pk=estimate_id, workspace__slug=slug, project_id=project_id
-            )
-            estimate.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        estimate = Estimate.objects.get(
+            pk=estimate_id, workspace__slug=slug, project_id=project_id
+        )
+        estimate.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/exporter.py b/apiserver/plane/api/views/exporter.py
index 7e14aa82f..03da8932f 100644
--- a/apiserver/plane/api/views/exporter.py
+++ b/apiserver/plane/api/views/exporter.py
@@ -20,81 +20,62 @@ class ExportIssuesEndpoint(BaseAPIView):
     serializer_class = ExporterHistorySerializer
 
     def post(self, request, slug):
-        try:
-            # Get the workspace
-            workspace = Workspace.objects.get(slug=slug)
-            
-            provider = request.data.get("provider", False)
-            multiple = request.data.get("multiple", False)
-            project_ids = request.data.get("project", [])
-            
-            if provider in ["csv", "xlsx", "json"]:
-                if not project_ids:
-                    project_ids = Project.objects.filter(
-                        workspace__slug=slug
-                    ).values_list("id", flat=True)
-                    project_ids = [str(project_id) for project_id in project_ids]
+        # Get the workspace
+        workspace = Workspace.objects.get(slug=slug)
+        
+        provider = request.data.get("provider", False)
+        multiple = request.data.get("multiple", False)
+        project_ids = request.data.get("project", [])
+        
+        if provider in ["csv", "xlsx", "json"]:
+            if not project_ids:
+                project_ids = Project.objects.filter(
+                    workspace__slug=slug
+                ).values_list("id", flat=True)
+                project_ids = [str(project_id) for project_id in project_ids]
 
-                exporter = ExporterHistory.objects.create(
-                    workspace=workspace,
-                    project=project_ids,
-                    initiated_by=request.user,
-                    provider=provider,
-                )
-
-                issue_export_task.delay(
-                    provider=exporter.provider,
-                    workspace_id=workspace.id,
-                    project_ids=project_ids,
-                    token_id=exporter.token,
-                    multiple=multiple,
-                    slug=slug,
-                )
-                return Response(
-                    {
-                        "message": f"Once the export is ready you will be able to download it"
-                    },
-                    status=status.HTTP_200_OK,
-                )
-            else:
-                return Response(
-                    {"error": f"Provider '{provider}' not found."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Workspace.DoesNotExist:
-            return Response(
-                {"error": "Workspace does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
+            exporter = ExporterHistory.objects.create(
+                workspace=workspace,
+                project=project_ids,
+                initiated_by=request.user,
+                provider=provider,
+            )
+
+            issue_export_task.delay(
+                provider=exporter.provider,
+                workspace_id=workspace.id,
+                project_ids=project_ids,
+                token_id=exporter.token,
+                multiple=multiple,
+                slug=slug,
             )
-        except Exception as e:
-            capture_exception(e)
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "message": f"Once the export is ready you will be able to download it"
+                },
+                status=status.HTTP_200_OK,
+            )
+        else:
+            return Response(
+                {"error": f"Provider '{provider}' not found."},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
     def get(self, request, slug):
-        try:
-            exporter_history = ExporterHistory.objects.filter(
-                workspace__slug=slug
-            ).select_related("workspace","initiated_by")
+        exporter_history = ExporterHistory.objects.filter(
+            workspace__slug=slug
+        ).select_related("workspace","initiated_by")
 
-            if request.GET.get("per_page", False) and request.GET.get("cursor", False):
-                return self.paginate(
-                    request=request,
-                    queryset=exporter_history,
-                    on_results=lambda exporter_history: ExporterHistorySerializer(
-                        exporter_history, many=True
-                    ).data,
-                )
-            else:
-                return Response(
-                    {"error": "per_page and cursor are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
+        if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+            return self.paginate(
+                request=request,
+                queryset=exporter_history,
+                on_results=lambda exporter_history: ExporterHistorySerializer(
+                    exporter_history, many=True
+                ).data,
+            )
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "per_page and cursor are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
diff --git a/apiserver/plane/api/views/external.py b/apiserver/plane/api/views/external.py
index 00a0270e4..a04495569 100644
--- a/apiserver/plane/api/views/external.py
+++ b/apiserver/plane/api/views/external.py
@@ -25,94 +25,68 @@ class GPTIntegrationEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            if not settings.OPENAI_API_KEY or not settings.GPT_ENGINE:
-                return Response(
-                    {"error": "OpenAI API key and engine is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            prompt = request.data.get("prompt", False)
-            task = request.data.get("task", False)
-
-            if not task:
-                return Response(
-                    {"error": "Task is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            final_text = task + "\n" + prompt
-
-            openai.api_key = settings.OPENAI_API_KEY
-            response = openai.ChatCompletion.create(
-                model=settings.GPT_ENGINE,
-                messages=[{"role": "user", "content": final_text}],
-                temperature=0.7,
-                max_tokens=1024,
-            )
-
-            workspace = Workspace.objects.get(slug=slug)
-            project = Project.objects.get(pk=project_id)
-
-            text = response.choices[0].message.content.strip()
-            text_html = text.replace("\n", "<br/>")
+        if not settings.OPENAI_API_KEY or not settings.GPT_ENGINE:
             return Response(
-                {
-                    "response": text,
-                    "response_html": text_html,
-                    "project_detail": ProjectLiteSerializer(project).data,
-                    "workspace_detail": WorkspaceLiteSerializer(workspace).data,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except (Workspace.DoesNotExist, Project.DoesNotExist) as e:
-            return Response(
-                {"error": "Workspace or Project Does not exist"},
+                {"error": "OpenAI API key and engine is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        prompt = request.data.get("prompt", False)
+        task = request.data.get("task", False)
+
+        if not task:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Task is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
+        final_text = task + "\n" + prompt
+
+        openai.api_key = settings.OPENAI_API_KEY
+        response = openai.ChatCompletion.create(
+            model=settings.GPT_ENGINE,
+            messages=[{"role": "user", "content": final_text}],
+            temperature=0.7,
+            max_tokens=1024,
+        )
+
+        workspace = Workspace.objects.get(slug=slug)
+        project = Project.objects.get(pk=project_id)
+
+        text = response.choices[0].message.content.strip()
+        text_html = text.replace("\n", "<br/>")
+        return Response(
+            {
+                "response": text,
+                "response_html": text_html,
+                "project_detail": ProjectLiteSerializer(project).data,
+                "workspace_detail": WorkspaceLiteSerializer(workspace).data,
+            },
+            status=status.HTTP_200_OK,
+        )
+
 
 class ReleaseNotesEndpoint(BaseAPIView):
     def get(self, request):
-        try:
-            release_notes = get_release_notes()
-            return Response(release_notes, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        release_notes = get_release_notes()
+        return Response(release_notes, status=status.HTTP_200_OK)
 
 
 class UnsplashEndpoint(BaseAPIView):
 
     def get(self, request):
-        try:
-            query = request.GET.get("query", False)
-            page = request.GET.get("page", 1)
-            per_page = request.GET.get("per_page", 20)
+        query = request.GET.get("query", False)
+        page = request.GET.get("page", 1)
+        per_page = request.GET.get("per_page", 20)
 
-            url = (
-                f"https://api.unsplash.com/search/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&query={query}&page=${page}&per_page={per_page}"
-                if query
-                else f"https://api.unsplash.com/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&page={page}&per_page={per_page}"
-            )
+        url = (
+            f"https://api.unsplash.com/search/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&query={query}&page=${page}&per_page={per_page}"
+            if query
+            else f"https://api.unsplash.com/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&page={page}&per_page={per_page}"
+        )
 
-            headers = {
-                "Content-Type": "application/json",
-            }
+        headers = {
+            "Content-Type": "application/json",
+        }
 
-            resp = requests.get(url=url, headers=headers)
-            return Response(resp.json(), status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        resp = requests.get(url=url, headers=headers)
+        return Response(resp.json(), status=resp.status_code)
diff --git a/apiserver/plane/api/views/importer.py b/apiserver/plane/api/views/importer.py
index 18d9a1d69..4060b2bd5 100644
--- a/apiserver/plane/api/views/importer.py
+++ b/apiserver/plane/api/views/importer.py
@@ -39,564 +39,488 @@ from plane.utils.integrations.github import get_github_repo_details
 from plane.utils.importers.jira import jira_project_issue_summary
 from plane.bgtasks.importer_task import service_importer
 from plane.utils.html_processor import strip_tags
+from plane.api.permissions import WorkSpaceAdminPermission
 
 
 class ServiceIssueImportSummaryEndpoint(BaseAPIView):
 
     def get(self, request, slug, service):
-        try:
-            if service == "github":
-                owner = request.GET.get("owner", False)
-                repo = request.GET.get("repo", False)
+        if service == "github":
+            owner = request.GET.get("owner", False)
+            repo = request.GET.get("repo", False)
 
-                if not owner or not repo:
-                    return Response(
-                        {"error": "Owner and repo are required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-
-                workspace_integration = WorkspaceIntegration.objects.get(
-                    integration__provider="github", workspace__slug=slug
-                )
-
-                access_tokens_url = workspace_integration.metadata.get(
-                    "access_tokens_url", False
-                )
-
-                if not access_tokens_url:
-                    return Response(
-                        {
-                            "error": "There was an error during the installation of the GitHub app. To resolve this issue, we recommend reinstalling the GitHub app."
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-
-                issue_count, labels, collaborators = get_github_repo_details(
-                    access_tokens_url, owner, repo
-                )
+            if not owner or not repo:
                 return Response(
-                    {
-                        "issue_count": issue_count,
-                        "labels": labels,
-                        "collaborators": collaborators,
-                    },
-                    status=status.HTTP_200_OK,
-                )
-
-            if service == "jira":
-                # Check for all the keys
-                params = {
-                    "project_key": "Project key is required",
-                    "api_token": "API token is required",
-                    "email": "Email is required",
-                    "cloud_hostname": "Cloud hostname is required",
-                }
-
-                for key, error_message in params.items():
-                    if not request.GET.get(key, False):
-                        return Response(
-                            {"error": error_message}, status=status.HTTP_400_BAD_REQUEST
-                        )
-
-                project_key = request.GET.get("project_key", "")
-                api_token = request.GET.get("api_token", "")
-                email = request.GET.get("email", "")
-                cloud_hostname = request.GET.get("cloud_hostname", "")
-
-                response = jira_project_issue_summary(
-                    email, api_token, project_key, cloud_hostname
-                )
-                if "error" in response:
-                    return Response(response, status=status.HTTP_400_BAD_REQUEST)
-                else:
-                    return Response(
-                        response,
-                        status=status.HTTP_200_OK,
-                    )
-            return Response(
-                {"error": "Service not supported yet"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Requested integration was not installed in the workspace"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
-class ImportServiceEndpoint(BaseAPIView):
-    def post(self, request, slug, service):
-        try:
-            project_id = request.data.get("project_id", False)
-
-            if not project_id:
-                return Response(
-                    {"error": "Project ID is required"},
+                    {"error": "Owner and repo are required"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            workspace = Workspace.objects.get(slug=slug)
+            workspace_integration = WorkspaceIntegration.objects.get(
+                integration__provider="github", workspace__slug=slug
+            )
 
-            if service == "github":
-                data = request.data.get("data", False)
-                metadata = request.data.get("metadata", False)
-                config = request.data.get("config", False)
-                if not data or not metadata or not config:
-                    return Response(
-                        {"error": "Data, config and metadata are required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
+            access_tokens_url = workspace_integration.metadata.get(
+                "access_tokens_url", False
+            )
 
-                api_token = APIToken.objects.filter(
-                    user=request.user, workspace=workspace
-                ).first()
-                if api_token is None:
-                    api_token = APIToken.objects.create(
-                        user=request.user,
-                        label="Importer",
-                        workspace=workspace,
-                    )
-
-                importer = Importer.objects.create(
-                    service=service,
-                    project_id=project_id,
-                    status="queued",
-                    initiated_by=request.user,
-                    data=data,
-                    metadata=metadata,
-                    token=api_token,
-                    config=config,
-                    created_by=request.user,
-                    updated_by=request.user,
+            if not access_tokens_url:
+                return Response(
+                    {
+                        "error": "There was an error during the installation of the GitHub app. To resolve this issue, we recommend reinstalling the GitHub app."
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
                 )
 
-                service_importer.delay(service, importer.id)
-                serializer = ImporterSerializer(importer)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            issue_count, labels, collaborators = get_github_repo_details(
+                access_tokens_url, owner, repo
+            )
+            return Response(
+                {
+                    "issue_count": issue_count,
+                    "labels": labels,
+                    "collaborators": collaborators,
+                },
+                status=status.HTTP_200_OK,
+            )
 
-            if service == "jira":
-                data = request.data.get("data", False)
-                metadata = request.data.get("metadata", False)
-                config = request.data.get("config", False)
-                if not data or not metadata:
+        if service == "jira":
+            # Check for all the keys
+            params = {
+                "project_key": "Project key is required",
+                "api_token": "API token is required",
+                "email": "Email is required",
+                "cloud_hostname": "Cloud hostname is required",
+            }
+
+            for key, error_message in params.items():
+                if not request.GET.get(key, False):
                     return Response(
-                        {"error": "Data, config and metadata are required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                api_token = APIToken.objects.filter(
-                    user=request.user, workspace=workspace
-                ).first()
-                if api_token is None:
-                    api_token = APIToken.objects.create(
-                        user=request.user,
-                        label="Importer",
-                        workspace=workspace,
+                        {"error": error_message}, status=status.HTTP_400_BAD_REQUEST
                     )
 
-                importer = Importer.objects.create(
-                    service=service,
-                    project_id=project_id,
-                    status="queued",
-                    initiated_by=request.user,
-                    data=data,
-                    metadata=metadata,
-                    token=api_token,
-                    config=config,
-                    created_by=request.user,
-                    updated_by=request.user,
+            project_key = request.GET.get("project_key", "")
+            api_token = request.GET.get("api_token", "")
+            email = request.GET.get("email", "")
+            cloud_hostname = request.GET.get("cloud_hostname", "")
+
+            response = jira_project_issue_summary(
+                email, api_token, project_key, cloud_hostname
+            )
+            if "error" in response:
+                return Response(response, status=status.HTTP_400_BAD_REQUEST)
+            else:
+                return Response(
+                    response,
+                    status=status.HTTP_200_OK,
+                )
+        return Response(
+            {"error": "Service not supported yet"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
+
+
+class ImportServiceEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+    def post(self, request, slug, service):
+        project_id = request.data.get("project_id", False)
+
+        if not project_id:
+            return Response(
+                {"error": "Project ID is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        workspace = Workspace.objects.get(slug=slug)
+
+        if service == "github":
+            data = request.data.get("data", False)
+            metadata = request.data.get("metadata", False)
+            config = request.data.get("config", False)
+            if not data or not metadata or not config:
+                return Response(
+                    {"error": "Data, config and metadata are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
                 )
 
-                service_importer.delay(service, importer.id)
-                serializer = ImporterSerializer(importer)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            api_token = APIToken.objects.filter(
+                user=request.user, workspace=workspace
+            ).first()
+            if api_token is None:
+                api_token = APIToken.objects.create(
+                    user=request.user,
+                    label="Importer",
+                    workspace=workspace,
+                )
 
-            return Response(
-                {"error": "Servivce not supported yet"},
-                status=status.HTTP_400_BAD_REQUEST,
+            importer = Importer.objects.create(
+                service=service,
+                project_id=project_id,
+                status="queued",
+                initiated_by=request.user,
+                data=data,
+                metadata=metadata,
+                token=api_token,
+                config=config,
+                created_by=request.user,
+                updated_by=request.user,
             )
-        except (
-            Workspace.DoesNotExist,
-            WorkspaceIntegration.DoesNotExist,
-            Project.DoesNotExist,
-        ) as e:
-            return Response(
-                {"error": "Workspace Integration or Project does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+
+            service_importer.delay(service, importer.id)
+            serializer = ImporterSerializer(importer)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        if service == "jira":
+            data = request.data.get("data", False)
+            metadata = request.data.get("metadata", False)
+            config = request.data.get("config", False)
+            if not data or not metadata:
+                return Response(
+                    {"error": "Data, config and metadata are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            api_token = APIToken.objects.filter(
+                user=request.user, workspace=workspace
+            ).first()
+            if api_token is None:
+                api_token = APIToken.objects.create(
+                    user=request.user,
+                    label="Importer",
+                    workspace=workspace,
+                )
+
+            importer = Importer.objects.create(
+                service=service,
+                project_id=project_id,
+                status="queued",
+                initiated_by=request.user,
+                data=data,
+                metadata=metadata,
+                token=api_token,
+                config=config,
+                created_by=request.user,
+                updated_by=request.user,
             )
 
+            service_importer.delay(service, importer.id)
+            serializer = ImporterSerializer(importer)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(
+            {"error": "Servivce not supported yet"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
+
     def get(self, request, slug):
-        try:
-            imports = (
-                Importer.objects.filter(workspace__slug=slug)
-                .order_by("-created_at")
-                .select_related("initiated_by", "project", "workspace")
-            )
-            serializer = ImporterSerializer(imports, many=True)
-            return Response(serializer.data)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        imports = (
+            Importer.objects.filter(workspace__slug=slug)
+            .order_by("-created_at")
+            .select_related("initiated_by", "project", "workspace")
+        )
+        serializer = ImporterSerializer(imports, many=True)
+        return Response(serializer.data)
 
     def delete(self, request, slug, service, pk):
-        try:
-            importer = Importer.objects.get(
-                pk=pk, service=service, workspace__slug=slug
-            )
+        importer = Importer.objects.get(
+            pk=pk, service=service, workspace__slug=slug
+        )
 
-            if importer.imported_data is not None:
-                # Delete all imported Issues
-                imported_issues = importer.imported_data.get("issues", [])
-                Issue.issue_objects.filter(id__in=imported_issues).delete()
+        if importer.imported_data is not None:
+            # Delete all imported Issues
+            imported_issues = importer.imported_data.get("issues", [])
+            Issue.issue_objects.filter(id__in=imported_issues).delete()
 
-                # Delete all imported Labels
-                imported_labels = importer.imported_data.get("labels", [])
-                Label.objects.filter(id__in=imported_labels).delete()
+            # Delete all imported Labels
+            imported_labels = importer.imported_data.get("labels", [])
+            Label.objects.filter(id__in=imported_labels).delete()
 
-                if importer.service == "jira":
-                    imported_modules = importer.imported_data.get("modules", [])
-                    Module.objects.filter(id__in=imported_modules).delete()
-            importer.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            if importer.service == "jira":
+                imported_modules = importer.imported_data.get("modules", [])
+                Module.objects.filter(id__in=imported_modules).delete()
+        importer.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
     def patch(self, request, slug, service, pk):
-        try:
-            importer = Importer.objects.get(
-                pk=pk, service=service, workspace__slug=slug
-            )
-            serializer = ImporterSerializer(importer, data=request.data, partial=True)
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Importer.DoesNotExist:
-            return Response(
-                {"error": "Importer Does not exists"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        importer = Importer.objects.get(
+            pk=pk, service=service, workspace__slug=slug
+        )
+        serializer = ImporterSerializer(importer, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
 
 class UpdateServiceImportStatusEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, service, importer_id):
-        try:
-            importer = Importer.objects.get(
-                pk=importer_id,
-                workspace__slug=slug,
-                project_id=project_id,
-                service=service,
-            )
-            importer.status = request.data.get("status", "processing")
-            importer.save()
-            return Response(status.HTTP_200_OK)
-        except Importer.DoesNotExist:
-            return Response(
-                {"error": "Importer does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
+        importer = Importer.objects.get(
+            pk=importer_id,
+            workspace__slug=slug,
+            project_id=project_id,
+            service=service,
+        )
+        importer.status = request.data.get("status", "processing")
+        importer.save()
+        return Response(status.HTTP_200_OK)
 
 
 class BulkImportIssuesEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, service):
-        try:
-            # Get the project
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        # Get the project
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
-            # Get the default state
+        # Get the default state
+        default_state = State.objects.filter(
+            ~Q(name="Triage"), project_id=project_id, default=True
+        ).first()
+        # if there is no default state assign any random state
+        if default_state is None:
             default_state = State.objects.filter(
-                ~Q(name="Triage"), project_id=project_id, default=True
+                ~Q(name="Triage"), project_id=project_id
             ).first()
-            # if there is no default state assign any random state
-            if default_state is None:
-                default_state = State.objects.filter(
-                    ~Q(name="Triage"), project_id=project_id
-                ).first()
 
-            # Get the maximum sequence_id
-            last_id = IssueSequence.objects.filter(project_id=project_id).aggregate(
-                largest=Max("sequence")
-            )["largest"]
+        # Get the maximum sequence_id
+        last_id = IssueSequence.objects.filter(project_id=project_id).aggregate(
+            largest=Max("sequence")
+        )["largest"]
 
-            last_id = 1 if last_id is None else last_id + 1
+        last_id = 1 if last_id is None else last_id + 1
 
-            # Get the maximum sort order
-            largest_sort_order = Issue.objects.filter(
-                project_id=project_id, state=default_state
-            ).aggregate(largest=Max("sort_order"))["largest"]
+        # Get the maximum sort order
+        largest_sort_order = Issue.objects.filter(
+            project_id=project_id, state=default_state
+        ).aggregate(largest=Max("sort_order"))["largest"]
 
-            largest_sort_order = (
-                65535 if largest_sort_order is None else largest_sort_order + 10000
-            )
+        largest_sort_order = (
+            65535 if largest_sort_order is None else largest_sort_order + 10000
+        )
 
-            # Get the issues_data
-            issues_data = request.data.get("issues_data", [])
-
-            if not len(issues_data):
-                return Response(
-                    {"error": "Issue data is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Issues
-            bulk_issues = []
-            for issue_data in issues_data:
-                bulk_issues.append(
-                    Issue(
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        state_id=issue_data.get("state")
-                        if issue_data.get("state", False)
-                        else default_state.id,
-                        name=issue_data.get("name", "Issue Created through Bulk"),
-                        description_html=issue_data.get("description_html", "<p></p>"),
-                        description_stripped=(
-                            None
-                            if (
-                                issue_data.get("description_html") == ""
-                                or issue_data.get("description_html") is None
-                            )
-                            else strip_tags(issue_data.get("description_html"))
-                        ),
-                        sequence_id=last_id,
-                        sort_order=largest_sort_order,
-                        start_date=issue_data.get("start_date", None),
-                        target_date=issue_data.get("target_date", None),
-                        priority=issue_data.get("priority", "none"),
-                        created_by=request.user,
-                    )
-                )
-
-                largest_sort_order = largest_sort_order + 10000
-                last_id = last_id + 1
-
-            issues = Issue.objects.bulk_create(
-                bulk_issues,
-                batch_size=100,
-                ignore_conflicts=True,
-            )
-
-            # Sequences
-            _ = IssueSequence.objects.bulk_create(
-                [
-                    IssueSequence(
-                        issue=issue,
-                        sequence=issue.sequence_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                    )
-                    for issue in issues
-                ],
-                batch_size=100,
-            )
-
-            # Attach Labels
-            bulk_issue_labels = []
-            for issue, issue_data in zip(issues, issues_data):
-                labels_list = issue_data.get("labels_list", [])
-                bulk_issue_labels = bulk_issue_labels + [
-                    IssueLabel(
-                        issue=issue,
-                        label_id=label_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for label_id in labels_list
-                ]
-
-            _ = IssueLabel.objects.bulk_create(
-                bulk_issue_labels, batch_size=100, ignore_conflicts=True
-            )
-
-            # Attach Assignees
-            bulk_issue_assignees = []
-            for issue, issue_data in zip(issues, issues_data):
-                assignees_list = issue_data.get("assignees_list", [])
-                bulk_issue_assignees = bulk_issue_assignees + [
-                    IssueAssignee(
-                        issue=issue,
-                        assignee_id=assignee_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for assignee_id in assignees_list
-                ]
-
-            _ = IssueAssignee.objects.bulk_create(
-                bulk_issue_assignees, batch_size=100, ignore_conflicts=True
-            )
-
-            # Track the issue activities
-            IssueActivity.objects.bulk_create(
-                [
-                    IssueActivity(
-                        issue=issue,
-                        actor=request.user,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        comment=f"imported the issue from {service}",
-                        verb="created",
-                        created_by=request.user,
-                    )
-                    for issue in issues
-                ],
-                batch_size=100,
-            )
-
-            # Create Comments
-            bulk_issue_comments = []
-            for issue, issue_data in zip(issues, issues_data):
-                comments_list = issue_data.get("comments_list", [])
-                bulk_issue_comments = bulk_issue_comments + [
-                    IssueComment(
-                        issue=issue,
-                        comment_html=comment.get("comment_html", "<p></p>"),
-                        actor=request.user,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for comment in comments_list
-                ]
-
-            _ = IssueComment.objects.bulk_create(bulk_issue_comments, batch_size=100)
-
-            # Attach Links
-            _ = IssueLink.objects.bulk_create(
-                [
-                    IssueLink(
-                        issue=issue,
-                        url=issue_data.get("link", {}).get("url", "https://github.com"),
-                        title=issue_data.get("link", {}).get("title", "Original Issue"),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for issue, issue_data in zip(issues, issues_data)
-                ]
-            )
+        # Get the issues_data
+        issues_data = request.data.get("issues_data", [])
 
+        if not len(issues_data):
             return Response(
-                {"issues": IssueFlatSerializer(issues, many=True).data},
-                status=status.HTTP_201_CREATED,
-            )
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Issue data is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Issues
+        bulk_issues = []
+        for issue_data in issues_data:
+            bulk_issues.append(
+                Issue(
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    state_id=issue_data.get("state")
+                    if issue_data.get("state", False)
+                    else default_state.id,
+                    name=issue_data.get("name", "Issue Created through Bulk"),
+                    description_html=issue_data.get("description_html", "<p></p>"),
+                    description_stripped=(
+                        None
+                        if (
+                            issue_data.get("description_html") == ""
+                            or issue_data.get("description_html") is None
+                        )
+                        else strip_tags(issue_data.get("description_html"))
+                    ),
+                    sequence_id=last_id,
+                    sort_order=largest_sort_order,
+                    start_date=issue_data.get("start_date", None),
+                    target_date=issue_data.get("target_date", None),
+                    priority=issue_data.get("priority", "none"),
+                    created_by=request.user,
+                )
+            )
+
+            largest_sort_order = largest_sort_order + 10000
+            last_id = last_id + 1
+
+        issues = Issue.objects.bulk_create(
+            bulk_issues,
+            batch_size=100,
+            ignore_conflicts=True,
+        )
+
+        # Sequences
+        _ = IssueSequence.objects.bulk_create(
+            [
+                IssueSequence(
+                    issue=issue,
+                    sequence=issue.sequence_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                )
+                for issue in issues
+            ],
+            batch_size=100,
+        )
+
+        # Attach Labels
+        bulk_issue_labels = []
+        for issue, issue_data in zip(issues, issues_data):
+            labels_list = issue_data.get("labels_list", [])
+            bulk_issue_labels = bulk_issue_labels + [
+                IssueLabel(
+                    issue=issue,
+                    label_id=label_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for label_id in labels_list
+            ]
+
+        _ = IssueLabel.objects.bulk_create(
+            bulk_issue_labels, batch_size=100, ignore_conflicts=True
+        )
+
+        # Attach Assignees
+        bulk_issue_assignees = []
+        for issue, issue_data in zip(issues, issues_data):
+            assignees_list = issue_data.get("assignees_list", [])
+            bulk_issue_assignees = bulk_issue_assignees + [
+                IssueAssignee(
+                    issue=issue,
+                    assignee_id=assignee_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for assignee_id in assignees_list
+            ]
+
+        _ = IssueAssignee.objects.bulk_create(
+            bulk_issue_assignees, batch_size=100, ignore_conflicts=True
+        )
+
+        # Track the issue activities
+        IssueActivity.objects.bulk_create(
+            [
+                IssueActivity(
+                    issue=issue,
+                    actor=request.user,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    comment=f"imported the issue from {service}",
+                    verb="created",
+                    created_by=request.user,
+                )
+                for issue in issues
+            ],
+            batch_size=100,
+        )
+
+        # Create Comments
+        bulk_issue_comments = []
+        for issue, issue_data in zip(issues, issues_data):
+            comments_list = issue_data.get("comments_list", [])
+            bulk_issue_comments = bulk_issue_comments + [
+                IssueComment(
+                    issue=issue,
+                    comment_html=comment.get("comment_html", "<p></p>"),
+                    actor=request.user,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for comment in comments_list
+            ]
+
+        _ = IssueComment.objects.bulk_create(bulk_issue_comments, batch_size=100)
+
+        # Attach Links
+        _ = IssueLink.objects.bulk_create(
+            [
+                IssueLink(
+                    issue=issue,
+                    url=issue_data.get("link", {}).get("url", "https://github.com"),
+                    title=issue_data.get("link", {}).get("title", "Original Issue"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for issue, issue_data in zip(issues, issues_data)
+            ]
+        )
+
+        return Response(
+            {"issues": IssueFlatSerializer(issues, many=True).data},
+            status=status.HTTP_201_CREATED,
+        )
+
 
 class BulkImportModulesEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, service):
-        try:
-            modules_data = request.data.get("modules_data", [])
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        modules_data = request.data.get("modules_data", [])
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
-            modules = Module.objects.bulk_create(
+        modules = Module.objects.bulk_create(
+            [
+                Module(
+                    name=module.get("name", uuid.uuid4().hex),
+                    description=module.get("description", ""),
+                    start_date=module.get("start_date", None),
+                    target_date=module.get("target_date", None),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for module in modules_data
+            ],
+            batch_size=100,
+            ignore_conflicts=True,
+        )
+
+        modules = Module.objects.filter(id__in=[module.id for module in modules])
+
+        if len(modules) == len(modules_data):
+            _ = ModuleLink.objects.bulk_create(
                 [
-                    Module(
-                        name=module.get("name", uuid.uuid4().hex),
-                        description=module.get("description", ""),
-                        start_date=module.get("start_date", None),
-                        target_date=module.get("target_date", None),
+                    ModuleLink(
+                        module=module,
+                        url=module_data.get("link", {}).get(
+                            "url", "https://plane.so"
+                        ),
+                        title=module_data.get("link", {}).get(
+                            "title", "Original Issue"
+                        ),
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
                     )
-                    for module in modules_data
+                    for module, module_data in zip(modules, modules_data)
                 ],
                 batch_size=100,
                 ignore_conflicts=True,
             )
 
-            modules = Module.objects.filter(id__in=[module.id for module in modules])
+            bulk_module_issues = []
+            for module, module_data in zip(modules, modules_data):
+                module_issues_list = module_data.get("module_issues_list", [])
+                bulk_module_issues = bulk_module_issues + [
+                    ModuleIssue(
+                        issue_id=issue,
+                        module=module,
+                        project_id=project_id,
+                        workspace_id=project.workspace_id,
+                        created_by=request.user,
+                    )
+                    for issue in module_issues_list
+                ]
 
-            if len(modules) == len(modules_data):
-                _ = ModuleLink.objects.bulk_create(
-                    [
-                        ModuleLink(
-                            module=module,
-                            url=module_data.get("link", {}).get(
-                                "url", "https://plane.so"
-                            ),
-                            title=module_data.get("link", {}).get(
-                                "title", "Original Issue"
-                            ),
-                            project_id=project_id,
-                            workspace_id=project.workspace_id,
-                            created_by=request.user,
-                        )
-                        for module, module_data in zip(modules, modules_data)
-                    ],
-                    batch_size=100,
-                    ignore_conflicts=True,
-                )
-
-                bulk_module_issues = []
-                for module, module_data in zip(modules, modules_data):
-                    module_issues_list = module_data.get("module_issues_list", [])
-                    bulk_module_issues = bulk_module_issues + [
-                        ModuleIssue(
-                            issue_id=issue,
-                            module=module,
-                            project_id=project_id,
-                            workspace_id=project.workspace_id,
-                            created_by=request.user,
-                        )
-                        for issue in module_issues_list
-                    ]
-
-                _ = ModuleIssue.objects.bulk_create(
-                    bulk_module_issues, batch_size=100, ignore_conflicts=True
-                )
-
-                serializer = ModuleSerializer(modules, many=True)
-                return Response(
-                    {"modules": serializer.data}, status=status.HTTP_201_CREATED
-                )
-
-            else:
-                return Response(
-                    {"message": "Modules created but issues could not be imported"},
-                    status=status.HTTP_200_OK,
-                )
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project does not exist"}, status=status.HTTP_404_NOT_FOUND
+            _ = ModuleIssue.objects.bulk_create(
+                bulk_module_issues, batch_size=100, ignore_conflicts=True
             )
-        except Exception as e:
-            capture_exception(e)
+
+            serializer = ModuleSerializer(modules, many=True)
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"modules": serializer.data}, status=status.HTTP_201_CREATED
+            )
+
+        else:
+            return Response(
+                {"message": "Modules created but issues could not be imported"},
+                status=status.HTTP_200_OK,
             )
diff --git a/apiserver/plane/api/views/inbox.py b/apiserver/plane/api/views/inbox.py
index 4bfc32f01..517e9b6de 100644
--- a/apiserver/plane/api/views/inbox.py
+++ b/apiserver/plane/api/views/inbox.py
@@ -64,24 +64,17 @@ class InboxViewSet(BaseViewSet):
         serializer.save(project_id=self.kwargs.get("project_id"))
 
     def destroy(self, request, slug, project_id, pk):
-        try:
-            inbox = Inbox.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            # Handle default inbox delete
-            if inbox.is_default:
-                return Response(
-                    {"error": "You cannot delete the default inbox"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            inbox.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
+        inbox = Inbox.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk
+        )
+        # Handle default inbox delete
+        if inbox.is_default:
             return Response(
-                {"error": "Something went wronf please try again later"},
+                {"error": "You cannot delete the default inbox"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        inbox.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class InboxIssueViewSet(BaseViewSet):
@@ -110,281 +103,239 @@ class InboxIssueViewSet(BaseViewSet):
         )
 
     def list(self, request, slug, project_id, inbox_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.objects.filter(
-                    issue_inbox__inbox_id=inbox_id,
-                    workspace__slug=slug,
-                    project_id=project_id,
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.objects.filter(
+                issue_inbox__inbox_id=inbox_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .filter(**filters)
+            .annotate(bridge_id=F("issue_inbox__id"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(
+                    issue=OuterRef("id")
                 )
-                .filter(**filters)
-                .annotate(bridge_id=F("issue_inbox__id"))
-                .select_related("workspace", "project", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_inbox",
-                        queryset=InboxIssue.objects.only(
-                            "status", "duplicate_to", "snoozed_till", "source"
-                        ),
-                    )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_inbox",
+                    queryset=InboxIssue.objects.only(
+                        "status", "duplicate_to", "snoozed_till", "source"
+                    ),
                 )
             )
-            issues_data = IssueStateInboxSerializer(issues, many=True).data
-            return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
-            )
+        )
+        issues_data = IssueStateInboxSerializer(issues, many=True).data
+        return Response(
+            issues_data,
+            status=status.HTTP_200_OK,
+        )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
     def create(self, request, slug, project_id, inbox_id):
-        try:
-            if not request.data.get("issue", {}).get("name", False):
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", "none") in [
-                "low",
-                "medium",
-                "high",
-                "urgent",
-                "none",
-            ]:
-                return Response(
-                    {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            # Create or get state
-            state, _ = State.objects.get_or_create(
-                name="Triage",
-                group="backlog",
-                description="Default state for managing all Inbox Issues",
-                project_id=project_id,
-                color="#ff7700",
-            )
-
-            # create an issue
-            issue = Issue.objects.create(
-                name=request.data.get("issue", {}).get("name"),
-                description=request.data.get("issue", {}).get("description", {}),
-                description_html=request.data.get("issue", {}).get(
-                    "description_html", "<p></p>"
-                ),
-                priority=request.data.get("issue", {}).get("priority", "low"),
-                project_id=project_id,
-                state=state,
-            )
-
-            # Create an Issue Activity
-            issue_activity.delay(
-                type="issue.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp())
-            )
-            # create an inbox issue
-            InboxIssue.objects.create(
-                inbox_id=inbox_id,
-                project_id=project_id,
-                issue=issue,
-                source=request.data.get("source", "in-app"),
-            )
-
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        if not request.data.get("issue", {}).get("name", False):
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
+        # Check for valid priority
+        if not request.data.get("issue", {}).get("priority", "none") in [
+            "low",
+            "medium",
+            "high",
+            "urgent",
+            "none",
+        ]:
+            return Response(
+                {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
+            )
+
+        # Create or get state
+        state, _ = State.objects.get_or_create(
+            name="Triage",
+            group="backlog",
+            description="Default state for managing all Inbox Issues",
+            project_id=project_id,
+            color="#ff7700",
+        )
+
+        # create an issue
+        issue = Issue.objects.create(
+            name=request.data.get("issue", {}).get("name"),
+            description=request.data.get("issue", {}).get("description", {}),
+            description_html=request.data.get("issue", {}).get(
+                "description_html", "<p></p>"
+            ),
+            priority=request.data.get("issue", {}).get("priority", "low"),
+            project_id=project_id,
+            state=state,
+        )
+
+        # Create an Issue Activity
+        issue_activity.delay(
+            type="issue.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue.id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp())
+        )
+        # create an inbox issue
+        InboxIssue.objects.create(
+            inbox_id=inbox_id,
+            project_id=project_id,
+            issue=issue,
+            source=request.data.get("source", "in-app"),
+        )
+
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     def partial_update(self, request, slug, project_id, inbox_id, pk):
-        try:
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        # Get the project member
+        project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
+        # Only project members admins and created_by users can access this endpoint
+        if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
+
+        # Get issue data
+        issue_data = request.data.pop("issue", False)
+
+        if bool(issue_data):
+            issue = Issue.objects.get(
+                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
             )
-            # Get the project member
-            project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
-            # Only project members admins and created_by users can access this endpoint
-            if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
+            # Only allow guests and viewers to edit name and description
+            if project_member.role <= 10:
+                # viewers and guests since only viewers and guests 
+                issue_data = {
+                    "name": issue_data.get("name", issue.name),
+                    "description_html": issue_data.get("description_html", issue.description_html),
+                    "description": issue_data.get("description", issue.description)
+                }
 
-            # Get issue data
-            issue_data = request.data.pop("issue", False)
+            issue_serializer = IssueCreateSerializer(
+                issue, data=issue_data, partial=True
+            )
 
-            if bool(issue_data):
-                issue = Issue.objects.get(
-                    pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-                )
-                # Only allow guests and viewers to edit name and description
-                if project_member.role <= 10:
-                    # viewers and guests since only viewers and guests 
-                    issue_data = {
-                        "name": issue_data.get("name", issue.name),
-                        "description_html": issue_data.get("description_html", issue.description_html),
-                        "description": issue_data.get("description", issue.description)
-                    }
-
-                issue_serializer = IssueCreateSerializer(
-                    issue, data=issue_data, partial=True
+            if issue_serializer.is_valid():
+                current_instance = issue
+                # Log all the updates
+                requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
+                if issue is not None:
+                    issue_activity.delay(
+                        type="issue.activity.updated",
+                        requested_data=requested_data,
+                        actor_id=str(request.user.id),
+                        issue_id=str(issue.id),
+                        project_id=str(project_id),
+                        current_instance=json.dumps(
+                            IssueSerializer(current_instance).data,
+                            cls=DjangoJSONEncoder,
+                        ),
+                        epoch=int(timezone.now().timestamp())
+                    )
+                issue_serializer.save()
+            else:
+                return Response(
+                    issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST
                 )
 
-                if issue_serializer.is_valid():
-                    current_instance = issue
-                    # Log all the updates
-                    requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
-                    if issue is not None:
-                        issue_activity.delay(
-                            type="issue.activity.updated",
-                            requested_data=requested_data,
-                            actor_id=str(request.user.id),
-                            issue_id=str(issue.id),
-                            project_id=str(project_id),
-                            current_instance=json.dumps(
-                                IssueSerializer(current_instance).data,
-                                cls=DjangoJSONEncoder,
-                            ),
-                            epoch=int(timezone.now().timestamp())
-                        )
-                    issue_serializer.save()
-                else:
-                    return Response(
-                        issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST
+        # Only project admins and members can edit inbox issue attributes
+        if project_member.role > 10:
+            serializer = InboxIssueSerializer(
+                inbox_issue, data=request.data, partial=True
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                # Update the issue state if the issue is rejected or marked as duplicate
+                if serializer.data["status"] in [-1, 2]:
+                    issue = Issue.objects.get(
+                        pk=inbox_issue.issue_id,
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+                    state = State.objects.filter(
+                        group="cancelled", workspace__slug=slug, project_id=project_id
+                    ).first()
+                    if state is not None:
+                        issue.state = state
+                        issue.save()
+
+                # Update the issue state if it is accepted
+                if serializer.data["status"] in [1]:
+                    issue = Issue.objects.get(
+                        pk=inbox_issue.issue_id,
+                        workspace__slug=slug,
+                        project_id=project_id,
                     )
 
-            # Only project admins and members can edit inbox issue attributes
-            if project_member.role > 10:
-                serializer = InboxIssueSerializer(
-                    inbox_issue, data=request.data, partial=True
-                )
-
-                if serializer.is_valid():
-                    serializer.save()
-                    # Update the issue state if the issue is rejected or marked as duplicate
-                    if serializer.data["status"] in [-1, 2]:
-                        issue = Issue.objects.get(
-                            pk=inbox_issue.issue_id,
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
+                    # Update the issue state only if it is in triage state
+                    if issue.state.name == "Triage":
+                        # Move to default state
                         state = State.objects.filter(
-                            group="cancelled", workspace__slug=slug, project_id=project_id
+                            workspace__slug=slug, project_id=project_id, default=True
                         ).first()
                         if state is not None:
                             issue.state = state
                             issue.save()
 
-                    # Update the issue state if it is accepted
-                    if serializer.data["status"] in [1]:
-                        issue = Issue.objects.get(
-                            pk=inbox_issue.issue_id,
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
-
-                        # Update the issue state only if it is in triage state
-                        if issue.state.name == "Triage":
-                            # Move to default state
-                            state = State.objects.filter(
-                                workspace__slug=slug, project_id=project_id, default=True
-                            ).first()
-                            if state is not None:
-                                issue.state = state
-                                issue.save()
-
-                    return Response(serializer.data, status=status.HTTP_200_OK)
-                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-            else:
-                return Response(InboxIssueSerializer(inbox_issue).data, status=status.HTTP_200_OK)
-        except InboxIssue.DoesNotExist:
-            return Response(
-                {"error": "Inbox Issue does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            return Response(InboxIssueSerializer(inbox_issue).data, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, inbox_id, pk):
-        try:
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-            )
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        issue = Issue.objects.get(
+            pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, inbox_id, pk):
-        try:
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            # Get the project member
-            project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        # Get the project member
+        project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
 
-            if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
+        if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
 
-            # Check the issue status
-            if inbox_issue.status in [-2, -1, 0, 2]:
-                # Delete the issue also
-                Issue.objects.filter(workspace__slug=slug, project_id=project_id, pk=inbox_issue.issue_id).delete() 
+        # Check the issue status
+        if inbox_issue.status in [-2, -1, 0, 2]:
+            # Delete the issue also
+            Issue.objects.filter(workspace__slug=slug, project_id=project_id, pk=inbox_issue.issue_id).delete() 
 
-            inbox_issue.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except InboxIssue.DoesNotExist:
-            return Response({"error": "Inbox Issue does not exists"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        inbox_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class InboxIssuePublicViewSet(BaseViewSet):
@@ -409,246 +360,200 @@ class InboxIssuePublicViewSet(BaseViewSet):
                 )
                 .select_related("issue", "workspace", "project")
             )
-        else:
-            return InboxIssue.objects.none()
+        return InboxIssue.objects.none()
 
     def list(self, request, slug, project_id, inbox_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.objects.filter(
-                    issue_inbox__inbox_id=inbox_id,
-                    workspace__slug=slug,
-                    project_id=project_id,
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.objects.filter(
+                issue_inbox__inbox_id=inbox_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .filter(**filters)
+            .annotate(bridge_id=F("issue_inbox__id"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(
+                    issue=OuterRef("id")
                 )
-                .filter(**filters)
-                .annotate(bridge_id=F("issue_inbox__id"))
-                .select_related("workspace", "project", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_inbox",
-                        queryset=InboxIssue.objects.only(
-                            "status", "duplicate_to", "snoozed_till", "source"
-                        ),
-                    )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_inbox",
+                    queryset=InboxIssue.objects.only(
+                        "status", "duplicate_to", "snoozed_till", "source"
+                    ),
                 )
             )
-            issues_data = IssueStateInboxSerializer(issues, many=True).data
-            return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
-            )
-        except ProjectDeployBoard.DoesNotExist:
-            return Response({"error": "Project Deploy Board does not exist"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        )
+        issues_data = IssueStateInboxSerializer(issues, many=True).data
+        return Response(
+            issues_data,
+            status=status.HTTP_200_OK,
+        )
 
     def create(self, request, slug, project_id, inbox_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            if not request.data.get("issue", {}).get("name", False):
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", "none") in [
-                "low",
-                "medium",
-                "high",
-                "urgent",
-                "none",
-            ]:
-                return Response(
-                    {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            # Create or get state
-            state, _ = State.objects.get_or_create(
-                name="Triage",
-                group="backlog",
-                description="Default state for managing all Inbox Issues",
-                project_id=project_id,
-                color="#ff7700",
-            )
-
-            # create an issue
-            issue = Issue.objects.create(
-                name=request.data.get("issue", {}).get("name"),
-                description=request.data.get("issue", {}).get("description", {}),
-                description_html=request.data.get("issue", {}).get(
-                    "description_html", "<p></p>"
-                ),
-                priority=request.data.get("issue", {}).get("priority", "low"),
-                project_id=project_id,
-                state=state,
-            )
-
-            # Create an Issue Activity
-            issue_activity.delay(
-                type="issue.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp())
-            )
-            # create an inbox issue
-            InboxIssue.objects.create(
-                inbox_id=inbox_id,
-                project_id=project_id,
-                issue=issue,
-                source=request.data.get("source", "in-app"),
-            )
-
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        if not request.data.get("issue", {}).get("name", False):
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
+        # Check for valid priority
+        if not request.data.get("issue", {}).get("priority", "none") in [
+            "low",
+            "medium",
+            "high",
+            "urgent",
+            "none",
+        ]:
+            return Response(
+                {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
+            )
+
+        # Create or get state
+        state, _ = State.objects.get_or_create(
+            name="Triage",
+            group="backlog",
+            description="Default state for managing all Inbox Issues",
+            project_id=project_id,
+            color="#ff7700",
+        )
+
+        # create an issue
+        issue = Issue.objects.create(
+            name=request.data.get("issue", {}).get("name"),
+            description=request.data.get("issue", {}).get("description", {}),
+            description_html=request.data.get("issue", {}).get(
+                "description_html", "<p></p>"
+            ),
+            priority=request.data.get("issue", {}).get("priority", "low"),
+            project_id=project_id,
+            state=state,
+        )
+
+        # Create an Issue Activity
+        issue_activity.delay(
+            type="issue.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue.id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp())
+        )
+        # create an inbox issue
+        InboxIssue.objects.create(
+            inbox_id=inbox_id,
+            project_id=project_id,
+            issue=issue,
+            source=request.data.get("source", "in-app"),
+        )
+
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     def partial_update(self, request, slug, project_id, inbox_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            # Get the project member
-            if str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        # Get the project member
+        if str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
 
-            # Get issue data
-            issue_data = request.data.pop("issue", False)
+        # Get issue data
+        issue_data = request.data.pop("issue", False)
 
 
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-            )
-            # viewers and guests since only viewers and guests 
-            issue_data = {
-                "name": issue_data.get("name", issue.name),
-                "description_html": issue_data.get("description_html", issue.description_html),
-                "description": issue_data.get("description", issue.description)
-            }
+        issue = Issue.objects.get(
+            pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
+        )
+        # viewers and guests since only viewers and guests 
+        issue_data = {
+            "name": issue_data.get("name", issue.name),
+            "description_html": issue_data.get("description_html", issue.description_html),
+            "description": issue_data.get("description", issue.description)
+        }
 
-            issue_serializer = IssueCreateSerializer(
-                issue, data=issue_data, partial=True
-            )
+        issue_serializer = IssueCreateSerializer(
+            issue, data=issue_data, partial=True
+        )
 
-            if issue_serializer.is_valid():
-                current_instance = issue
-                # Log all the updates
-                requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
-                if issue is not None:
-                    issue_activity.delay(
-                        type="issue.activity.updated",
-                        requested_data=requested_data,
-                        actor_id=str(request.user.id),
-                        issue_id=str(issue.id),
-                        project_id=str(project_id),
-                        current_instance=json.dumps(
-                            IssueSerializer(current_instance).data,
-                            cls=DjangoJSONEncoder,
-                        ),
-                        epoch=int(timezone.now().timestamp())
-                    )
-                issue_serializer.save()
-                return Response(issue_serializer.data, status=status.HTTP_200_OK)
-            return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except InboxIssue.DoesNotExist:
-            return Response(
-                {"error": "Inbox Issue does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if issue_serializer.is_valid():
+            current_instance = issue
+            # Log all the updates
+            requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
+            if issue is not None:
+                issue_activity.delay(
+                    type="issue.activity.updated",
+                    requested_data=requested_data,
+                    actor_id=str(request.user.id),
+                    issue_id=str(issue.id),
+                    project_id=str(project_id),
+                    current_instance=json.dumps(
+                        IssueSerializer(current_instance).data,
+                        cls=DjangoJSONEncoder,
+                    ),
+                    epoch=int(timezone.now().timestamp())
+                )
+            issue_serializer.save()
+            return Response(issue_serializer.data, status=status.HTTP_200_OK)
+        return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, inbox_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
-        
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-            )
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+    
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        issue = Issue.objects.get(
+            pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, inbox_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
 
-            if str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
-
-            inbox_issue.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except InboxIssue.DoesNotExist:
-            return Response({"error": "Inbox Issue does not exists"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
 
+        inbox_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/integration/base.py b/apiserver/plane/api/views/integration/base.py
index 5213baf63..cc911b537 100644
--- a/apiserver/plane/api/views/integration/base.py
+++ b/apiserver/plane/api/views/integration/base.py
@@ -1,8 +1,7 @@
 # Python improts
 import uuid
-
+import requests
 # Django imports
-from django.db import IntegrityError
 from django.contrib.auth.hashers import make_password
 
 # Third party imports
@@ -26,73 +25,47 @@ from plane.utils.integrations.github import (
     delete_github_installation,
 )
 from plane.api.permissions import WorkSpaceAdminPermission
-
+from plane.utils.integrations.slack import slack_oauth
 
 class IntegrationViewSet(BaseViewSet):
     serializer_class = IntegrationSerializer
     model = Integration
 
     def create(self, request):
-        try:
-            serializer = IntegrationSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = IntegrationSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, pk):
-        try:
-            integration = Integration.objects.get(pk=pk)
-            if integration.verified:
-                return Response(
-                    {"error": "Verified integrations cannot be updated"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = IntegrationSerializer(
-                integration, data=request.data, partial=True
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        except Integration.DoesNotExist:
+        integration = Integration.objects.get(pk=pk)
+        if integration.verified:
             return Response(
-                {"error": "Integration Does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Verified integrations cannot be updated"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, pk):
-        try:
-            integration = Integration.objects.get(pk=pk)
-            if integration.verified:
-                return Response(
-                    {"error": "Verified integrations cannot be updated"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        serializer = IntegrationSerializer(
+            integration, data=request.data, partial=True
+        )
 
-            integration.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Integration.DoesNotExist:
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, pk):
+        integration = Integration.objects.get(pk=pk)
+        if integration.verified:
             return Response(
-                {"error": "Integration Does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
+                {"error": "Verified integrations cannot be updated"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
+        integration.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class WorkspaceIntegrationViewSet(BaseViewSet):
     serializer_class = WorkspaceIntegrationSerializer
@@ -111,119 +84,88 @@ class WorkspaceIntegrationViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, provider):
-        try:
-            workspace = Workspace.objects.get(slug=slug)
-            integration = Integration.objects.get(provider=provider)
-            config = {}
-            if provider == "github":
-                installation_id = request.data.get("installation_id", None)
-                if not installation_id:
-                    return Response(
-                        {"error": "Installation ID is required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                metadata = get_github_metadata(installation_id)
-                config = {"installation_id": installation_id}
-
-            if provider == "slack":
-                metadata = request.data.get("metadata", {})
-                access_token = metadata.get("access_token", False)
-                team_id = metadata.get("team", {}).get("id", False)
-                if not metadata or not access_token or not team_id:
-                    return Response(
-                        {"error": "Access token and team id is required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                config = {"team_id": team_id, "access_token": access_token}
-
-            # Create a bot user
-            bot_user = User.objects.create(
-                email=f"{uuid.uuid4().hex}@plane.so",
-                username=uuid.uuid4().hex,
-                password=make_password(uuid.uuid4().hex),
-                is_password_autoset=True,
-                is_bot=True,
-                first_name=integration.title,
-                avatar=integration.avatar_url
-                if integration.avatar_url is not None
-                else "",
-            )
-
-            # Create an API Token for the bot user
-            api_token = APIToken.objects.create(
-                user=bot_user,
-                user_type=1,  # bot user
-                workspace=workspace,
-            )
-
-            workspace_integration = WorkspaceIntegration.objects.create(
-                workspace=workspace,
-                integration=integration,
-                actor=bot_user,
-                api_token=api_token,
-                metadata=metadata,
-                config=config,
-            )
-
-            # Add bot user as a member of workspace
-            _ = WorkspaceMember.objects.create(
-                workspace=workspace_integration.workspace,
-                member=bot_user,
-                role=20,
-            )
-            return Response(
-                WorkspaceIntegrationSerializer(workspace_integration).data,
-                status=status.HTTP_201_CREATED,
-            )
-        except IntegrityError as e:
-            if "already exists" in str(e):
+        workspace = Workspace.objects.get(slug=slug)
+        integration = Integration.objects.get(provider=provider)
+        config = {}
+        if provider == "github":
+            installation_id = request.data.get("installation_id", None)
+            if not installation_id:
                 return Response(
-                    {"error": "Integration is already active in the workspace"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
+                    {"error": "Installation ID is required"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
-        except (Workspace.DoesNotExist, Integration.DoesNotExist) as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Workspace or Integration not found"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            metadata = get_github_metadata(installation_id)
+            config = {"installation_id": installation_id}
+
+        if provider == "slack":
+            code = request.data.get("code", False)
+
+            if not code:
+                return Response({"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST)
+
+            slack_response = slack_oauth(code=code)
+
+            metadata = slack_response
+            access_token = metadata.get("access_token", False)
+            team_id = metadata.get("team", {}).get("id", False)
+            if not metadata or not access_token or not team_id:
+                return Response(
+                    {"error": "Slack could not be installed. Please try again later"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            config = {"team_id": team_id, "access_token": access_token}
+
+        # Create a bot user
+        bot_user = User.objects.create(
+            email=f"{uuid.uuid4().hex}@plane.so",
+            username=uuid.uuid4().hex,
+            password=make_password(uuid.uuid4().hex),
+            is_password_autoset=True,
+            is_bot=True,
+            first_name=integration.title,
+            avatar=integration.avatar_url
+            if integration.avatar_url is not None
+            else "",
+        )
+
+        # Create an API Token for the bot user
+        api_token = APIToken.objects.create(
+            user=bot_user,
+            user_type=1,  # bot user
+            workspace=workspace,
+        )
+
+        workspace_integration = WorkspaceIntegration.objects.create(
+            workspace=workspace,
+            integration=integration,
+            actor=bot_user,
+            api_token=api_token,
+            metadata=metadata,
+            config=config,
+        )
+
+        # Add bot user as a member of workspace
+        _ = WorkspaceMember.objects.create(
+            workspace=workspace_integration.workspace,
+            member=bot_user,
+            role=20,
+        )
+        return Response(
+            WorkspaceIntegrationSerializer(workspace_integration).data,
+            status=status.HTTP_201_CREATED,
+        )
 
     def destroy(self, request, slug, pk):
-        try:
-            workspace_integration = WorkspaceIntegration.objects.get(
-                pk=pk, workspace__slug=slug
-            )
+        workspace_integration = WorkspaceIntegration.objects.get(
+            pk=pk, workspace__slug=slug
+        )
 
-            if workspace_integration.integration.provider == "github":
-                installation_id = workspace_integration.config.get(
-                    "installation_id", False
-                )
-                if installation_id:
-                    delete_github_installation(installation_id=installation_id)
-
-            workspace_integration.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Workspace Integration Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        if workspace_integration.integration.provider == "github":
+            installation_id = workspace_integration.config.get(
+                "installation_id", False
             )
+            if installation_id:
+                delete_github_installation(installation_id=installation_id)
+
+        workspace_integration.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/integration/github.py b/apiserver/plane/api/views/integration/github.py
index 4cf07c705..f2035639e 100644
--- a/apiserver/plane/api/views/integration/github.py
+++ b/apiserver/plane/api/views/integration/github.py
@@ -30,31 +30,25 @@ class GithubRepositoriesEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, workspace_integration_id):
-        try:
-            page = request.GET.get("page", 1)
-            workspace_integration = WorkspaceIntegration.objects.get(
-                workspace__slug=slug, pk=workspace_integration_id
-            )
+        page = request.GET.get("page", 1)
+        workspace_integration = WorkspaceIntegration.objects.get(
+            workspace__slug=slug, pk=workspace_integration_id
+        )
 
-            if workspace_integration.integration.provider != "github":
-                return Response(
-                    {"error": "Not a github integration"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            access_tokens_url = workspace_integration.metadata["access_tokens_url"]
-            repositories_url = (
-                workspace_integration.metadata["repositories_url"]
-                + f"?per_page=100&page={page}"
-            )
-            repositories = get_github_repos(access_tokens_url, repositories_url)
-            return Response(repositories, status=status.HTTP_200_OK)
-        except WorkspaceIntegration.DoesNotExist:
+        if workspace_integration.integration.provider != "github":
             return Response(
-                {"error": "Workspace Integration Does not exists"},
+                {"error": "Not a github integration"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        access_tokens_url = workspace_integration.metadata["access_tokens_url"]
+        repositories_url = (
+            workspace_integration.metadata["repositories_url"]
+            + f"?per_page=100&page={page}"
+        )
+        repositories = get_github_repos(access_tokens_url, repositories_url)
+        return Response(repositories, status=status.HTTP_200_OK)
+
 
 class GithubRepositorySyncViewSet(BaseViewSet):
     permission_classes = [
@@ -76,89 +70,76 @@ class GithubRepositorySyncViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id, workspace_integration_id):
-        try:
-            name = request.data.get("name", False)
-            url = request.data.get("url", False)
-            config = request.data.get("config", {})
-            repository_id = request.data.get("repository_id", False)
-            owner = request.data.get("owner", False)
+        name = request.data.get("name", False)
+        url = request.data.get("url", False)
+        config = request.data.get("config", {})
+        repository_id = request.data.get("repository_id", False)
+        owner = request.data.get("owner", False)
 
-            if not name or not url or not repository_id or not owner:
-                return Response(
-                    {"error": "Name, url, repository_id and owner are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Get the workspace integration
-            workspace_integration = WorkspaceIntegration.objects.get(
-                pk=workspace_integration_id
-            )
-
-            # Delete the old repository object
-            GithubRepositorySync.objects.filter(
-                project_id=project_id, workspace__slug=slug
-            ).delete()
-            GithubRepository.objects.filter(
-                project_id=project_id, workspace__slug=slug
-            ).delete()
-
-            # Create repository
-            repo = GithubRepository.objects.create(
-                name=name,
-                url=url,
-                config=config,
-                repository_id=repository_id,
-                owner=owner,
-                project_id=project_id,
-            )
-
-            # Create a Label for github
-            label = Label.objects.filter(
-                name="GitHub",
-                project_id=project_id,
-            ).first()
-
-            if label is None:
-                label = Label.objects.create(
-                    name="GitHub",
-                    project_id=project_id,
-                    description="Label to sync Plane issues with GitHub issues",
-                    color="#003773",
-                )
-
-            # Create repo sync
-            repo_sync = GithubRepositorySync.objects.create(
-                repository=repo,
-                workspace_integration=workspace_integration,
-                actor=workspace_integration.actor,
-                credentials=request.data.get("credentials", {}),
-                project_id=project_id,
-                label=label,
-            )
-
-            # Add bot as a member in the project
-            _ = ProjectMember.objects.get_or_create(
-                member=workspace_integration.actor, role=20, project_id=project_id
-            )
-
-            # Return Response
+        if not name or not url or not repository_id or not owner:
             return Response(
-                GithubRepositorySyncSerializer(repo_sync).data,
-                status=status.HTTP_201_CREATED,
-            )
-
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Workspace Integration does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Name, url, repository_id and owner are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Get the workspace integration
+        workspace_integration = WorkspaceIntegration.objects.get(
+            pk=workspace_integration_id
+        )
+
+        # Delete the old repository object
+        GithubRepositorySync.objects.filter(
+            project_id=project_id, workspace__slug=slug
+        ).delete()
+        GithubRepository.objects.filter(
+            project_id=project_id, workspace__slug=slug
+        ).delete()
+
+        # Create repository
+        repo = GithubRepository.objects.create(
+            name=name,
+            url=url,
+            config=config,
+            repository_id=repository_id,
+            owner=owner,
+            project_id=project_id,
+        )
+
+        # Create a Label for github
+        label = Label.objects.filter(
+            name="GitHub",
+            project_id=project_id,
+        ).first()
+
+        if label is None:
+            label = Label.objects.create(
+                name="GitHub",
+                project_id=project_id,
+                description="Label to sync Plane issues with GitHub issues",
+                color="#003773",
+            )
+
+        # Create repo sync
+        repo_sync = GithubRepositorySync.objects.create(
+            repository=repo,
+            workspace_integration=workspace_integration,
+            actor=workspace_integration.actor,
+            credentials=request.data.get("credentials", {}),
+            project_id=project_id,
+            label=label,
+        )
+
+        # Add bot as a member in the project
+        _ = ProjectMember.objects.get_or_create(
+            member=workspace_integration.actor, role=20, project_id=project_id
+        )
+
+        # Return Response
+        return Response(
+            GithubRepositorySyncSerializer(repo_sync).data,
+            status=status.HTTP_201_CREATED,
+        )
+
 
 class GithubIssueSyncViewSet(BaseViewSet):
     permission_classes = [
@@ -177,42 +158,30 @@ class GithubIssueSyncViewSet(BaseViewSet):
 
 class BulkCreateGithubIssueSyncEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, repo_sync_id):
-        try:
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
-            github_issue_syncs = request.data.get("github_issue_syncs", [])
-            github_issue_syncs = GithubIssueSync.objects.bulk_create(
-                [
-                    GithubIssueSync(
-                        issue_id=github_issue_sync.get("issue"),
-                        repo_issue_id=github_issue_sync.get("repo_issue_id"),
-                        issue_url=github_issue_sync.get("issue_url"),
-                        github_issue_id=github_issue_sync.get("github_issue_id"),
-                        repository_sync_id=repo_sync_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for github_issue_sync in github_issue_syncs
-                ],
-                batch_size=100,
-                ignore_conflicts=True,
-            )
+        github_issue_syncs = request.data.get("github_issue_syncs", [])
+        github_issue_syncs = GithubIssueSync.objects.bulk_create(
+            [
+                GithubIssueSync(
+                    issue_id=github_issue_sync.get("issue"),
+                    repo_issue_id=github_issue_sync.get("repo_issue_id"),
+                    issue_url=github_issue_sync.get("issue_url"),
+                    github_issue_id=github_issue_sync.get("github_issue_id"),
+                    repository_sync_id=repo_sync_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for github_issue_sync in github_issue_syncs
+            ],
+            batch_size=100,
+            ignore_conflicts=True,
+        )
 
-            serializer = GithubIssueSyncSerializer(github_issue_syncs, many=True)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = GithubIssueSyncSerializer(github_issue_syncs, many=True)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
 
 class GithubCommentSyncViewSet(BaseViewSet):
diff --git a/apiserver/plane/api/views/integration/slack.py b/apiserver/plane/api/views/integration/slack.py
index 498dd0607..6b1b47d37 100644
--- a/apiserver/plane/api/views/integration/slack.py
+++ b/apiserver/plane/api/views/integration/slack.py
@@ -11,6 +11,7 @@ from plane.api.views import BaseViewSet, BaseAPIView
 from plane.db.models import SlackProjectSync, WorkspaceIntegration, ProjectMember
 from plane.api.serializers import SlackProjectSyncSerializer
 from plane.api.permissions import ProjectBasePermission, ProjectEntityPermission
+from plane.utils.integrations.slack import slack_oauth
 
 
 class SlackProjectSyncViewSet(BaseViewSet):
@@ -33,41 +34,46 @@ class SlackProjectSyncViewSet(BaseViewSet):
 
     def create(self, request, slug, project_id, workspace_integration_id):
         try:
-            serializer = SlackProjectSyncSerializer(data=request.data)
+            code = request.data.get("code", False)
+
+            if not code:
+                return Response(
+                    {"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST
+                )
+
+            slack_response = slack_oauth(code=code)
 
             workspace_integration = WorkspaceIntegration.objects.get(
                 workspace__slug=slug, pk=workspace_integration_id
             )
 
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id,
-                    workspace_integration_id=workspace_integration_id,
+            workspace_integration = WorkspaceIntegration.objects.get(
+                pk=workspace_integration_id, workspace__slug=slug
+            )
+            slack_project_sync = SlackProjectSync.objects.create(
+                access_token=slack_response.get("access_token"),
+                scopes=slack_response.get("scope"),
+                bot_user_id=slack_response.get("bot_user_id"),
+                webhook_url=slack_response.get("incoming_webhook", {}).get("url"),
+                data=slack_response,
+                team_id=slack_response.get("team", {}).get("id"),
+                team_name=slack_response.get("team", {}).get("name"),
+                workspace_integration=workspace_integration,
+                project_id=project_id,
+            )
+            _ = ProjectMember.objects.get_or_create(
+                member=workspace_integration.actor, role=20, project_id=project_id
+            )
+            serializer = SlackProjectSyncSerializer(slack_project_sync)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"error": "Slack is already installed for the project"},
+                    status=status.HTTP_410_GONE,
                 )
-
-                workspace_integration = WorkspaceIntegration.objects.get(
-                    pk=workspace_integration_id, workspace__slug=slug
-                )
-
-                _ = ProjectMember.objects.get_or_create(
-                    member=workspace_integration.actor, role=20, project_id=project_id
-                )
-
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError:
+            capture_exception(e)
             return Response(
-                {"error": "Slack is already enabled for the project"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Workspace Integration does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            print(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Slack could not be installed. Please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index b5a62dd5d..d1cd93e73 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -24,7 +24,6 @@ from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
 from django.db import IntegrityError
-from django.db import IntegrityError
 
 # Third Party imports
 from rest_framework.response import Response
@@ -40,7 +39,6 @@ from plane.api.serializers import (
     IssueActivitySerializer,
     IssueCommentSerializer,
     IssuePropertySerializer,
-    LabelSerializer,
     IssueSerializer,
     LabelSerializer,
     IssueFlatSerializer,
@@ -84,7 +82,6 @@ from plane.db.models import (
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
-from plane.bgtasks.export_task import issue_export_task
 
 
 class IssueViewSet(BaseViewSet):
@@ -110,49 +107,6 @@ class IssueViewSet(BaseViewSet):
         "workspace__id",
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(project_id=self.kwargs.get("project_id"))
-
-    def perform_update(self, serializer):
-        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="issue.activity.updated",
-                requested_data=requested_data,
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-
-        return super().perform_update(serializer)
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="issue.activity.deleted",
-                requested_data=json.dumps(
-                    {"issue_id": str(self.kwargs.get("pk", None))}
-                ),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return (
             Issue.issue_objects.annotate(
@@ -175,312 +129,416 @@ class IssueViewSet(BaseViewSet):
                     queryset=IssueReaction.objects.select_related("actor"),
                 )
             )
-        )
+        ).distinct()
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            issue_queryset = (
-                self.get_queryset()
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-            )
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
-                )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            sub_group_by = request.GET.get("sub_group_by", False)
-            if sub_group_by and sub_group_by == group_by:
-                return Response(
-                    {"error": "Group by and sub group by cannot be same"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if group_by:
-                return Response(
-                    group_results(issues, group_by, sub_group_by), status=status.HTTP_200_OK
-                )
-
-            return Response(issues, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-    def create(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(pk=project_id)
-
-            serializer = IssueCreateSerializer(
-                data=request.data,
-                context={
-                    "project_id": project_id,
-                    "workspace_id": project.workspace_id,
-                    "default_assignee_id": project.default_assignee_id,
-                },
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-
-                # Track the issue
-                issue_activity.delay(
-                    type="issue.activity.created",
-                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(serializer.data.get("id", None)),
-                    project_id=str(project_id),
-                    current_instance=None,
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project was not found"}, status=status.HTTP_404_NOT_FOUND
-            )
-
-    def retrieve(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.issue_objects.annotate(
-                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
                 .values("count")
-            ).get(
-                workspace__slug=slug, project_id=project_id, pk=pk
             )
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
+
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
+                )
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
+                )
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
+                )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
+                {"error": "Group by and sub group by cannot be same"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(issues, status=status.HTTP_200_OK)
+
+    def create(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id)
+
+        serializer = IssueCreateSerializer(
+            data=request.data,
+            context={
+                "project_id": project_id,
+                "workspace_id": project.workspace_id,
+                "default_assignee_id": project.default_assignee_id,
+            },
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+
+            # Track the issue
+            issue_activity.delay(
+                type="issue.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(serializer.data.get("id", None)),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def retrieve(self, request, slug, project_id, pk=None):
+        issue = Issue.issue_objects.annotate(
+            sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+            .order_by()
+            .annotate(count=Func(F("id"), function="Count"))
+            .values("count")
+        ).get(workspace__slug=slug, project_id=project_id, pk=pk)
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+
+    def partial_update(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        current_instance = json.dumps(
+            IssueSerializer(issue).data, cls=DjangoJSONEncoder
+        )
+        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
+        serializer = IssueCreateSerializer(issue, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(pk),
+                project_id=str(project_id),
+                current_instance=current_instance,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        current_instance = json.dumps(
+            IssueSerializer(issue).data, cls=DjangoJSONEncoder
+        )
+        issue.delete()
+        issue_activity.delay(
+            type="issue.activity.deleted",
+            requested_data=json.dumps({"issue_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class IssueListEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get(self, request, slug, project_id):
+        fields = [field for field in request.GET.get("fields", "").split(",") if field]
+        filters = issue_filters(request.query_params, "GET")
+
+        issue_queryset = (
+            Issue.objects.filter(workspace__slug=slug, project_id=project_id)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
+                )
+            )
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .distinct()
+        )
+
+        serializer = IssueLiteSerializer(
+            issue_queryset, many=True, fields=fields if fields else None
+        )
+
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+class IssueListGroupedEndpoint(BaseAPIView):
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get(self, request, slug, project_id):
+        filters = issue_filters(request.query_params, "GET")
+        fields = [field for field in request.GET.get("fields", "").split(",") if field]
+
+        issue_queryset = (
+            Issue.objects.filter(workspace__slug=slug, project_id=project_id)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
+                )
+            )
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .distinct()
+        )
+
+        issues = IssueLiteSerializer(issue_queryset, many=True, fields=fields if fields else None).data
+        issue_dict = {str(issue["id"]): issue for issue in issues}
+        return Response(
+            issue_dict,
+            status=status.HTTP_200_OK,
+        )
+
 
 class UserWorkSpaceIssues(BaseAPIView):
     @method_decorator(gzip_page)
     def get(self, request, slug):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        filters = issue_filters(request.query_params, "GET")
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            issue_queryset = (
-                Issue.issue_objects.filter(
-                    (
-                        Q(assignees__in=[request.user])
-                        | Q(created_by=request.user)
-                        | Q(issue_subscribers__subscriber=request.user)
-                    ),
-                    workspace__slug=slug,
+        issue_queryset = (
+            Issue.issue_objects.filter(
+                (
+                    Q(assignees__in=[request.user])
+                    | Q(created_by=request.user)
+                    | Q(issue_subscribers__subscriber=request.user)
+                ),
+                workspace__slug=slug,
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(order_by_param)
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .order_by(order_by_param)
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .filter(**filters)
-            ).distinct()
+            )
+            .filter(**filters)
+        ).distinct()
 
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
+            ).order_by("priority_order")
 
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
 
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            sub_group_by = request.GET.get("sub_group_by", False)
-            if sub_group_by and sub_group_by == group_by:
-                return Response(
-                    {"error": "Group by and sub group by cannot be same"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            
-            if group_by:
-                return Response(
-                    group_results(issues, group_by, sub_group_by), status=status.HTTP_200_OK
-                )
-
-            return Response(issues, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Group by and sub group by cannot be same"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(issues, status=status.HTTP_200_OK)
+
 
 class WorkSpaceIssuesEndpoint(BaseAPIView):
     permission_classes = [
@@ -489,20 +547,13 @@ class WorkSpaceIssuesEndpoint(BaseAPIView):
 
     @method_decorator(gzip_page)
     def get(self, request, slug):
-        try:
-            issues = (
-                Issue.issue_objects.filter(workspace__slug=slug)
-                .filter(project__project_projectmember__member=self.request.user)
-                .order_by("-created_at")
-            )
-            serializer = IssueSerializer(issues, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issues = (
+            Issue.issue_objects.filter(workspace__slug=slug)
+            .filter(project__project_projectmember__member=self.request.user)
+            .order_by("-created_at")
+        )
+        serializer = IssueSerializer(issues, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class IssueActivityEndpoint(BaseAPIView):
@@ -512,42 +563,35 @@ class IssueActivityEndpoint(BaseAPIView):
 
     @method_decorator(gzip_page)
     def get(self, request, slug, project_id, issue_id):
-        try:
-            issue_activities = (
-                IssueActivity.objects.filter(issue_id=issue_id)
-                .filter(
-                    ~Q(field__in=["comment", "vote", "reaction", "draft"]),
-                    project__project_projectmember__member=self.request.user,
-                )
-                .select_related("actor", "workspace", "issue", "project")
-            ).order_by("created_at")
-            issue_comments = (
-                IssueComment.objects.filter(issue_id=issue_id)
-                .filter(project__project_projectmember__member=self.request.user)
-                .order_by("created_at")
-                .select_related("actor", "issue", "project", "workspace")
-                .prefetch_related(
-                    Prefetch(
-                        "comment_reactions",
-                        queryset=CommentReaction.objects.select_related("actor"),
-                    )
+        issue_activities = (
+            IssueActivity.objects.filter(issue_id=issue_id)
+            .filter(
+                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+                project__project_projectmember__member=self.request.user,
+            )
+            .select_related("actor", "workspace", "issue", "project")
+        ).order_by("created_at")
+        issue_comments = (
+            IssueComment.objects.filter(issue_id=issue_id)
+            .filter(project__project_projectmember__member=self.request.user)
+            .order_by("created_at")
+            .select_related("actor", "issue", "project", "workspace")
+            .prefetch_related(
+                Prefetch(
+                    "comment_reactions",
+                    queryset=CommentReaction.objects.select_related("actor"),
                 )
             )
-            issue_activities = IssueActivitySerializer(issue_activities, many=True).data
-            issue_comments = IssueCommentSerializer(issue_comments, many=True).data
+        )
+        issue_activities = IssueActivitySerializer(issue_activities, many=True).data
+        issue_comments = IssueCommentSerializer(issue_comments, many=True).data
 
-            result_list = sorted(
-                chain(issue_activities, issue_comments),
-                key=lambda instance: instance["created_at"],
-            )
+        result_list = sorted(
+            chain(issue_activities, issue_comments),
+            key=lambda instance: instance["created_at"],
+        )
 
-            return Response(result_list, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(result_list, status=status.HTTP_200_OK)
 
 
 class IssueCommentViewSet(BaseViewSet):
@@ -562,64 +606,6 @@ class IssueCommentViewSet(BaseViewSet):
         "workspace__id",
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            issue_id=self.kwargs.get("issue_id"),
-            actor=self.request.user if self.request.user is not None else None,
-        )
-        issue_activity.delay(
-            type="comment.activity.created",
-            requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("issue_id")),
-            project_id=str(self.kwargs.get("project_id")),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
-        )
-
-    def perform_update(self, serializer):
-        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="comment.activity.updated",
-                requested_data=requested_data,
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueCommentSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-
-        return super().perform_update(serializer)
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="comment.activity.deleted",
-                requested_data=json.dumps(
-                    {"comment_id": str(self.kwargs.get("pk", None))}
-                ),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueCommentSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -643,66 +629,98 @@ class IssueCommentViewSet(BaseViewSet):
             .distinct()
         )
 
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueCommentSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                issue_id=issue_id,
+                actor=request.user,
+            )
+            issue_activity.delay(
+                type="comment.activity.created",
+                requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id")),
+                project_id=str(self.kwargs.get("project_id")),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-class IssuePropertyViewSet(BaseViewSet):
-    serializer_class = IssuePropertySerializer
-    model = IssueProperty
+    def partial_update(self, request, slug, project_id, issue_id, pk):
+        issue_comment = IssueComment.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
+        current_instance = json.dumps(
+            IssueCommentSerializer(issue_comment).data,
+            cls=DjangoJSONEncoder,
+        )
+        serializer = IssueCommentSerializer(
+            issue_comment, data=request.data, partial=True
+        )
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="comment.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=current_instance,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        issue_comment = IssueComment.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        current_instance = json.dumps(
+            IssueCommentSerializer(issue_comment).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_comment.delete()
+        issue_activity.delay(
+            type="comment.activity.deleted",
+            requested_data=json.dumps({"comment_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class IssueUserDisplayPropertyEndpoint(BaseAPIView):
     permission_classes = [
-        ProjectEntityPermission,
+        ProjectLitePermission,
     ]
 
-    filterset_fields = []
-
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"), user=self.request.user
+    def post(self, request, slug, project_id):
+        issue_property, created = IssueProperty.objects.get_or_create(
+            user=request.user,
+            project_id=project_id,
         )
 
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-            .filter(user=self.request.user)
-            .filter(project__project_projectmember__member=self.request.user)
-            .select_related("project")
-            .select_related("workspace")
-        )
-
-    def list(self, request, slug, project_id):
-        queryset = self.get_queryset()
-        serializer = IssuePropertySerializer(queryset, many=True)
-        return Response(
-            serializer.data[0] if len(serializer.data) > 0 else [],
-            status=status.HTTP_200_OK,
-        )
-
-    def create(self, request, slug, project_id):
-        try:
-            issue_property, created = IssueProperty.objects.get_or_create(
-                user=request.user,
-                project_id=project_id,
-            )
-
-            if not created:
-                issue_property.properties = request.data.get("properties", {})
-                issue_property.save()
-
-                serializer = IssuePropertySerializer(issue_property)
-                return Response(serializer.data, status=status.HTTP_200_OK)
-
+        if not created:
             issue_property.properties = request.data.get("properties", {})
             issue_property.save()
-            serializer = IssuePropertySerializer(issue_property)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        issue_property.properties = request.data.get("properties", {})
+        issue_property.save()
+        serializer = IssuePropertySerializer(issue_property)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def get(self, request, slug, project_id):
+        issue_property, _ = IssueProperty.objects.get_or_create(
+            user=request.user, project_id=project_id
+        )
+        serializer = IssuePropertySerializer(issue_property)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class LabelViewSet(BaseViewSet):
@@ -720,10 +738,10 @@ class LabelViewSet(BaseViewSet):
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except IntegrityError:
-            return Response({"error": "Label with the same name already exists in the project"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_400_BAD_REQUEST)
+            return Response(
+                {"error": "Label with the same name already exists in the project"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
     def get_queryset(self):
         return self.filter_queryset(
@@ -746,34 +764,27 @@ class BulkDeleteIssuesEndpoint(BaseAPIView):
     ]
 
     def delete(self, request, slug, project_id):
-        try:
-            issue_ids = request.data.get("issue_ids", [])
-
-            if not len(issue_ids):
-                return Response(
-                    {"error": "Issue IDs are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            issues = Issue.issue_objects.filter(
-                workspace__slug=slug, project_id=project_id, pk__in=issue_ids
-            )
-
-            total_issues = len(issues)
-
-            issues.delete()
+        issue_ids = request.data.get("issue_ids", [])
 
+        if not len(issue_ids):
             return Response(
-                {"message": f"{total_issues} issues were deleted"},
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Issue IDs are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        issues = Issue.issue_objects.filter(
+            workspace__slug=slug, project_id=project_id, pk__in=issue_ids
+        )
+
+        total_issues = len(issues)
+
+        issues.delete()
+
+        return Response(
+            {"message": f"{total_issues} issues were deleted"},
+            status=status.HTTP_200_OK,
+        )
+
 
 class SubIssuesEndpoint(BaseAPIView):
     permission_classes = [
@@ -782,111 +793,103 @@ class SubIssuesEndpoint(BaseAPIView):
 
     @method_decorator(gzip_page)
     def get(self, request, slug, project_id, issue_id):
-        try:
-            sub_issues = (
-                Issue.issue_objects.filter(parent_id=issue_id, workspace__slug=slug)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
+        sub_issues = (
+            Issue.issue_objects.filter(parent_id=issue_id, workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
             )
+        )
 
-            state_distribution = (
-                State.objects.filter(
-                    workspace__slug=slug, state_issue__parent_id=issue_id
-                )
-                .annotate(state_group=F("group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        state_distribution = (
+            State.objects.filter(workspace__slug=slug, state_issue__parent_id=issue_id)
+            .annotate(state_group=F("group"))
+            .values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            result = {
-                item["state_group"]: item["state_count"] for item in state_distribution
-            }
+        result = {
+            item["state_group"]: item["state_count"] for item in state_distribution
+        }
 
-            serializer = IssueLiteSerializer(
-                sub_issues,
-                many=True,
-            )
-            return Response(
-                {
-                    "sub_issues": serializer.data,
-                    "state_distribution": result,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = IssueLiteSerializer(
+            sub_issues,
+            many=True,
+        )
+        return Response(
+            {
+                "sub_issues": serializer.data,
+                "state_distribution": result,
+            },
+            status=status.HTTP_200_OK,
+        )
 
     # Assign multiple sub issues
     def post(self, request, slug, project_id, issue_id):
-        try:
-            parent_issue = Issue.issue_objects.get(pk=issue_id)
-            sub_issue_ids = request.data.get("sub_issue_ids", [])
-
-            if not len(sub_issue_ids):
-                return Response(
-                    {"error": "Sub Issue IDs are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
-
-            for sub_issue in sub_issues:
-                sub_issue.parent = parent_issue
-
-            _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
-
-            updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+        parent_issue = Issue.issue_objects.get(pk=issue_id)
+        sub_issue_ids = request.data.get("sub_issue_ids", [])
 
+        if not len(sub_issue_ids):
             return Response(
-                IssueFlatSerializer(updated_sub_issues, many=True).data,
-                status=status.HTTP_200_OK,
-            )
-        except Issue.DoesNotExist:
-            return Response(
-                {"Parent Issue does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Sub Issue IDs are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+
+        for sub_issue in sub_issues:
+            sub_issue.parent = parent_issue
+
+        _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
+
+        updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+
+        # Track the issue
+        _ = [
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=json.dumps({"parent": str(issue_id)}),
+                actor_id=str(request.user.id),
+                issue_id=str(sub_issue_id),
+                project_id=str(project_id),
+                current_instance=json.dumps({"parent": str(sub_issue_id)}),
+                epoch=int(timezone.now().timestamp()),
+            )
+            for sub_issue_id in sub_issue_ids
+        ]
+
+        return Response(
+            IssueFlatSerializer(updated_sub_issues, many=True).data,
+            status=status.HTTP_200_OK,
+        )
+
 
 class IssueLinkViewSet(BaseViewSet):
     permission_classes = [
@@ -896,63 +899,6 @@ class IssueLinkViewSet(BaseViewSet):
     model = IssueLink
     serializer_class = IssueLinkSerializer
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            issue_id=self.kwargs.get("issue_id"),
-        )
-        issue_activity.delay(
-            type="link.activity.created",
-            requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("issue_id")),
-            project_id=str(self.kwargs.get("project_id")),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
-        )
-
-    def perform_update(self, serializer):
-        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="link.activity.updated",
-                requested_data=requested_data,
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueLinkSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-
-        return super().perform_update(serializer)
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="link.activity.deleted",
-                requested_data=json.dumps(
-                    {"link_id": str(self.kwargs.get("pk", None))}
-                ),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueLinkSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return (
             super()
@@ -965,44 +911,96 @@ class IssueLinkViewSet(BaseViewSet):
             .distinct()
         )
 
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueLinkSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                issue_id=issue_id,
+            )
+            issue_activity.delay(
+                type="link.activity.created",
+                requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id")),
+                project_id=str(self.kwargs.get("project_id")),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def partial_update(self, request, slug, project_id, issue_id, pk):
+        issue_link = IssueLink.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        requested_data = json.dumps(request.data, cls=DjangoJSONEncoder)
+        current_instance = json.dumps(
+            IssueLinkSerializer(issue_link).data,
+            cls=DjangoJSONEncoder,
+        )
+        serializer = IssueLinkSerializer(issue_link, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="link.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=current_instance,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        issue_link = IssueLink.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        current_instance = json.dumps(
+            IssueLinkSerializer(issue_link).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_activity.delay(
+            type="link.activity.deleted",
+            requested_data=json.dumps({"link_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_link.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class BulkCreateIssueLabelsEndpoint(BaseAPIView):
     def post(self, request, slug, project_id):
-        try:
-            label_data = request.data.get("label_data", [])
-            project = Project.objects.get(pk=project_id)
+        label_data = request.data.get("label_data", [])
+        project = Project.objects.get(pk=project_id)
 
-            labels = Label.objects.bulk_create(
-                [
-                    Label(
-                        name=label.get("name", "Migrated"),
-                        description=label.get("description", "Migrated Issue"),
-                        color="#" + "%06x" % random.randint(0, 0xFFFFFF),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for label in label_data
-                ],
-                batch_size=50,
-                ignore_conflicts=True,
-            )
+        labels = Label.objects.bulk_create(
+            [
+                Label(
+                    name=label.get("name", "Migrated"),
+                    description=label.get("description", "Migrated Issue"),
+                    color="#" + "%06x" % random.randint(0, 0xFFFFFF),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for label in label_data
+            ],
+            batch_size=50,
+            ignore_conflicts=True,
+        )
 
-            return Response(
-                {"labels": LabelSerializer(labels, many=True).data},
-                status=status.HTTP_201_CREATED,
-            )
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {"labels": LabelSerializer(labels, many=True).data},
+            status=status.HTTP_201_CREATED,
+        )
 
 
 class IssueAttachmentEndpoint(BaseAPIView):
@@ -1014,66 +1012,46 @@ class IssueAttachmentEndpoint(BaseAPIView):
     parser_classes = (MultiPartParser, FormParser)
 
     def post(self, request, slug, project_id, issue_id):
-        try:
-            serializer = IssueAttachmentSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(project_id=project_id, issue_id=issue_id)
-                issue_activity.delay(
-                    type="attachment.activity.created",
-                    requested_data=None,
-                    actor_id=str(self.request.user.id),
-                    issue_id=str(self.kwargs.get("issue_id", None)),
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=json.dumps(
-                        serializer.data,
-                        cls=DjangoJSONEncoder,
-                    ),
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-    def delete(self, request, slug, project_id, issue_id, pk):
-        try:
-            issue_attachment = IssueAttachment.objects.get(pk=pk)
-            issue_attachment.asset.delete(save=False)
-            issue_attachment.delete()
+        serializer = IssueAttachmentSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(project_id=project_id, issue_id=issue_id)
             issue_activity.delay(
-                type="attachment.activity.deleted",
+                type="attachment.activity.created",
                 requested_data=None,
                 actor_id=str(self.request.user.id),
                 issue_id=str(self.kwargs.get("issue_id", None)),
                 project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                current_instance=json.dumps(
+                    serializer.data,
+                    cls=DjangoJSONEncoder,
+                ),
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueAttachment.DoesNotExist:
-            return Response(
-                {"error": "Issue Attachment does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def delete(self, request, slug, project_id, issue_id, pk):
+        issue_attachment = IssueAttachment.objects.get(pk=pk)
+        issue_attachment.asset.delete(save=False)
+        issue_attachment.delete()
+        issue_activity.delay(
+            type="attachment.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
     def get(self, request, slug, project_id, issue_id):
-        try:
-            issue_attachments = IssueAttachment.objects.filter(
-                issue_id=issue_id, workspace__slug=slug, project_id=project_id
-            )
-            serilaizer = IssueAttachmentSerializer(issue_attachments, many=True)
-            return Response(serilaizer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_attachments = IssueAttachment.objects.filter(
+            issue_id=issue_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = IssueAttachmentSerializer(issue_attachments, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class IssueArchiveViewSet(BaseViewSet):
@@ -1104,170 +1082,136 @@ class IssueArchiveViewSet(BaseViewSet):
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            show_sub_issues = request.GET.get("show_sub_issues", "true")
+        filters = issue_filters(request.query_params, "GET")
+        show_sub_issues = request.GET.get("show_sub_issues", "true")
 
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            issue_queryset = (
-                self.get_queryset()
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
-                )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issue_queryset = (
-                issue_queryset
-                if show_sub_issues == "true"
-                else issue_queryset.filter(parent__isnull=True)
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+        )
 
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
-                )
-
-            return Response(issues, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
             )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
+                )
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
+                )
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
+                )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+
+        issue_queryset = (
+            issue_queryset
+            if show_sub_issues == "true"
+            else issue_queryset.filter(parent__isnull=True)
+        )
+
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            return Response(group_results(issues, group_by), status=status.HTTP_200_OK)
+
+        return Response(issues, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                archived_at__isnull=False,
-                pk=pk,
-            )
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue = Issue.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            archived_at__isnull=False,
+            pk=pk,
+        )
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
     def unarchive(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                archived_at__isnull=False,
-                pk=pk,
-            )
-            issue.archived_at = None
-            issue.save()
-            issue_activity.delay(
-                type="issue.activity.updated",
-                requested_data=json.dumps({"archived_at": None}),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp())
-            )
+        issue = Issue.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            archived_at__isnull=False,
+            pk=pk,
+        )
+        issue_activity.delay(
+            type="issue.activity.updated",
+            requested_data=json.dumps({"archived_at": None}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue.id),
+            project_id=str(project_id),
+            current_instance=json.dumps(
+                IssueSerializer(issue).data, cls=DjangoJSONEncoder
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue.archived_at = None
+        issue.save()
 
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong, please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
 
 class IssueSubscriberViewSet(BaseViewSet):
@@ -1309,122 +1253,75 @@ class IssueSubscriberViewSet(BaseViewSet):
         )
 
     def list(self, request, slug, project_id, issue_id):
-        try:
-            members = (
-                ProjectMember.objects.filter(
-                    workspace__slug=slug, project_id=project_id
-                )
-                .annotate(
-                    is_subscribed=Exists(
-                        IssueSubscriber.objects.filter(
-                            workspace__slug=slug,
-                            project_id=project_id,
-                            issue_id=issue_id,
-                            subscriber=OuterRef("member"),
-                        )
+        members = (
+            ProjectMember.objects.filter(workspace__slug=slug, project_id=project_id)
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        issue_id=issue_id,
+                        subscriber=OuterRef("member"),
                     )
                 )
-                .select_related("member")
-            )
-            serializer = ProjectMemberLiteSerializer(members, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": e},
-                status=status.HTTP_400_BAD_REQUEST,
             )
+            .select_related("member")
+        )
+        serializer = ProjectMemberLiteSerializer(members, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, issue_id, subscriber_id):
-        try:
-            issue_subscriber = IssueSubscriber.objects.get(
-                project=project_id,
-                subscriber=subscriber_id,
-                workspace__slug=slug,
-                issue=issue_id,
-            )
-            issue_subscriber.delete()
-            return Response(
-                status=status.HTTP_204_NO_CONTENT,
-            )
-        except IssueSubscriber.DoesNotExist:
-            return Response(
-                {"error": "User is not subscribed to this issue"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_subscriber = IssueSubscriber.objects.get(
+            project=project_id,
+            subscriber=subscriber_id,
+            workspace__slug=slug,
+            issue=issue_id,
+        )
+        issue_subscriber.delete()
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
 
     def subscribe(self, request, slug, project_id, issue_id):
-        try:
-            if IssueSubscriber.objects.filter(
-                issue_id=issue_id,
-                subscriber=request.user,
-                workspace__slug=slug,
-                project=project_id,
-            ).exists():
-                return Response(
-                    {"message": "User already subscribed to the issue."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            subscriber = IssueSubscriber.objects.create(
-                issue_id=issue_id,
-                subscriber_id=request.user.id,
-                project_id=project_id,
-            )
-            serilaizer = IssueSubscriberSerializer(subscriber)
-            return Response(serilaizer.data, status=status.HTTP_201_CREATED)
-        except Exception as e:
-            capture_exception(e)
+        if IssueSubscriber.objects.filter(
+            issue_id=issue_id,
+            subscriber=request.user,
+            workspace__slug=slug,
+            project=project_id,
+        ).exists():
             return Response(
-                {"error": "Something went wrong, please try again later"},
+                {"message": "User already subscribed to the issue."},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        subscriber = IssueSubscriber.objects.create(
+            issue_id=issue_id,
+            subscriber_id=request.user.id,
+            project_id=project_id,
+        )
+        serializer = IssueSubscriberSerializer(subscriber)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
     def unsubscribe(self, request, slug, project_id, issue_id):
-        try:
-            issue_subscriber = IssueSubscriber.objects.get(
-                project=project_id,
-                subscriber=request.user,
-                workspace__slug=slug,
-                issue=issue_id,
-            )
-            issue_subscriber.delete()
-            return Response(
-                status=status.HTTP_204_NO_CONTENT,
-            )
-        except IssueSubscriber.DoesNotExist:
-            return Response(
-                {"error": "User subscribed to this issue"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_subscriber = IssueSubscriber.objects.get(
+            project=project_id,
+            subscriber=request.user,
+            workspace__slug=slug,
+            issue=issue_id,
+        )
+        issue_subscriber.delete()
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
 
     def subscription_status(self, request, slug, project_id, issue_id):
-        try:
-            issue_subscriber = IssueSubscriber.objects.filter(
-                issue=issue_id,
-                subscriber=request.user,
-                workspace__slug=slug,
-                project=project_id,
-            ).exists()
-            return Response({"subscribed": issue_subscriber}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong, please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_subscriber = IssueSubscriber.objects.filter(
+            issue=issue_id,
+            subscriber=request.user,
+            workspace__slug=slug,
+            project=project_id,
+        ).exists()
+        return Response({"subscribed": issue_subscriber}, status=status.HTTP_200_OK)
 
 
 class IssueReactionViewSet(BaseViewSet):
@@ -1446,58 +1343,50 @@ class IssueReactionViewSet(BaseViewSet):
             .distinct()
         )
 
-    def perform_create(self, serializer):
-        serializer.save(
-            issue_id=self.kwargs.get("issue_id"),
-            project_id=self.kwargs.get("project_id"),
-            actor=self.request.user,
-        )
-        issue_activity.delay(
-            type="issue_reaction.activity.created",
-            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("issue_id", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
-        )
-
-    def destroy(self, request, slug, project_id, issue_id, reaction_code):
-        try:
-            issue_reaction = IssueReaction.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
                 issue_id=issue_id,
-                reaction=reaction_code,
+                project_id=project_id,
                 actor=request.user,
             )
             issue_activity.delay(
-                type="issue_reaction.activity.deleted",
-                requested_data=None,
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "reaction": str(reaction_code),
-                        "identifier": str(issue_reaction.id),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-            issue_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueReaction.DoesNotExist:
-            return Response(
-                {"error": "Issue reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                type="issue_reaction.activity.created",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, reaction_code):
+        issue_reaction = IssueReaction.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            issue_id=issue_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="issue_reaction.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(issue_reaction.id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CommentReactionViewSet(BaseViewSet):
@@ -1519,59 +1408,51 @@ class CommentReactionViewSet(BaseViewSet):
             .distinct()
         )
 
-    def perform_create(self, serializer):
-        serializer.save(
-            actor=self.request.user,
-            comment_id=self.kwargs.get("comment_id"),
-            project_id=self.kwargs.get("project_id"),
+    def create(self, request, slug, project_id, comment_id):
+        serializer = CommentReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                actor_id=request.user.id,
+                comment_id=comment_id,
+            )
+            issue_activity.delay(
+                type="comment_reaction.activity.created",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=None,
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, comment_id, reaction_code):
+        comment_reaction = CommentReaction.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            comment_id=comment_id,
+            reaction=reaction_code,
+            actor=request.user,
         )
         issue_activity.delay(
-            type="comment_reaction.activity.created",
-            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            type="comment_reaction.activity.deleted",
+            requested_data=None,
             actor_id=str(self.request.user.id),
             issue_id=None,
             project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
+            current_instance=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(comment_reaction.id),
+                    "comment_id": str(comment_id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
         )
-
-    def destroy(self, request, slug, project_id, comment_id, reaction_code):
-        try:
-            comment_reaction = CommentReaction.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                comment_id=comment_id,
-                reaction=reaction_code,
-                actor=request.user,
-            )
-            issue_activity.delay(
-                type="comment_reaction.activity.deleted",
-                requested_data=None,
-                actor_id=str(self.request.user.id),
-                issue_id=None,
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "reaction": str(reaction_code),
-                        "identifier": str(comment_reaction.id),
-                        "comment_id": str(comment_id),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-            comment_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except CommentReaction.DoesNotExist:
-            return Response(
-                {"error": "Comment reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        comment_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class IssueCommentPublicViewSet(BaseViewSet):
@@ -1622,115 +1503,70 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     )
                     .distinct()
                 ).order_by("created_at")
-            else:
-                return IssueComment.objects.none()
+            return IssueComment.objects.none()
         except ProjectDeployBoard.DoesNotExist:
             return IssueComment.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
 
-            if not project_deploy_board.comments:
-                return Response(
-                    {"error": "Comments are not enabled for this project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = IssueCommentSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id,
-                    issue_id=issue_id,
-                    actor=request.user,
-                    access="EXTERNAL",
-                )
-                issue_activity.delay(
-                    type="comment.activity.created",
-                    requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(issue_id),
-                    project_id=str(project_id),
-                    current_instance=None,
-                    epoch=int(timezone.now().timestamp())
-                )
-                if not ProjectMember.objects.filter(
-                    project_id=project_id,
-                    member=request.user,
-                ).exists():
-                    # Add the user for workspace tracking
-                    _ = ProjectPublicMember.objects.get_or_create(
-                        project_id=project_id,
-                        member=request.user,
-                    )
-
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
+        if not project_deploy_board.comments:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Comments are not enabled for this project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def partial_update(self, request, slug, project_id, issue_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.comments:
-                return Response(
-                    {"error": "Comments are not enabled for this project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            comment = IssueComment.objects.get(
-                workspace__slug=slug, pk=pk, actor=request.user
-            )
-            serializer = IssueCommentSerializer(
-                comment, data=request.data, partial=True
-            )
-            if serializer.is_valid():
-                serializer.save()
-                issue_activity.delay(
-                    type="comment.activity.updated",
-                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(issue_id),
-                    project_id=str(project_id),
-                    current_instance=json.dumps(
-                        IssueCommentSerializer(comment).data,
-                        cls=DjangoJSONEncoder,
-                    ),
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except (IssueComment.DoesNotExist, ProjectDeployBoard.DoesNotExist):
-            return Response(
-                {"error": "IssueComent Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-    def destroy(self, request, slug, project_id, issue_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.comments:
-                return Response(
-                    {"error": "Comments are not enabled for this project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            comment = IssueComment.objects.get(
-                workspace__slug=slug, pk=pk, project_id=project_id, actor=request.user
+        serializer = IssueCommentSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                issue_id=issue_id,
+                actor=request.user,
+                access="EXTERNAL",
             )
             issue_activity.delay(
-                type="comment.activity.deleted",
-                requested_data=json.dumps({"comment_id": str(pk)}),
+                type="comment.activity.created",
+                requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            if not ProjectMember.objects.filter(
+                project_id=project_id,
+                member=request.user,
+            ).exists():
+                # Add the user for workspace tracking
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
+                )
+
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def partial_update(self, request, slug, project_id, issue_id, pk):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.comments:
+            return Response(
+                {"error": "Comments are not enabled for this project"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        comment = IssueComment.objects.get(
+            workspace__slug=slug, pk=pk, actor=request.user
+        )
+        serializer = IssueCommentSerializer(comment, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="comment.activity.updated",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
                 actor_id=str(request.user.id),
                 issue_id=str(issue_id),
                 project_id=str(project_id),
@@ -1738,21 +1574,38 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     IssueCommentSerializer(comment).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp()),
             )
-            comment.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except (IssueComment.DoesNotExist, ProjectDeployBoard.DoesNotExist):
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.comments:
             return Response(
-                {"error": "IssueComent Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Comments are not enabled for this project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        comment = IssueComment.objects.get(
+            workspace__slug=slug, pk=pk, project_id=project_id, actor=request.user
+        )
+        issue_activity.delay(
+            type="comment.activity.deleted",
+            requested_data=json.dumps({"comment_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=json.dumps(
+                IssueCommentSerializer(comment).data,
+                cls=DjangoJSONEncoder,
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        comment.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class IssueReactionPublicViewSet(BaseViewSet):
@@ -1775,104 +1628,79 @@ class IssueReactionPublicViewSet(BaseViewSet):
                     .order_by("-created_at")
                     .distinct()
                 )
-            else:
-                return IssueReaction.objects.none()
+            return IssueReaction.objects.none()
         except ProjectDeployBoard.DoesNotExist:
             return IssueReaction.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.reactions:
+            return Response(
+                {"error": "Reactions are not enabled for this project board"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this project board"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = IssueReactionSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id, issue_id=issue_id, actor=request.user
-                )
-                if not ProjectMember.objects.filter(
+        serializer = IssueReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id, issue_id=issue_id, actor=request.user
+            )
+            if not ProjectMember.objects.filter(
+                project_id=project_id,
+                member=request.user,
+            ).exists():
+                # Add the user for workspace tracking
+                _ = ProjectPublicMember.objects.get_or_create(
                     project_id=project_id,
                     member=request.user,
-                ).exists():
-                    # Add the user for workspace tracking
-                    _ = ProjectPublicMember.objects.get_or_create(
-                        project_id=project_id,
-                        member=request.user,
-                    )
-                issue_activity.delay(
-                    type="issue_reaction.activity.created",
-                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(self.request.user.id),
-                    issue_id=str(self.kwargs.get("issue_id", None)),
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=None,
-                    epoch=int(timezone.now().timestamp())
                 )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Project board does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-    def destroy(self, request, slug, project_id, issue_id, reaction_code):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this project board"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            issue_reaction = IssueReaction.objects.get(
-                workspace__slug=slug,
-                issue_id=issue_id,
-                reaction=reaction_code,
-                actor=request.user,
-            )
             issue_activity.delay(
-                type="issue_reaction.activity.deleted",
-                requested_data=None,
+                type="issue_reaction.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
                 actor_id=str(self.request.user.id),
                 issue_id=str(self.kwargs.get("issue_id", None)),
                 project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "reaction": str(reaction_code),
-                        "identifier": str(issue_reaction.id),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
-            issue_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueReaction.DoesNotExist:
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, reaction_code):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Issue reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this project board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        issue_reaction = IssueReaction.objects.get(
+            workspace__slug=slug,
+            issue_id=issue_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="issue_reaction.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(issue_reaction.id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CommentReactionPublicViewSet(BaseViewSet):
@@ -1895,111 +1723,81 @@ class CommentReactionPublicViewSet(BaseViewSet):
                     .order_by("-created_at")
                     .distinct()
                 )
-            else:
-                return CommentReaction.objects.none()
+            return CommentReaction.objects.none()
         except ProjectDeployBoard.DoesNotExist:
             return CommentReaction.objects.none()
 
     def create(self, request, slug, project_id, comment_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
 
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this board"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = CommentReactionSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id, comment_id=comment_id, actor=request.user
-                )
-                if not ProjectMember.objects.filter(
-                    project_id=project_id, member=request.user
-                ).exists():
-                    # Add the user for workspace tracking
-                    _ = ProjectPublicMember.objects.get_or_create(
-                        project_id=project_id,
-                        member=request.user,
-                    )
-                issue_activity.delay(
-                    type="comment_reaction.activity.created",
-                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(self.request.user.id),
-                    issue_id=None,
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=None,
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IssueComment.DoesNotExist:
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Comment does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Project board does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, slug, project_id, comment_id, reaction_code):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
+        serializer = CommentReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id, comment_id=comment_id, actor=request.user
             )
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this board"},
-                    status=status.HTTP_400_BAD_REQUEST,
+            if not ProjectMember.objects.filter(
+                project_id=project_id, member=request.user
+            ).exists():
+                # Add the user for workspace tracking
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
                 )
-
-            comment_reaction = CommentReaction.objects.get(
-                project_id=project_id,
-                workspace__slug=slug,
-                comment_id=comment_id,
-                reaction=reaction_code,
-                actor=request.user,
-            )
             issue_activity.delay(
-                type="comment_reaction.activity.deleted",
-                requested_data=None,
+                type="comment_reaction.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
                 actor_id=str(self.request.user.id),
                 issue_id=None,
                 project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "reaction": str(reaction_code),
-                        "identifier": str(comment_reaction.id),
-                        "comment_id": str(comment_id),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
-            comment_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except CommentReaction.DoesNotExist:
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, comment_id, reaction_code):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Comment reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        comment_reaction = CommentReaction.objects.get(
+            project_id=project_id,
+            workspace__slug=slug,
+            comment_id=comment_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="comment_reaction.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(comment_reaction.id),
+                    "comment_id": str(comment_id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        comment_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class IssueVotePublicViewSet(BaseViewSet):
     model = IssueVote
@@ -2019,80 +1817,61 @@ class IssueVotePublicViewSet(BaseViewSet):
                     .filter(workspace__slug=self.kwargs.get("slug"))
                     .filter(project_id=self.kwargs.get("project_id"))
                 )
-            else:
-                return IssueVote.objects.none()
+            return IssueVote.objects.none()
         except ProjectDeployBoard.DoesNotExist:
             return IssueVote.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
-        try:
-            issue_vote, _ = IssueVote.objects.get_or_create(
-                actor_id=request.user.id,
+        issue_vote, _ = IssueVote.objects.get_or_create(
+            actor_id=request.user.id,
+            project_id=project_id,
+            issue_id=issue_id,
+        )
+        # Add the user for workspace tracking
+        if not ProjectMember.objects.filter(
+            project_id=project_id, member=request.user
+        ).exists():
+            _ = ProjectPublicMember.objects.get_or_create(
                 project_id=project_id,
-                issue_id=issue_id,
-            )
-            # Add the user for workspace tracking
-            if not ProjectMember.objects.filter(
-                project_id=project_id, member=request.user
-            ).exists():
-                _ = ProjectPublicMember.objects.get_or_create(
-                    project_id=project_id,
-                    member=request.user,
-                )
-            issue_vote.vote = request.data.get("vote", 1)
-            issue_vote.save()
-            issue_activity.delay(
-                type="issue_vote.activity.created",
-                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp())
-            )
-            serializer = IssueVoteSerializer(issue_vote)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except IntegrityError:
-            return Response(
-                {"error": "Reaction already exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                member=request.user,
             )
+        issue_vote.vote = request.data.get("vote", 1)
+        issue_vote.save()
+        issue_activity.delay(
+            type="issue_vote.activity.created",
+            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        serializer = IssueVoteSerializer(issue_vote)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
     def destroy(self, request, slug, project_id, issue_id):
-        try:
-            issue_vote = IssueVote.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                issue_id=issue_id,
-                actor_id=request.user.id,
-            )
-            issue_activity.delay(
-                type="issue_vote.activity.deleted",
-                requested_data=None,
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "vote": str(issue_vote.vote),
-                        "identifier": str(issue_vote.id),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-            issue_vote.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_vote = IssueVote.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            issue_id=issue_id,
+            actor_id=request.user.id,
+        )
+        issue_activity.delay(
+            type="issue_vote.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "vote": str(issue_vote.vote),
+                    "identifier": str(issue_vote.id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_vote.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class IssueRelationViewSet(BaseViewSet):
@@ -2102,87 +1881,6 @@ class IssueRelationViewSet(BaseViewSet):
         ProjectEntityPermission,
     ]
 
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="issue_relation.activity.deleted",
-                requested_data=json.dumps({"related_list": None}),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("issue_id", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueRelationSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-        return super().perform_destroy(instance)
-
-    def create(self, request, slug, project_id, issue_id):
-        try:
-            related_list = request.data.get("related_list", [])
-            relation = request.data.get("relation", None)
-            project = Project.objects.get(pk=project_id)
-
-            issue_relation = IssueRelation.objects.bulk_create(
-                [
-                    IssueRelation(
-                        issue_id=related_issue["issue"],
-                        related_issue_id=related_issue["related_issue"],
-                        relation_type=related_issue["relation_type"],
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for related_issue in related_list
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
-            )
-
-            issue_activity.delay(
-                type="issue_relation.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=str(issue_id),
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp())
-            )
-            
-            if relation == "blocking":
-                return Response(
-                    RelatedIssueSerializer(issue_relation, many=True).data,
-                    status=status.HTTP_201_CREATED,
-                )
-            else:
-                return Response(
-                    IssueRelationSerializer(issue_relation, many=True).data,
-                    status=status.HTTP_201_CREATED,
-                )
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"name": "The issue is already taken"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -2197,6 +1895,69 @@ class IssueRelationViewSet(BaseViewSet):
             .distinct()
         )
 
+    def create(self, request, slug, project_id, issue_id):
+        related_list = request.data.get("related_list", [])
+        relation = request.data.get("relation", None)
+        project = Project.objects.get(pk=project_id)
+
+        issue_relation = IssueRelation.objects.bulk_create(
+            [
+                IssueRelation(
+                    issue_id=related_issue["issue"],
+                    related_issue_id=related_issue["related_issue"],
+                    relation_type=related_issue["relation_type"],
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for related_issue in related_list
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        issue_activity.delay(
+            type="issue_relation.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+
+        if relation == "blocking":
+            return Response(
+                RelatedIssueSerializer(issue_relation, many=True).data,
+                status=status.HTTP_201_CREATED,
+            )
+        else:
+            return Response(
+                IssueRelationSerializer(issue_relation, many=True).data,
+                status=status.HTTP_201_CREATED,
+            )
+
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        issue_relation = IssueRelation.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        current_instance = json.dumps(
+            IssueRelationSerializer(issue_relation).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_relation.delete()
+        issue_activity.delay(
+            type="issue_relation.activity.deleted",
+            requested_data=json.dumps({"related_list": None}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class IssueRetrievePublicEndpoint(BaseAPIView):
     permission_classes = [
@@ -2204,22 +1965,11 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id, issue_id):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=issue_id
-            )
-            serializer = IssuePublicSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            print(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue = Issue.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=issue_id
+        )
+        serializer = IssuePublicSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class ProjectIssuesPublicEndpoint(BaseAPIView):
@@ -2228,176 +1978,161 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        filters = issue_filters(request.query_params, "GET")
+
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+        order_by_param = request.GET.get("order_by", "-created_at")
+
+        issue_queryset = (
+            Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-
-            filters = issue_filters(request.query_params, "GET")
-
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
-
-            order_by_param = request.GET.get("order_by", "-created_at")
-
-            issue_queryset = (
-                Issue.issue_objects.annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project", "workspace", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "votes",
-                        queryset=IssueVote.objects.select_related("actor"),
-                    )
-                )
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .select_related("project", "workspace", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
             )
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+            .prefetch_related(
+                Prefetch(
+                    "votes",
+                    queryset=IssueVote.objects.select_related("actor"),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
-                )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssuePublicSerializer(issue_queryset, many=True).data
-
-            state_group_order = [
-                "backlog",
-                "unstarted",
-                "started",
-                "completed",
-                "cancelled",
-            ]
-
-            states = (
-                State.objects.filter(
-                    ~Q(name="Triage"),
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(
-                    custom_order=Case(
-                        *[
-                            When(group=value, then=Value(index))
-                            for index, value in enumerate(state_group_order)
-                        ],
-                        default=Value(len(state_group_order)),
-                        output_field=IntegerField(),
-                    ),
-                )
-                .values("name", "group", "color", "id")
-                .order_by("custom_order", "sequence")
             )
-
-            labels = Label.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("id", "name", "color", "parent")
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                issues = group_results(issues, group_by)
-
-            return Response(
-                {
-                    "issues": issues,
-                    "states": states,
-                    "labels": labels,
-                },
-                status=status.HTTP_200_OK,
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Board does not exists"}, status=status.HTTP_404_NOT_FOUND
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        )
+
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
             )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
+                )
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
+                )
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
+                )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+
+        issues = IssuePublicSerializer(issue_queryset, many=True).data
+
+        state_group_order = [
+            "backlog",
+            "unstarted",
+            "started",
+            "completed",
+            "cancelled",
+        ]
+
+        states = (
+            State.objects.filter(
+                ~Q(name="Triage"),
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(
+                custom_order=Case(
+                    *[
+                        When(group=value, then=Value(index))
+                        for index, value in enumerate(state_group_order)
+                    ],
+                    default=Value(len(state_group_order)),
+                    output_field=IntegerField(),
+                ),
+            )
+            .values("name", "group", "color", "id")
+            .order_by("custom_order", "sequence")
+        )
+
+        labels = Label.objects.filter(
+            workspace__slug=slug, project_id=project_id
+        ).values("id", "name", "color", "parent")
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            issues = group_results(issues, group_by)
+
+        return Response(
+            {
+                "issues": issues,
+                "states": states,
+                "labels": labels,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class IssueDraftViewSet(BaseViewSet):
@@ -2406,28 +2141,6 @@ class IssueDraftViewSet(BaseViewSet):
     ]
     serializer_class = IssueFlatSerializer
     model = Issue
-    
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="issue_draft.activity.deleted",
-                requested_data=json.dumps(
-                    {"issue_id": str(self.kwargs.get("pk", None))}
-                ),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
-        return super().perform_destroy(instance)
-
 
     def get_queryset(self):
         return (
@@ -2454,200 +2167,177 @@ class IssueDraftViewSet(BaseViewSet):
             )
         )
 
-
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            issue_queryset = (
-                self.get_queryset()
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
 
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
+            ).order_by("priority_order")
 
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
 
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
-                )
-
-            return Response(issues, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            grouped_results = group_results(issues, group_by)
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                grouped_results,
+                status=status.HTTP_200_OK,
             )
 
+        return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(pk=project_id)
+        project = Project.objects.get(pk=project_id)
 
-            serializer = IssueCreateSerializer(
-                data=request.data,
-                context={
-                    "project_id": project_id,
-                    "workspace_id": project.workspace_id,
-                    "default_assignee_id": project.default_assignee_id,
-                },
+        serializer = IssueCreateSerializer(
+            data=request.data,
+            context={
+                "project_id": project_id,
+                "workspace_id": project.workspace_id,
+                "default_assignee_id": project.default_assignee_id,
+            },
+        )
+
+        if serializer.is_valid():
+            serializer.save(is_draft=True)
+
+            # Track the issue
+            issue_activity.delay(
+                type="issue_draft.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(serializer.data.get("id", None)),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
-
-            if serializer.is_valid():
-                serializer.save(is_draft=True)
-
-                # Track the issue
-                issue_activity.delay(
-                    type="issue_draft.activity.created",
-                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(serializer.data.get("id", None)),
-                    project_id=str(project_id),
-                    current_instance=None,
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project was not found"}, status=status.HTTP_404_NOT_FOUND
-            )
-
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, slug, project_id, pk):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            serializer = IssueSerializer(
-                issue, data=request.data, partial=True
-            )
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        serializer = IssueSerializer(issue, data=request.data, partial=True)
 
-            if serializer.is_valid():
-                if(request.data.get("is_draft") is not None and not request.data.get("is_draft")):
-                    serializer.save(created_at=timezone.now(), updated_at=timezone.now())
-                else:
-                    serializer.save()
-                issue_activity.delay(
-                    type="issue_draft.activity.updated",
-                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(self.request.user.id),
-                    issue_id=str(self.kwargs.get("pk", None)),
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=json.dumps(
-                        IssueSerializer(issue).data,
-                        cls=DjangoJSONEncoder,
-                    ),
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
+        if serializer.is_valid():
+            if request.data.get("is_draft") is not None and not request.data.get(
+                "is_draft"
+            ):
+                serializer.save(created_at=timezone.now(), updated_at=timezone.now())
+            else:
+                serializer.save()
+            issue_activity.delay(
+                type="issue_draft.activity.updated",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("pk", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    IssueSerializer(issue).data,
+                    cls=DjangoJSONEncoder,
+                ),
+                epoch=int(timezone.now().timestamp()),
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk, is_draft=True
-            )
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-    
+        issue = Issue.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk, is_draft=True
+        )
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+
+    def destroy(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        current_instance = json.dumps(
+            IssueSerializer(issue).data, cls=DjangoJSONEncoder
+        )
+        issue.delete()
+        issue_activity.delay(
+            type="issue_draft.activity.deleted",
+            requested_data=json.dumps({"issue_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 1489edb2d..6c2088922 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -55,7 +55,6 @@ class ModuleViewSet(BaseViewSet):
         )
 
     def get_queryset(self):
-        order_by = self.request.GET.get("order_by", "sort_order")
 
         subquery = ModuleFavorite.objects.filter(
             user=self.request.user,
@@ -138,176 +137,151 @@ class ModuleViewSet(BaseViewSet):
                     ),
                 )
             )
-            .order_by(order_by, "name")
+            .order_by("-is_favorite","-created_at")
         )
 
-    def perform_destroy(self, instance):
-        module_issues = list(
-            ModuleIssue.objects.filter(module_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
+    def create(self, request, slug, project_id):
+        project = Project.objects.get(workspace__slug=slug, pk=project_id)
+        serializer = ModuleWriteSerializer(
+            data=request.data, context={"project": project}
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+
+            module = Module.objects.get(pk=serializer.data["id"])
+            serializer = ModuleSerializer(module)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def retrieve(self, request, slug, project_id, pk):
+        queryset = self.get_queryset().get(pk=pk)
+
+        assignee_distribution = (
+            Issue.objects.filter(
+                issue_module__module_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
             )
+            .annotate(first_name=F("assignees__first_name"))
+            .annotate(last_name=F("assignees__last_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(display_name=F("assignees__display_name"))
+            .annotate(avatar=F("assignees__avatar"))
+            .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
+            .annotate(
+                total_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                completed_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .order_by("first_name", "last_name")
+        )
+
+        label_distribution = (
+            Issue.objects.filter(
+                issue_module__module_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(label_name=F("labels__name"))
+            .annotate(color=F("labels__color"))
+            .annotate(label_id=F("labels__id"))
+            .values("label_name", "color", "label_id")
+            .annotate(
+                total_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .order_by("label_name")
+        )
+
+        data = ModuleSerializer(queryset).data
+        data["distribution"] = {
+            "assignees": assignee_distribution,
+            "labels": label_distribution,
+            "completion_chart": {},
+        }
+
+        if queryset.start_date and queryset.target_date:
+            data["distribution"]["completion_chart"] = burndown_plot(
+                queryset=queryset, slug=slug, project_id=project_id, module_id=pk
+            )
+
+        return Response(
+            data,
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, project_id, pk):
+        module = Module.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        module_issues = list(
+            ModuleIssue.objects.filter(module_id=pk).values_list("issue", flat=True)
         )
         issue_activity.delay(
             type="module.activity.deleted",
             requested_data=json.dumps(
                 {
-                    "module_id": str(self.kwargs.get("pk")),
+                    "module_id": str(pk),
+                    "module_name": str(module.name),
                     "issues": [str(issue_id) for issue_id in module_issues],
                 }
             ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
             current_instance=None,
-            epoch=int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp()),
         )
-
-        return super().perform_destroy(instance)
-
-    def create(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(workspace__slug=slug, pk=project_id)
-            serializer = ModuleWriteSerializer(
-                data=request.data, context={"project": project}
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project was not found"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"name": "The module name is already taken"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-    def retrieve(self, request, slug, project_id, pk):
-        try:
-            queryset = self.get_queryset().get(pk=pk)
-
-            assignee_distribution = (
-                Issue.objects.filter(
-                    issue_module__module_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(first_name=F("assignees__first_name"))
-                .annotate(last_name=F("assignees__last_name"))
-                .annotate(assignee_id=F("assignees__id"))
-                .annotate(display_name=F("assignees__display_name"))
-                .annotate(avatar=F("assignees__avatar"))
-                .values(
-                    "first_name", "last_name", "assignee_id", "avatar", "display_name"
-                )
-                .annotate(
-                    total_issues=Count(
-                        "assignee_id",
-                        filter=Q(
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .annotate(
-                    completed_issues=Count(
-                        "assignee_id",
-                        filter=Q(
-                            completed_at__isnull=False,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .annotate(
-                    pending_issues=Count(
-                        "assignee_id",
-                        filter=Q(
-                            completed_at__isnull=True,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .order_by("first_name", "last_name")
-            )
-
-            label_distribution = (
-                Issue.objects.filter(
-                    issue_module__module_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(label_name=F("labels__name"))
-                .annotate(color=F("labels__color"))
-                .annotate(label_id=F("labels__id"))
-                .values("label_name", "color", "label_id")
-                .annotate(
-                    total_issues=Count(
-                        "label_id",
-                        filter=Q(
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    ),
-                )
-                .annotate(
-                    completed_issues=Count(
-                        "label_id",
-                        filter=Q(
-                            completed_at__isnull=False,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .annotate(
-                    pending_issues=Count(
-                        "label_id",
-                        filter=Q(
-                            completed_at__isnull=True,
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-                )
-                .order_by("label_name")
-            )
-
-            data = ModuleSerializer(queryset).data
-            data["distribution"] = {
-                "assignees": assignee_distribution,
-                "labels": label_distribution,
-                "completion_chart": {},
-            }
-
-            if queryset.start_date and queryset.target_date:
-                data["distribution"]["completion_chart"] = burndown_plot(
-                    queryset=queryset, slug=slug, project_id=project_id, module_id=pk
-                )
-
-            return Response(
-                data,
-                status=status.HTTP_200_OK,
-            )
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        module.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ModuleIssueViewSet(BaseViewSet):
@@ -323,29 +297,6 @@ class ModuleIssueViewSet(BaseViewSet):
         ProjectEntityPermission,
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            module_id=self.kwargs.get("module_id"),
-        )
-
-    def perform_destroy(self, instance):
-        issue_activity.delay(
-            type="module.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "module_id": str(self.kwargs.get("module_id")),
-                    "issues": [str(instance.issue_id)],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp())
-        )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -371,162 +322,162 @@ class ModuleIssueViewSet(BaseViewSet):
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id, module_id):
-        try:
-            order_by = request.GET.get("order_by", "created_at")
-            group_by = request.GET.get("group_by", False)
-            sub_group_by = request.GET.get("sub_group_by", False)
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.issue_objects.filter(issue_module__module_id=module_id)
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(bridge_id=F("issue_module__id"))
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .order_by(order_by)
-                .filter(**filters)
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        order_by = request.GET.get("order_by", "created_at")
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.issue_objects.filter(issue_module__module_id=module_id)
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-
-            issues_data = IssueStateSerializer(issues, many=True).data
-
-            if sub_group_by and sub_group_by == group_by:
-                return Response(
-                    {"error": "Group by and sub group by cannot be same"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if group_by:
-                return Response(
-                    group_results(issues_data, group_by, sub_group_by),
-                    status=status.HTTP_200_OK,
-                )
-
-            return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
+            .annotate(bridge_id=F("issue_module__id"))
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(order_by)
+            .filter(**filters)
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-        except Exception as e:
-            capture_exception(e)
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
+        issues_data = IssueStateSerializer(issues, many=True).data
+
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Group by and sub group by cannot be same"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if group_by:
+            grouped_results = group_results(issues_data, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(
+            issues_data, status=status.HTTP_200_OK
+        )
+
     def create(self, request, slug, project_id, module_id):
-        try:
-            issues = request.data.get("issues", [])
-            if not len(issues):
-                return Response(
-                    {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-            module = Module.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=module_id
+        issues = request.data.get("issues", [])
+        if not len(issues):
+            return Response(
+                {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
             )
+        module = Module.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=module_id
+        )
 
-            module_issues = list(ModuleIssue.objects.filter(issue_id__in=issues))
+        module_issues = list(ModuleIssue.objects.filter(issue_id__in=issues))
 
-            update_module_issue_activity = []
-            records_to_update = []
-            record_to_create = []
+        update_module_issue_activity = []
+        records_to_update = []
+        record_to_create = []
 
-            for issue in issues:
-                module_issue = [
-                    module_issue
-                    for module_issue in module_issues
-                    if str(module_issue.issue_id) in issues
-                ]
+        for issue in issues:
+            module_issue = [
+                module_issue
+                for module_issue in module_issues
+                if str(module_issue.issue_id) in issues
+            ]
 
-                if len(module_issue):
-                    if module_issue[0].module_id != module_id:
-                        update_module_issue_activity.append(
-                            {
-                                "old_module_id": str(module_issue[0].module_id),
-                                "new_module_id": str(module_id),
-                                "issue_id": str(module_issue[0].issue_id),
-                            }
-                        )
-                        module_issue[0].module_id = module_id
-                        records_to_update.append(module_issue[0])
-                else:
-                    record_to_create.append(
-                        ModuleIssue(
-                            module=module,
-                            issue_id=issue,
-                            project_id=project_id,
-                            workspace=module.workspace,
-                            created_by=request.user,
-                            updated_by=request.user,
-                        )
+            if len(module_issue):
+                if module_issue[0].module_id != module_id:
+                    update_module_issue_activity.append(
+                        {
+                            "old_module_id": str(module_issue[0].module_id),
+                            "new_module_id": str(module_id),
+                            "issue_id": str(module_issue[0].issue_id),
+                        }
                     )
+                    module_issue[0].module_id = module_id
+                    records_to_update.append(module_issue[0])
+            else:
+                record_to_create.append(
+                    ModuleIssue(
+                        module=module,
+                        issue_id=issue,
+                        project_id=project_id,
+                        workspace=module.workspace,
+                        created_by=request.user,
+                        updated_by=request.user,
+                    )
+                )
 
-            ModuleIssue.objects.bulk_create(
-                record_to_create,
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+        ModuleIssue.objects.bulk_create(
+            record_to_create,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
 
-            ModuleIssue.objects.bulk_update(
-                records_to_update,
-                ["module"],
-                batch_size=10,
-            )
+        ModuleIssue.objects.bulk_update(
+            records_to_update,
+            ["module"],
+            batch_size=10,
+        )
 
-            # Capture Issue Activity
-            issue_activity.delay(
-                type="module.activity.created",
-                requested_data=json.dumps({"modules_list": issues}),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "updated_module_issues": update_module_issue_activity,
-                        "created_module_issues": serializers.serialize(
-                            "json", record_to_create
-                        ),
-                    }
-                ),
-                epoch=int(timezone.now().timestamp())
-            )
+        # Capture Issue Activity
+        issue_activity.delay(
+            type="module.activity.created",
+            requested_data=json.dumps({"modules_list": issues}),
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "updated_module_issues": update_module_issue_activity,
+                    "created_module_issues": serializers.serialize(
+                        "json", record_to_create
+                    ),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
 
-            return Response(
-                ModuleIssueSerializer(self.get_queryset(), many=True).data,
-                status=status.HTTP_200_OK,
-            )
-        except Module.DoesNotExist:
-            return Response(
-                {"error": "Module Does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            ModuleIssueSerializer(self.get_queryset(), many=True).data,
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, project_id, module_id, pk):
+        module_issue = ModuleIssue.objects.get(
+            workspace__slug=slug, project_id=project_id, module_id=module_id, pk=pk
+        )
+        module_issue.delete()
+        issue_activity.delay(
+            type="module.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "module_id": str(module_id),
+                    "issues": [str(module_issue.issue_id)],
+                }
+            ),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ModuleLinkViewSet(BaseViewSet):
@@ -570,49 +521,18 @@ class ModuleFavoriteViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = ModuleFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The module is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = ModuleFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, module_id):
-        try:
-            module_favorite = ModuleFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                module_id=module_id,
-            )
-            module_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ModuleFavorite.DoesNotExist:
-            return Response(
-                {"error": "Module is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        module_favorite = ModuleFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            module_id=module_id,
+        )
+        module_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/notification.py b/apiserver/plane/api/views/notification.py
index 75b94f034..978c01bac 100644
--- a/apiserver/plane/api/views/notification.py
+++ b/apiserver/plane/api/views/notification.py
@@ -36,328 +36,239 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         )
 
     def list(self, request, slug):
-        try:
-            snoozed = request.GET.get("snoozed", "false")
-            archived = request.GET.get("archived", "false")
-            read = request.GET.get("read", "true")
+        # Get query parameters
+        snoozed = request.GET.get("snoozed", "false")
+        archived = request.GET.get("archived", "false")
+        read = request.GET.get("read", "true")
+        type = request.GET.get("type", "all")
 
-            # Filter type
-            type = request.GET.get("type", "all")
-
-            notifications = (
-                Notification.objects.filter(
-                    workspace__slug=slug, receiver_id=request.user.id
-                )
-                .select_related("workspace", "project", "triggered_by", "receiver")
-                .order_by("snoozed_till", "-created_at")
+        notifications = (
+            Notification.objects.filter(
+                workspace__slug=slug, receiver_id=request.user.id
             )
+            .select_related("workspace", "project", "triggered_by", "receiver")
+            .order_by("snoozed_till", "-created_at")
+        )
 
-            # Filter for snoozed notifications
-            if snoozed == "false":
-                notifications = notifications.filter(
-                    Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
-                )
+        # Filters based on query parameters
+        snoozed_filters = {
+            "true": Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False),
+            "false": Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
+        }
 
-            if snoozed == "true":
-                notifications = notifications.filter(
-                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
-                )
+        notifications = notifications.filter(snoozed_filters[snoozed])
 
-            if read == "false":
-                notifications = notifications.filter(read_at__isnull=True)
+        archived_filters = {
+            "true": Q(archived_at__isnull=False),
+            "false": Q(archived_at__isnull=True),
+        }
 
-            # Filter for archived or unarchive
-            if archived == "false":
-                notifications = notifications.filter(archived_at__isnull=True)
+        notifications = notifications.filter(archived_filters[archived])
 
-            if archived == "true":
-                notifications = notifications.filter(archived_at__isnull=False)
+        if read == "false":
+            notifications = notifications.filter(read_at__isnull=True)
 
-            # Subscribed issues
-            if type == "watching":
-                issue_ids = IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subscriber_id=request.user.id
-                ).values_list("issue_id", flat=True)
+        # Subscribed issues
+        if type == "watching":
+            issue_ids = IssueSubscriber.objects.filter(
+                workspace__slug=slug, subscriber_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Assigned Issues
+        if type == "assigned":
+            issue_ids = IssueAssignee.objects.filter(
+                workspace__slug=slug, assignee_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Created issues
+        if type == "created":
+            if WorkspaceMember.objects.filter(
+                workspace__slug=slug, member=request.user, role__lt=15
+            ).exists():
+                notifications = Notification.objects.none()
+            else:
+                issue_ids = Issue.objects.filter(
+                    workspace__slug=slug, created_by=request.user
+                ).values_list("pk", flat=True)
                 notifications = notifications.filter(entity_identifier__in=issue_ids)
 
-            # Assigned Issues
-            if type == "assigned":
-                issue_ids = IssueAssignee.objects.filter(
-                    workspace__slug=slug, assignee_id=request.user.id
-                ).values_list("issue_id", flat=True)
-                notifications = notifications.filter(entity_identifier__in=issue_ids)
-
-            # Created issues
-            if type == "created":
-                if WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member=request.user, role__lt=15
-                ).exists():
-                    notifications = Notification.objects.none()
-                else:
-                    issue_ids = Issue.objects.filter(
-                        workspace__slug=slug, created_by=request.user
-                    ).values_list("pk", flat=True)
-                    notifications = notifications.filter(
-                        entity_identifier__in=issue_ids
-                    )
-
-            # Pagination
-            if request.GET.get("per_page", False) and request.GET.get("cursor", False):
-                return self.paginate(
-                    request=request,
-                    queryset=(notifications),
-                    on_results=lambda notifications: NotificationSerializer(
-                        notifications, many=True
-                    ).data,
-                )
-
-            serializer = NotificationSerializer(notifications, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        # Pagination
+        if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+            return self.paginate(
+                request=request,
+                queryset=(notifications),
+                on_results=lambda notifications: NotificationSerializer(
+                    notifications, many=True
+                ).data,
             )
 
+        serializer = NotificationSerializer(notifications, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     def partial_update(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                workspace__slug=slug, pk=pk, receiver=request.user
-            )
-            # Only read_at and snoozed_till can be updated
-            notification_data = {
-                "snoozed_till": request.data.get("snoozed_till", None),
-            }
-            serializer = NotificationSerializer(
-                notification, data=notification_data, partial=True
-            )
+        notification = Notification.objects.get(
+            workspace__slug=slug, pk=pk, receiver=request.user
+        )
+        # Only read_at and snoozed_till can be updated
+        notification_data = {
+            "snoozed_till": request.data.get("snoozed_till", None),
+        }
+        serializer = NotificationSerializer(
+            notification, data=notification_data, partial=True
+        )
 
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def mark_read(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.read_at = timezone.now()
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.read_at = timezone.now()
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def mark_unread(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.read_at = None
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.read_at = None
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def archive(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.archived_at = timezone.now()
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.archived_at = timezone.now()
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def unarchive(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.archived_at = None
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.archived_at = None
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class UnreadNotificationEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            # Watching Issues Count
-            watching_issues_count = Notification.objects.filter(
-                workspace__slug=slug,
-                receiver_id=request.user.id,
-                read_at__isnull=True,
-                archived_at__isnull=True,
-                entity_identifier__in=IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subscriber_id=request.user.id
-                ).values_list("issue_id", flat=True),
-            ).count()
+        # Watching Issues Count
+        watching_issues_count = Notification.objects.filter(
+            workspace__slug=slug,
+            receiver_id=request.user.id,
+            read_at__isnull=True,
+            archived_at__isnull=True,
+            entity_identifier__in=IssueSubscriber.objects.filter(
+                workspace__slug=slug, subscriber_id=request.user.id
+            ).values_list("issue_id", flat=True),
+        ).count()
 
-            # My Issues Count
-            my_issues_count = Notification.objects.filter(
-                workspace__slug=slug,
-                receiver_id=request.user.id,
-                read_at__isnull=True,
-                archived_at__isnull=True,
-                entity_identifier__in=IssueAssignee.objects.filter(
-                    workspace__slug=slug, assignee_id=request.user.id
-                ).values_list("issue_id", flat=True),
-            ).count()
+        # My Issues Count
+        my_issues_count = Notification.objects.filter(
+            workspace__slug=slug,
+            receiver_id=request.user.id,
+            read_at__isnull=True,
+            archived_at__isnull=True,
+            entity_identifier__in=IssueAssignee.objects.filter(
+                workspace__slug=slug, assignee_id=request.user.id
+            ).values_list("issue_id", flat=True),
+        ).count()
 
-            # Created Issues Count
-            created_issues_count = Notification.objects.filter(
-                workspace__slug=slug,
-                receiver_id=request.user.id,
-                read_at__isnull=True,
-                archived_at__isnull=True,
-                entity_identifier__in=Issue.objects.filter(
-                    workspace__slug=slug, created_by=request.user
-                ).values_list("pk", flat=True),
-            ).count()
+        # Created Issues Count
+        created_issues_count = Notification.objects.filter(
+            workspace__slug=slug,
+            receiver_id=request.user.id,
+            read_at__isnull=True,
+            archived_at__isnull=True,
+            entity_identifier__in=Issue.objects.filter(
+                workspace__slug=slug, created_by=request.user
+            ).values_list("pk", flat=True),
+        ).count()
 
-            return Response(
-                {
-                    "watching_issues": watching_issues_count,
-                    "my_issues": my_issues_count,
-                    "created_issues": created_issues_count,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {
+                "watching_issues": watching_issues_count,
+                "my_issues": my_issues_count,
+                "created_issues": created_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class MarkAllReadNotificationViewSet(BaseViewSet):
     def create(self, request, slug):
-        try:
-            snoozed = request.data.get("snoozed", False)
-            archived = request.data.get("archived", False)
-            type = request.data.get("type", "all")
+        snoozed = request.data.get("snoozed", False)
+        archived = request.data.get("archived", False)
+        type = request.data.get("type", "all")
 
-            notifications = (
-                Notification.objects.filter(
-                    workspace__slug=slug,
-                    receiver_id=request.user.id,
-                    read_at__isnull=True,
-                )
-                .select_related("workspace", "project", "triggered_by", "receiver")
-                .order_by("snoozed_till", "-created_at")
+        notifications = (
+            Notification.objects.filter(
+                workspace__slug=slug,
+                receiver_id=request.user.id,
+                read_at__isnull=True,
+            )
+            .select_related("workspace", "project", "triggered_by", "receiver")
+            .order_by("snoozed_till", "-created_at")
+        )
+
+        # Filter for snoozed notifications
+        if snoozed:
+            notifications = notifications.filter(
+                Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
+            )
+        else:
+            notifications = notifications.filter(
+                Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
             )
 
-            # Filter for snoozed notifications
-            if snoozed:
-                notifications = notifications.filter(
-                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
-                )
-            else:
-                notifications = notifications.filter(
-                    Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
-                )
+        # Filter for archived or unarchive
+        if archived:
+            notifications = notifications.filter(archived_at__isnull=False)
+        else:
+            notifications = notifications.filter(archived_at__isnull=True)
 
-            # Filter for archived or unarchive
-            if archived:
-                notifications = notifications.filter(archived_at__isnull=False)
-            else:
-                notifications = notifications.filter(archived_at__isnull=True)
+        # Subscribed issues
+        if type == "watching":
+            issue_ids = IssueSubscriber.objects.filter(
+                workspace__slug=slug, subscriber_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
 
-            # Subscribed issues
-            if type == "watching":
-                issue_ids = IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subscriber_id=request.user.id
-                ).values_list("issue_id", flat=True)
+        # Assigned Issues
+        if type == "assigned":
+            issue_ids = IssueAssignee.objects.filter(
+                workspace__slug=slug, assignee_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Created issues
+        if type == "created":
+            if WorkspaceMember.objects.filter(
+                workspace__slug=slug, member=request.user, role__lt=15
+            ).exists():
+                notifications = Notification.objects.none()
+            else:
+                issue_ids = Issue.objects.filter(
+                    workspace__slug=slug, created_by=request.user
+                ).values_list("pk", flat=True)
                 notifications = notifications.filter(entity_identifier__in=issue_ids)
 
-            # Assigned Issues
-            if type == "assigned":
-                issue_ids = IssueAssignee.objects.filter(
-                    workspace__slug=slug, assignee_id=request.user.id
-                ).values_list("issue_id", flat=True)
-                notifications = notifications.filter(entity_identifier__in=issue_ids)
-
-            # Created issues
-            if type == "created":
-                if WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member=request.user, role__lt=15
-                ).exists():
-                    notifications = Notification.objects.none()
-                else:
-                    issue_ids = Issue.objects.filter(
-                        workspace__slug=slug, created_by=request.user
-                    ).values_list("pk", flat=True)
-                    notifications = notifications.filter(
-                        entity_identifier__in=issue_ids
-                    )
-
-            updated_notifications = []
-            for notification in notifications:
-                notification.read_at = timezone.now()
-                updated_notifications.append(notification)
-            Notification.objects.bulk_update(
-                updated_notifications, ["read_at"], batch_size=100
-            )
-            return Response({"message": "Successful"}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        updated_notifications = []
+        for notification in notifications:
+            notification.read_at = timezone.now()
+            updated_notifications.append(notification)
+        Notification.objects.bulk_update(
+            updated_notifications, ["read_at"], batch_size=100
+        )
+        return Response({"message": "Successful"}, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/oauth.py b/apiserver/plane/api/views/oauth.py
index 184cba951..f0ea9acc9 100644
--- a/apiserver/plane/api/views/oauth.py
+++ b/apiserver/plane/api/views/oauth.py
@@ -11,10 +11,10 @@ from django.conf import settings
 from rest_framework.response import Response
 from rest_framework import exceptions
 from rest_framework.permissions import AllowAny
-from rest_framework.views import APIView
 from rest_framework_simplejwt.tokens import RefreshToken
 from rest_framework import status
 from sentry_sdk import capture_exception
+
 # sso authentication
 from google.oauth2 import id_token
 from google.auth.transport import requests as google_auth_request
@@ -112,7 +112,7 @@ def get_user_data(access_token: str) -> dict:
         url="https://api.github.com/user/emails", headers=headers
     ).json()
 
-    [
+    _ = [
         user_data.update({"email": item.get("email")})
         for item in response
         if item.get("primary") is True
@@ -146,7 +146,7 @@ class OauthEndpoint(BaseAPIView):
                 data = get_user_data(access_token)
 
             email = data.get("email", None)
-            if email == None:
+            if email is None:
                 return Response(
                     {
                         "error": "Something went wrong. Please try again later or contact the support team."
@@ -157,7 +157,6 @@ class OauthEndpoint(BaseAPIView):
             if "@" in email:
                 user = User.objects.get(email=email)
                 email = data["email"]
-                channel = "email"
                 mobile_number = uuid.uuid4().hex
                 email_verified = True
             else:
@@ -181,19 +180,16 @@ class OauthEndpoint(BaseAPIView):
             user.last_active = timezone.now()
             user.last_login_time = timezone.now()
             user.last_login_ip = request.META.get("REMOTE_ADDR")
-            user.last_login_medium = f"oauth"
+            user.last_login_medium = "oauth"
             user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
             user.is_email_verified = email_verified
             user.save()
 
-            serialized_user = UserSerializer(user).data
-
             access_token, refresh_token = get_tokens_for_user(user)
 
             data = {
                 "access_token": access_token,
                 "refresh_token": refresh_token,
-                "user": serialized_user,
             }
 
             SocialLoginConnection.objects.update_or_create(
@@ -235,7 +231,6 @@ class OauthEndpoint(BaseAPIView):
             if "@" in email:
                 email = data["email"]
                 mobile_number = uuid.uuid4().hex
-                channel = "email"
                 email_verified = True
             else:
                 return Response(
@@ -264,14 +259,11 @@ class OauthEndpoint(BaseAPIView):
             user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
             user.token_updated_at = timezone.now()
             user.save()
-            serialized_user = UserSerializer(user).data
 
             access_token, refresh_token = get_tokens_for_user(user)
             data = {
                 "access_token": access_token,
                 "refresh_token": refresh_token,
-                "user": serialized_user,
-                "permissions": [],
             }
             if settings.ANALYTICS_BASE_API:
                 _ = requests.post(
@@ -304,11 +296,3 @@ class OauthEndpoint(BaseAPIView):
                 },
             )
             return Response(data, status=status.HTTP_201_CREATED)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {
-                    "error": "Something went wrong. Please try again later or contact the support team."
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/api/views/page.py b/apiserver/plane/api/views/page.py
index 9a20e312f..9d333a8e5 100644
--- a/apiserver/plane/api/views/page.py
+++ b/apiserver/plane/api/views/page.py
@@ -1,9 +1,8 @@
 # Python imports
-from datetime import timedelta, datetime, date
+from datetime import timedelta, date
 
 # Django imports
 from django.db import connection
-from django.db import IntegrityError
 from django.db.models import Exists, OuterRef, Q, Prefetch
 from django.utils import timezone
 from django.utils.decorators import method_decorator
@@ -98,23 +97,15 @@ class PageViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = PageSerializer(
-                data=request.data,
-                context={"project_id": project_id, "owned_by_id": request.user.id},
-            )
+        serializer = PageSerializer(
+            data=request.data,
+            context={"project_id": project_id, "owned_by_id": request.user.id},
+        )
 
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, slug, project_id, pk):
         try:
@@ -163,12 +154,9 @@ class PageViewSet(BaseViewSet):
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except Page.DoesNotExist:
             return Response(
-                {"error": "Page Does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "Access cannot be updated since this page is owned by someone else"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
@@ -380,53 +368,21 @@ class PageFavoriteViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = PageFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The page is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = PageFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, page_id):
-        try:
-            page_favorite = PageFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                page_id=page_id,
-            )
-            page_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except PageFavorite.DoesNotExist:
-            return Response(
-                {"error": "Page is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
+        page_favorite = PageFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            page_id=page_id,
+        )
+        page_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 class PageTransactionEndpoint(BaseAPIView):
     permission_classes = [
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 1ba227177..37e491e83 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -7,10 +7,10 @@ from datetime import datetime
 from django.core.exceptions import ValidationError
 from django.db import IntegrityError
 from django.db.models import (
+    Prefetch,
     Q,
     Exists,
     OuterRef,
-    Func,
     F,
     Func,
     Subquery,
@@ -29,11 +29,11 @@ from sentry_sdk import capture_exception
 from .base import BaseViewSet, BaseAPIView
 from plane.api.serializers import (
     ProjectSerializer,
+    ProjectListSerializer,
     ProjectMemberSerializer,
     ProjectDetailSerializer,
     ProjectMemberInviteSerializer,
     ProjectFavoriteSerializer,
-    IssueLiteSerializer,
     ProjectDeployBoardSerializer,
     ProjectMemberAdminSerializer,
 )
@@ -67,6 +67,7 @@ from plane.db.models import (
     ModuleMember,
     Inbox,
     ProjectDeployBoard,
+    IssueProperty,
 )
 
 from plane.bgtasks.project_invitation_task import project_invitation
@@ -81,17 +82,11 @@ class ProjectViewSet(BaseViewSet):
     ]
 
     def get_serializer_class(self, *args, **kwargs):
-        if self.action == "update" or self.action == "partial_update":
+        if self.action in ["update", "partial_update"]:
             return ProjectSerializer
         return ProjectDetailSerializer
 
     def get_queryset(self):
-        subquery = ProjectFavorite.objects.filter(
-            user=self.request.user,
-            project_id=OuterRef("pk"),
-            workspace__slug=self.kwargs.get("slug"),
-        )
-
         return self.filter_queryset(
             super()
             .get_queryset()
@@ -100,7 +95,15 @@ class ProjectViewSet(BaseViewSet):
             .select_related(
                 "workspace", "workspace__owner", "default_assignee", "project_lead"
             )
-            .annotate(is_favorite=Exists(subquery))
+            .annotate(
+                is_favorite=Exists(
+                    ProjectFavorite.objects.filter(
+                        user=self.request.user,
+                        project_id=OuterRef("pk"),
+                        workspace__slug=self.kwargs.get("slug"),
+                    )
+                )
+            )
             .annotate(
                 is_member=Exists(
                     ProjectMember.objects.filter(
@@ -148,57 +151,40 @@ class ProjectViewSet(BaseViewSet):
         )
 
     def list(self, request, slug):
-        try:
-            is_favorite = request.GET.get("is_favorite", "all")
-            subquery = ProjectFavorite.objects.filter(
-                user=self.request.user,
-                project_id=OuterRef("pk"),
-                workspace__slug=self.kwargs.get("slug"),
+        fields = [field for field in request.GET.get("fields", "").split(",") if field]
+
+        sort_order_query = ProjectMember.objects.filter(
+            member=request.user,
+            project_id=OuterRef("pk"),
+            workspace__slug=self.kwargs.get("slug"),
+        ).values("sort_order")
+        projects = (
+            self.get_queryset()
+            .annotate(sort_order=Subquery(sort_order_query))
+            .prefetch_related(
+                Prefetch(
+                    "project_projectmember",
+                    queryset=ProjectMember.objects.filter(
+                        workspace__slug=slug,
+                    ).select_related("member"),
+                )
             )
-            sort_order_query = ProjectMember.objects.filter(
-                member=request.user,
-                project_id=OuterRef("pk"),
-                workspace__slug=self.kwargs.get("slug"),
-            ).values("sort_order")
-            projects = (
-                self.get_queryset()
-                .annotate(is_favorite=Exists(subquery))
-                .annotate(sort_order=Subquery(sort_order_query))
-                .order_by("sort_order", "name")
-                .annotate(
-                    total_members=ProjectMember.objects.filter(
-                        project_id=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    total_cycles=Cycle.objects.filter(project_id=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    total_modules=Module.objects.filter(project_id=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+            .order_by("sort_order", "name")
+        )
+        if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+            return self.paginate(
+                request=request,
+                queryset=(projects),
+                on_results=lambda projects: ProjectListSerializer(
+                    projects, many=True
+                ).data,
             )
 
-            if is_favorite == "true":
-                projects = projects.filter(is_favorite=True)
-            if is_favorite == "false":
-                projects = projects.filter(is_favorite=False)
-
-            return Response(ProjectDetailSerializer(projects, many=True).data)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            ProjectListSerializer(
+                projects, many=True, fields=fields if fields else None
+            ).data
+        )
 
     def create(self, request, slug):
         try:
@@ -214,6 +200,11 @@ class ProjectViewSet(BaseViewSet):
                 project_member = ProjectMember.objects.create(
                     project_id=serializer.data["id"], member=request.user, role=20
                 )
+                # Also create the issue property for the user
+                _ = IssueProperty.objects.create(
+                    project_id=serializer.data["id"],
+                    user=request.user,
+                )
 
                 if serializer.data["project_lead"] is not None and str(
                     serializer.data["project_lead"]
@@ -223,6 +214,11 @@ class ProjectViewSet(BaseViewSet):
                         member_id=serializer.data["project_lead"],
                         role=20,
                     )
+                    # Also create the issue property for the user
+                    IssueProperty.objects.create(
+                        project_id=serializer.data["id"],
+                        user_id=serializer.data["project_lead"],
+                    )
 
                 # Default states
                 states = [
@@ -275,12 +271,9 @@ class ProjectViewSet(BaseViewSet):
                     ]
                 )
 
-                data = serializer.data
-                # Additional fields of the member
-                data["sort_order"] = project_member.sort_order
-                data["member_role"] = project_member.role
-                data["is_member"] = True
-                return Response(data, status=status.HTTP_201_CREATED)
+                project = self.get_queryset().filter(pk=serializer.data["id"]).first()
+                serializer = ProjectListSerializer(project)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors,
                 status=status.HTTP_400_BAD_REQUEST,
@@ -291,12 +284,6 @@ class ProjectViewSet(BaseViewSet):
                     {"name": "The project name is already taken"},
                     status=status.HTTP_410_GONE,
                 )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_410_GONE,
-                )
         except Workspace.DoesNotExist as e:
             return Response(
                 {"error": "Workspace does not exist"}, status=status.HTTP_404_NOT_FOUND
@@ -306,12 +293,6 @@ class ProjectViewSet(BaseViewSet):
                 {"identifier": "The project identifier is already taken"},
                 status=status.HTTP_410_GONE,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
     def partial_update(self, request, slug, pk=None):
         try:
@@ -342,6 +323,8 @@ class ProjectViewSet(BaseViewSet):
                         color="#ff7700",
                     )
 
+                project = self.get_queryset().filter(pk=serializer.data["id"]).first()
+                serializer = ProjectListSerializer(project)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -351,7 +334,7 @@ class ProjectViewSet(BaseViewSet):
                     {"name": "The project name is already taken"},
                     status=status.HTTP_410_GONE,
                 )
-        except Project.DoesNotExist or Workspace.DoesNotExist as e:
+        except (Project.DoesNotExist, Workspace.DoesNotExist):
             return Response(
                 {"error": "Project does not exist"}, status=status.HTTP_404_NOT_FOUND
             )
@@ -360,12 +343,6 @@ class ProjectViewSet(BaseViewSet):
                 {"identifier": "The project identifier is already taken"},
                 status=status.HTTP_410_GONE,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
 
 class InviteProjectEndpoint(BaseAPIView):
@@ -374,80 +351,62 @@ class InviteProjectEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            email = request.data.get("email", False)
-            role = request.data.get("role", False)
-
-            # Check if email is provided
-            if not email:
-                return Response(
-                    {"error": "Email is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            validate_email(email)
-            # Check if user is already a member of workspace
-            if ProjectMember.objects.filter(
-                project_id=project_id,
-                member__email=email,
-                member__is_bot=False,
-            ).exists():
-                return Response(
-                    {"error": "User is already member of workspace"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            user = User.objects.filter(email=email).first()
-
-            if user is None:
-                token = jwt.encode(
-                    {"email": email, "timestamp": datetime.now().timestamp()},
-                    settings.SECRET_KEY,
-                    algorithm="HS256",
-                )
-                project_invitation_obj = ProjectMemberInvite.objects.create(
-                    email=email.strip().lower(),
-                    project_id=project_id,
-                    token=token,
-                    role=role,
-                )
-                domain = settings.WEB_URL
-                project_invitation.delay(email, project_id, token, domain)
-
-                return Response(
-                    {
-                        "message": "Email sent successfully",
-                        "id": project_invitation_obj.id,
-                    },
-                    status=status.HTTP_200_OK,
-                )
-
-            project_member = ProjectMember.objects.create(
-                member=user, project_id=project_id, role=role
-            )
+        email = request.data.get("email", False)
+        role = request.data.get("role", False)
 
+        # Check if email is provided
+        if not email:
             return Response(
-                ProjectMemberSerializer(project_member).data, status=status.HTTP_200_OK
+                {"error": "Email is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        except ValidationError:
+        validate_email(email)
+        # Check if user is already a member of workspace
+        if ProjectMember.objects.filter(
+            project_id=project_id,
+            member__email=email,
+            member__is_bot=False,
+        ).exists():
+            return Response(
+                {"error": "User is already member of workspace"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        user = User.objects.filter(email=email).first()
+
+        if user is None:
+            token = jwt.encode(
+                {"email": email, "timestamp": datetime.now().timestamp()},
+                settings.SECRET_KEY,
+                algorithm="HS256",
+            )
+            project_invitation_obj = ProjectMemberInvite.objects.create(
+                email=email.strip().lower(),
+                project_id=project_id,
+                token=token,
+                role=role,
+            )
+            domain = settings.WEB_URL
+            project_invitation.delay(email, project_id, token, domain)
+
             return Response(
                 {
-                    "error": "Invalid email address provided a valid email address is required to send the invite"
+                    "message": "Email sent successfully",
+                    "id": project_invitation_obj.id,
                 },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except (Workspace.DoesNotExist, Project.DoesNotExist) as e:
-            return Response(
-                {"error": "Workspace or Project does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                status=status.HTTP_200_OK,
             )
 
+        project_member = ProjectMember.objects.create(
+            member=user, project_id=project_id, role=role
+        )
+
+        _ = IssueProperty.objects.create(user=user, project_id=project_id)
+
+        return Response(
+            ProjectMemberSerializer(project_member).data, status=status.HTTP_200_OK
+        )
+
 
 class UserProjectInvitationsViewset(BaseViewSet):
     serializer_class = ProjectMemberInviteSerializer
@@ -462,34 +421,39 @@ class UserProjectInvitationsViewset(BaseViewSet):
         )
 
     def create(self, request):
-        try:
-            invitations = request.data.get("invitations")
-            project_invitations = ProjectMemberInvite.objects.filter(
-                pk__in=invitations, accepted=True
-            )
-            ProjectMember.objects.bulk_create(
-                [
-                    ProjectMember(
-                        project=invitation.project,
-                        workspace=invitation.project.workspace,
-                        member=request.user,
-                        role=invitation.role,
-                        created_by=request.user,
-                    )
-                    for invitation in project_invitations
-                ]
-            )
+        invitations = request.data.get("invitations")
+        project_invitations = ProjectMemberInvite.objects.filter(
+            pk__in=invitations, accepted=True
+        )
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=invitation.project,
+                    workspace=invitation.project.workspace,
+                    member=request.user,
+                    role=invitation.role,
+                    created_by=request.user,
+                )
+                for invitation in project_invitations
+            ]
+        )
 
-            # Delete joined project invites
-            project_invitations.delete()
+        IssueProperty.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=invitation.project,
+                    workspace=invitation.project.workspace,
+                    user=request.user,
+                    created_by=request.user,
+                )
+                for invitation in project_invitations
+            ]
+        )
 
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        # Delete joined project invites
+        project_invitations.delete()
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectMemberViewSet(BaseViewSet):
@@ -516,189 +480,166 @@ class ProjectMemberViewSet(BaseViewSet):
             .select_related("workspace", "workspace__owner")
         )
 
+    def create(self, request, slug, project_id):
+        members = request.data.get("members", [])
+
+        # get the project
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        if not len(members):
+            return Response(
+                {"error": "Atleast one member is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        bulk_project_members = []
+        bulk_issue_props = []
+
+        project_members = (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                member_id__in=[member.get("member_id") for member in members],
+            )
+            .values("member_id", "sort_order")
+            .order_by("sort_order")
+        )
+
+        for member in members:
+            sort_order = [
+                project_member.get("sort_order")
+                for project_member in project_members
+                if str(project_member.get("member_id")) == str(member.get("member_id"))
+            ]
+            bulk_project_members.append(
+                ProjectMember(
+                    member_id=member.get("member_id"),
+                    role=member.get("role", 10),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
+                )
+            )
+            bulk_issue_props.append(
+                IssueProperty(
+                    user_id=member.get("member_id"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                )
+            )
+
+        project_members = ProjectMember.objects.bulk_create(
+            bulk_project_members,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        _ = IssueProperty.objects.bulk_create(
+            bulk_issue_props, batch_size=10, ignore_conflicts=True
+        )
+
+        serializer = ProjectMemberSerializer(project_members, many=True)
+
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    def list(self, request, slug, project_id):
+        project_member = ProjectMember.objects.get(
+            member=request.user, workspace__slug=slug, project_id=project_id
+        )
+
+        project_members = ProjectMember.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            member__is_bot=False,
+        ).select_related("project", "member", "workspace")
+
+        if project_member.role > 10:
+            serializer = ProjectMemberAdminSerializer(project_members, many=True)
+        else:
+            serializer = ProjectMemberSerializer(project_members, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     def partial_update(self, request, slug, project_id, pk):
-        try:
-            project_member = ProjectMember.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id
-            )
-            if request.user.id == project_member.member_id:
-                return Response(
-                    {"error": "You cannot update your own role"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            # Check while updating user roles
-            requested_project_member = ProjectMember.objects.get(
-                project_id=project_id, workspace__slug=slug, member=request.user
-            )
-            if (
-                "role" in request.data
-                and int(request.data.get("role", project_member.role))
-                > requested_project_member.role
-            ):
-                return Response(
-                    {
-                        "error": "You cannot update a role that is higher than your own role"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = ProjectMemberSerializer(
-                project_member, data=request.data, partial=True
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except ProjectMember.DoesNotExist:
+        project_member = ProjectMember.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        if request.user.id == project_member.member_id:
             return Response(
-                {"error": "Project Member does not exist"},
+                {"error": "You cannot update your own role"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+        # Check while updating user roles
+        requested_project_member = ProjectMember.objects.get(
+            project_id=project_id, workspace__slug=slug, member=request.user
+        )
+        if (
+            "role" in request.data
+            and int(request.data.get("role", project_member.role))
+            > requested_project_member.role
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "You cannot update a role that is higher than your own role"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        serializer = ProjectMemberSerializer(
+            project_member, data=request.data, partial=True
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
     def destroy(self, request, slug, project_id, pk):
-        try:
-            project_member = ProjectMember.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            # check requesting user role
-            requesting_project_member = ProjectMember.objects.get(
-                workspace__slug=slug, member=request.user, project_id=project_id
-            )
-            if requesting_project_member.role < project_member.role:
-                return Response(
-                    {
-                        "error": "You cannot remove a user having role higher than yourself"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Remove all favorites
-            ProjectFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            CycleFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            ModuleFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            PageFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            IssueViewFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            # Also remove issue from issue assigned
-            IssueAssignee.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                assignee=project_member.member,
-            ).delete()
-
-            # Remove if module member
-            ModuleMember.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                member=project_member.member,
-            ).delete()
-            # Delete owned Pages
-            Page.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                owned_by=project_member.member,
-            ).delete()
-            project_member.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ProjectMember.DoesNotExist:
+        project_member = ProjectMember.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk
+        )
+        # check requesting user role
+        requesting_project_member = ProjectMember.objects.get(
+            workspace__slug=slug, member=request.user, project_id=project_id
+        )
+        if requesting_project_member.role < project_member.role:
             return Response(
-                {"error": "Project Member does not exist"},
+                {"error": "You cannot remove a user having role higher than yourself"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response({"error": "Something went wrong please try again later"})
 
+        # Remove all favorites
+        ProjectFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        CycleFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        ModuleFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        PageFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        IssueViewFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        # Also remove issue from issue assigned
+        IssueAssignee.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            assignee=project_member.member,
+        ).delete()
 
-class AddMemberToProjectEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
-    def post(self, request, slug, project_id):
-        try:
-            members = request.data.get("members", [])
-
-            # get the project
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-            if not len(members):
-                return Response(
-                    {"error": "Atleast one member is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            bulk_project_members = []
-
-            project_members = (
-                ProjectMember.objects.filter(
-                    workspace__slug=slug,
-                    member_id__in=[member.get("member_id") for member in members],
-                )
-                .values("member_id", "sort_order")
-                .order_by("sort_order")
-            )
-
-            for member in members:
-                sort_order = [
-                    project_member.get("sort_order")
-                    for project_member in project_members
-                    if str(project_member.get("member_id"))
-                    == str(member.get("member_id"))
-                ]
-                bulk_project_members.append(
-                    ProjectMember(
-                        member_id=member.get("member_id"),
-                        role=member.get("role", 10),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
-                    )
-                )
-
-            project_members = ProjectMember.objects.bulk_create(
-                bulk_project_members,
-                batch_size=10,
-                ignore_conflicts=True,
-            )
-
-            serializer = ProjectMemberSerializer(project_members, many=True)
-
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except KeyError:
-            return Response(
-                {"error": "Incorrect data sent"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except IntegrityError:
-            return Response(
-                {"error": "User not member of the workspace"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        # Remove if module member
+        ModuleMember.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            member=project_member.member,
+        ).delete()
+        # Delete owned Pages
+        Page.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            owned_by=project_member.member,
+        ).delete()
+        project_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class AddTeamToProjectEndpoint(BaseAPIView):
@@ -707,52 +648,47 @@ class AddTeamToProjectEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            team_members = TeamMember.objects.filter(
-                workspace__slug=slug, team__in=request.data.get("teams", [])
-            ).values_list("member", flat=True)
+        team_members = TeamMember.objects.filter(
+            workspace__slug=slug, team__in=request.data.get("teams", [])
+        ).values_list("member", flat=True)
 
-            if len(team_members) == 0:
-                return Response(
-                    {"error": "No such team exists"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            workspace = Workspace.objects.get(slug=slug)
-
-            project_members = []
-            for member in team_members:
-                project_members.append(
-                    ProjectMember(
-                        project_id=project_id,
-                        member_id=member,
-                        workspace=workspace,
-                        created_by=request.user,
-                    )
-                )
-
-            ProjectMember.objects.bulk_create(
-                project_members, batch_size=10, ignore_conflicts=True
-            )
-
-            serializer = ProjectMemberSerializer(project_members, many=True)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The team with the name already exists"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Workspace.DoesNotExist:
+        if len(team_members) == 0:
             return Response(
-                {"error": "The requested workspace could not be found"},
-                status=status.HTTP_404_NOT_FOUND,
+                {"error": "No such team exists"}, status=status.HTTP_400_BAD_REQUEST
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+
+        workspace = Workspace.objects.get(slug=slug)
+
+        project_members = []
+        issue_props = []
+        for member in team_members:
+            project_members.append(
+                ProjectMember(
+                    project_id=project_id,
+                    member_id=member,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
             )
+            issue_props.append(
+                IssueProperty(
+                    project_id=project_id,
+                    user_id=member,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+            )
+
+        ProjectMember.objects.bulk_create(
+            project_members, batch_size=10, ignore_conflicts=True
+        )
+
+        _ = IssueProperty.objects.bulk_create(
+            issue_props, batch_size=10, ignore_conflicts=True
+        )
+
+        serializer = ProjectMemberSerializer(project_members, many=True)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
 
 class ProjectMemberInvitationsViewset(BaseViewSet):
@@ -801,165 +737,124 @@ class ProjectIdentifierEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            name = request.GET.get("name", "").strip().upper()
-
-            if name == "":
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            exists = ProjectIdentifier.objects.filter(
-                name=name, workspace__slug=slug
-            ).values("id", "name", "project")
+        name = request.GET.get("name", "").strip().upper()
 
+        if name == "":
             return Response(
-                {"exists": len(exists), "identifiers": exists},
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
+        exists = ProjectIdentifier.objects.filter(
+            name=name, workspace__slug=slug
+        ).values("id", "name", "project")
+
+        return Response(
+            {"exists": len(exists), "identifiers": exists},
+            status=status.HTTP_200_OK,
+        )
+
     def delete(self, request, slug):
-        try:
-            name = request.data.get("name", "").strip().upper()
-
-            if name == "":
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            if Project.objects.filter(identifier=name, workspace__slug=slug).exists():
-                return Response(
-                    {"error": "Cannot delete an identifier of an existing project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            ProjectIdentifier.objects.filter(name=name, workspace__slug=slug).delete()
+        name = request.data.get("name", "").strip().upper()
 
+        if name == "":
             return Response(
-                status=status.HTTP_204_NO_CONTENT,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
-        except Exception as e:
-            capture_exception(e)
+
+        if Project.objects.filter(identifier=name, workspace__slug=slug).exists():
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Cannot delete an identifier of an existing project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        ProjectIdentifier.objects.filter(name=name, workspace__slug=slug).delete()
+
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
+
 
 class ProjectJoinEndpoint(BaseAPIView):
     def post(self, request, slug):
-        try:
-            project_ids = request.data.get("project_ids", [])
+        project_ids = request.data.get("project_ids", [])
 
-            # Get the workspace user role
-            workspace_member = WorkspaceMember.objects.get(
-                member=request.user, workspace__slug=slug
-            )
+        # Get the workspace user role
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user, workspace__slug=slug
+        )
 
-            workspace_role = workspace_member.role
-            workspace = workspace_member.workspace
+        workspace_role = workspace_member.role
+        workspace = workspace_member.workspace
 
-            ProjectMember.objects.bulk_create(
-                [
-                    ProjectMember(
-                        project_id=project_id,
-                        member=request.user,
-                        role=20
-                        if workspace_role >= 15
-                        else (15 if workspace_role == 10 else workspace_role),
-                        workspace=workspace,
-                        created_by=request.user,
-                    )
-                    for project_id in project_ids
-                ],
-                ignore_conflicts=True,
-            )
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project_id=project_id,
+                    member=request.user,
+                    role=20
+                    if workspace_role >= 15
+                    else (15 if workspace_role == 10 else workspace_role),
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+                for project_id in project_ids
+            ],
+            ignore_conflicts=True,
+        )
 
-            return Response(
-                {"message": "Projects joined successfully"},
-                status=status.HTTP_201_CREATED,
-            )
-        except WorkspaceMember.DoesNotExist:
-            return Response(
-                {"error": "User is not a member of workspace"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        IssueProperty.objects.bulk_create(
+            [
+                IssueProperty(
+                    project_id=project_id,
+                    user=request.user,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+                for project_id in project_ids
+            ],
+            ignore_conflicts=True,
+        )
+
+        return Response(
+            {"message": "Projects joined successfully"},
+            status=status.HTTP_201_CREATED,
+        )
 
 
 class ProjectUserViewsEndpoint(BaseAPIView):
     def post(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
-            project_member = ProjectMember.objects.filter(
-                member=request.user, project=project
-            ).first()
+        project_member = ProjectMember.objects.filter(
+            member=request.user, project=project
+        ).first()
 
-            if project_member is None:
-                return Response(
-                    {"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN
-                )
+        if project_member is None:
+            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
 
-            view_props = project_member.view_props
-            default_props = project_member.default_props
-            preferences = project_member.preferences
-            sort_order = project_member.sort_order
+        view_props = project_member.view_props
+        default_props = project_member.default_props
+        preferences = project_member.preferences
+        sort_order = project_member.sort_order
 
-            project_member.view_props = request.data.get("view_props", view_props)
-            project_member.default_props = request.data.get(
-                "default_props", default_props
-            )
-            project_member.preferences = request.data.get("preferences", preferences)
-            project_member.sort_order = request.data.get("sort_order", sort_order)
+        project_member.view_props = request.data.get("view_props", view_props)
+        project_member.default_props = request.data.get("default_props", default_props)
+        project_member.preferences = request.data.get("preferences", preferences)
+        project_member.sort_order = request.data.get("sort_order", sort_order)
 
-            project_member.save()
+        project_member.save()
 
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "The requested resource does not exists"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectMemberUserEndpoint(BaseAPIView):
     def get(self, request, slug, project_id):
-        try:
-            project_member = ProjectMember.objects.get(
-                project_id=project_id, workspace__slug=slug, member=request.user
-            )
-            serializer = ProjectMemberSerializer(project_member)
+        project_member = ProjectMember.objects.get(
+            project_id=project_id, workspace__slug=slug, member=request.user
+        )
+        serializer = ProjectMemberSerializer(project_member)
 
-            return Response(serializer.data, status=status.HTTP_200_OK)
-
-        except ProjectMember.DoesNotExist:
-            return Response(
-                {"error": "User not a member of the project"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class ProjectFavoritesViewSet(BaseViewSet):
@@ -982,50 +877,18 @@ class ProjectFavoritesViewSet(BaseViewSet):
         serializer.save(user=self.request.user)
 
     def create(self, request, slug):
-        try:
-            serializer = ProjectFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            print(str(e))
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The project is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = ProjectFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id):
-        try:
-            project_favorite = ProjectFavorite.objects.get(
-                project=project_id, user=request.user, workspace__slug=slug
-            )
-            project_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ProjectFavorite.DoesNotExist:
-            return Response(
-                {"error": "Project is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        project_favorite = ProjectFavorite.objects.get(
+            project=project_id, user=request.user, workspace__slug=slug
+        )
+        project_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectDeployBoardViewSet(BaseViewSet):
@@ -1047,64 +910,35 @@ class ProjectDeployBoardViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            comments = request.data.get("comments", False)
-            reactions = request.data.get("reactions", False)
-            inbox = request.data.get("inbox", None)
-            votes = request.data.get("votes", False)
-            views = request.data.get(
-                "views",
-                {
-                    "list": True,
-                    "kanban": True,
-                    "calendar": True,
-                    "gantt": True,
-                    "spreadsheet": True,
-                },
-            )
+        comments = request.data.get("comments", False)
+        reactions = request.data.get("reactions", False)
+        inbox = request.data.get("inbox", None)
+        votes = request.data.get("votes", False)
+        views = request.data.get(
+            "views",
+            {
+                "list": True,
+                "kanban": True,
+                "calendar": True,
+                "gantt": True,
+                "spreadsheet": True,
+            },
+        )
 
-            project_deploy_board, _ = ProjectDeployBoard.objects.get_or_create(
-                anchor=f"{slug}/{project_id}",
-                project_id=project_id,
-            )
-            project_deploy_board.comments = comments
-            project_deploy_board.reactions = reactions
-            project_deploy_board.inbox = inbox
-            project_deploy_board.votes = votes
-            project_deploy_board.views = views
+        project_deploy_board, _ = ProjectDeployBoard.objects.get_or_create(
+            anchor=f"{slug}/{project_id}",
+            project_id=project_id,
+        )
+        project_deploy_board.comments = comments
+        project_deploy_board.reactions = reactions
+        project_deploy_board.inbox = inbox
+        project_deploy_board.votes = votes
+        project_deploy_board.views = views
 
-            project_deploy_board.save()
+        project_deploy_board.save()
 
-            serializer = ProjectDeployBoardSerializer(project_deploy_board)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
-class ProjectMemberEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def get(self, request, slug, project_id):
-        try:
-            project_members = ProjectMember.objects.filter(
-                project_id=project_id,
-                workspace__slug=slug,
-                member__is_bot=False,
-            ).select_related("project", "member", "workspace")
-            serializer = ProjectMemberSerializer(project_members, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = ProjectDeployBoardSerializer(project_deploy_board)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
@@ -1113,23 +947,11 @@ class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-            serializer = ProjectDeployBoardSerializer(project_deploy_board)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Project Deploy Board does not exists"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+        serializer = ProjectDeployBoardSerializer(project_deploy_board)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
@@ -1138,34 +960,27 @@ class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            projects = (
-                Project.objects.filter(workspace__slug=slug)
-                .annotate(
-                    is_public=Exists(
-                        ProjectDeployBoard.objects.filter(
-                            workspace__slug=slug, project_id=OuterRef("pk")
-                        )
+        projects = (
+            Project.objects.filter(workspace__slug=slug)
+            .annotate(
+                is_public=Exists(
+                    ProjectDeployBoard.objects.filter(
+                        workspace__slug=slug, project_id=OuterRef("pk")
                     )
                 )
-                .filter(is_public=True)
-            ).values(
-                "id",
-                "identifier",
-                "name",
-                "description",
-                "emoji",
-                "icon_prop",
-                "cover_image",
             )
+            .filter(is_public=True)
+        ).values(
+            "id",
+            "identifier",
+            "name",
+            "description",
+            "emoji",
+            "icon_prop",
+            "cover_image",
+        )
 
-            return Response(projects, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(projects, status=status.HTTP_200_OK)
 
 
 class LeaveProjectEndpoint(BaseAPIView):
@@ -1174,43 +989,31 @@ class LeaveProjectEndpoint(BaseAPIView):
     ]
 
     def delete(self, request, slug, project_id):
-        try:
-            project_member = ProjectMember.objects.get(
-                workspace__slug=slug,
-                member=request.user,
-                project_id=project_id,
-            )
+        project_member = ProjectMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            project_id=project_id,
+        )
 
-            # Only Admin case
-            if (
-                project_member.role == 20
-                and ProjectMember.objects.filter(
-                    workspace__slug=slug,
-                    role=20,
-                    project_id=project_id,
-                ).count()
-                == 1
-            ):
-                return Response(
-                    {
-                        "error": "You cannot leave the project since you are the only admin of the project you should delete the project"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            # Delete the member from workspace
-            project_member.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ProjectMember.DoesNotExist:
+        # Only Admin case
+        if (
+            project_member.role == 20
+            and ProjectMember.objects.filter(
+                workspace__slug=slug,
+                role=20,
+                project_id=project_id,
+            ).count()
+            == 1
+        ):
             return Response(
-                {"error": "Workspace member does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "You cannot leave the project since you are the only admin of the project you should delete the project"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        # Delete the member from workspace
+        project_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectPublicCoverImagesEndpoint(BaseAPIView):
@@ -1219,30 +1022,26 @@ class ProjectPublicCoverImagesEndpoint(BaseAPIView):
     ]
 
     def get(self, request):
-        try:
-            files = []
-            s3 = boto3.client(
-                "s3",
-                aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-                aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-            )
-            params = {
-                "Bucket": settings.AWS_S3_BUCKET_NAME,
-                "Prefix": "static/project-cover/",
-            }
+        files = []
+        s3 = boto3.client(
+            "s3",
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+        )
+        params = {
+            "Bucket": settings.AWS_S3_BUCKET_NAME,
+            "Prefix": "static/project-cover/",
+        }
 
-            response = s3.list_objects_v2(**params)
-            # Extracting file keys from the response
-            if "Contents" in response:
-                for content in response["Contents"]:
-                    if not content["Key"].endswith(
-                        "/"
-                    ):  # This line ensures we're only getting files, not "sub-folders"
-                        files.append(
-                            f"https://{settings.AWS_S3_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
-                        )
+        response = s3.list_objects_v2(**params)
+        # Extracting file keys from the response
+        if "Contents" in response:
+            for content in response["Contents"]:
+                if not content["Key"].endswith(
+                    "/"
+                ):  # This line ensures we're only getting files, not "sub-folders"
+                    files.append(
+                        f"https://{settings.AWS_S3_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
+                    )
 
-            return Response(files, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response([], status=status.HTTP_200_OK)
+        return Response(files, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/search.py b/apiserver/plane/api/views/search.py
index 35b75ce67..ff7431543 100644
--- a/apiserver/plane/api/views/search.py
+++ b/apiserver/plane/api/views/search.py
@@ -168,126 +168,107 @@ class GlobalSearchEndpoint(BaseAPIView):
         )
 
     def get(self, request, slug):
-        try:
-            query = request.query_params.get("search", False)
-            workspace_search = request.query_params.get("workspace_search", "false")
-            project_id = request.query_params.get("project_id", False)
+        query = request.query_params.get("search", False)
+        workspace_search = request.query_params.get("workspace_search", "false")
+        project_id = request.query_params.get("project_id", False)
 
-            if not query:
-                return Response(
-                    {
-                        "results": {
-                            "workspace": [],
-                            "project": [],
-                            "issue": [],
-                            "cycle": [],
-                            "module": [],
-                            "issue_view": [],
-                            "page": [],
-                        }
-                    },
-                    status=status.HTTP_200_OK,
-                )
-
-            MODELS_MAPPER = {
-                "workspace": self.filter_workspaces,
-                "project": self.filter_projects,
-                "issue": self.filter_issues,
-                "cycle": self.filter_cycles,
-                "module": self.filter_modules,
-                "issue_view": self.filter_views,
-                "page": self.filter_pages,
-            }
-
-            results = {}
-
-            for model in MODELS_MAPPER.keys():
-                func = MODELS_MAPPER.get(model, None)
-                results[model] = func(query, slug, project_id, workspace_search)
-            return Response({"results": results}, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
+        if not query:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {
+                    "results": {
+                        "workspace": [],
+                        "project": [],
+                        "issue": [],
+                        "cycle": [],
+                        "module": [],
+                        "issue_view": [],
+                        "page": [],
+                    }
+                },
+                status=status.HTTP_200_OK,
             )
 
+        MODELS_MAPPER = {
+            "workspace": self.filter_workspaces,
+            "project": self.filter_projects,
+            "issue": self.filter_issues,
+            "cycle": self.filter_cycles,
+            "module": self.filter_modules,
+            "issue_view": self.filter_views,
+            "page": self.filter_pages,
+        }
+
+        results = {}
+
+        for model in MODELS_MAPPER.keys():
+            func = MODELS_MAPPER.get(model, None)
+            results[model] = func(query, slug, project_id, workspace_search)
+        return Response({"results": results}, status=status.HTTP_200_OK)
+
 
 class IssueSearchEndpoint(BaseAPIView):
     def get(self, request, slug, project_id):
-        try:
-            query = request.query_params.get("search", False)
-            workspace_search = request.query_params.get("workspace_search", "false")
-            parent = request.query_params.get("parent", "false")
-            issue_relation = request.query_params.get("issue_relation", "false")
-            cycle = request.query_params.get("cycle", "false")
-            module = request.query_params.get("module", "false")
-            sub_issue = request.query_params.get("sub_issue", "false")
+        query = request.query_params.get("search", False)
+        workspace_search = request.query_params.get("workspace_search", "false")
+        parent = request.query_params.get("parent", "false")
+        issue_relation = request.query_params.get("issue_relation", "false")
+        cycle = request.query_params.get("cycle", "false")
+        module = request.query_params.get("module", "false")
+        sub_issue = request.query_params.get("sub_issue", "false")
 
-            issue_id = request.query_params.get("issue_id", False)
+        issue_id = request.query_params.get("issue_id", False)
 
-            issues = Issue.issue_objects.filter(
-                workspace__slug=slug,
-                project__project_projectmember__member=self.request.user,
-            )
+        issues = Issue.issue_objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=self.request.user,
+        )
 
-            if workspace_search == "false":
-                issues = issues.filter(project_id=project_id)
+        if workspace_search == "false":
+            issues = issues.filter(project_id=project_id)
 
-            if query:
-                issues = search_issues(query, issues)
+        if query:
+            issues = search_issues(query, issues)
 
-            if parent == "true" and issue_id:
-                issue = Issue.issue_objects.get(pk=issue_id)
-                issues = issues.filter(
-                    ~Q(pk=issue_id), ~Q(pk=issue.parent_id), parent__isnull=True
-                ).exclude(
-                    pk__in=Issue.issue_objects.filter(parent__isnull=False).values_list(
-                        "parent_id", flat=True
-                    )
+        if parent == "true" and issue_id:
+            issue = Issue.issue_objects.get(pk=issue_id)
+            issues = issues.filter(
+                ~Q(pk=issue_id), ~Q(pk=issue.parent_id), parent__isnull=True
+            ).exclude(
+                pk__in=Issue.issue_objects.filter(parent__isnull=False).values_list(
+                    "parent_id", flat=True
                 )
-            if issue_relation == "true" and issue_id:
-                issue = Issue.issue_objects.get(pk=issue_id)
-                issues = issues.filter(
-                    ~Q(pk=issue_id),
-                    ~Q(issue_related__issue=issue),
-                    ~Q(issue_relation__related_issue=issue),
-                )
-            if sub_issue == "true" and issue_id:
-                issue = Issue.issue_objects.get(pk=issue_id)
-                issues = issues.filter(~Q(pk=issue_id), parent__isnull=True)
-                if issue.parent:
-                    issues = issues.filter(~Q(pk=issue.parent_id))
-
-            if cycle == "true":
-                issues = issues.exclude(issue_cycle__isnull=False)
-
-            if module == "true":
-                issues = issues.exclude(issue_module__isnull=False)
-
-            return Response(
-                issues.values(
-                    "name",
-                    "id",
-                    "sequence_id",
-                    "project__name",
-                    "project__identifier",
-                    "project_id",
-                    "workspace__slug",
-                    "state__name",
-                    "state__group",
-                    "state__color",
-                ),
-                status=status.HTTP_200_OK,
             )
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            print(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        if issue_relation == "true" and issue_id:
+            issue = Issue.issue_objects.get(pk=issue_id)
+            issues = issues.filter(
+                ~Q(pk=issue_id),
+                ~Q(issue_related__issue=issue),
+                ~Q(issue_relation__related_issue=issue),
             )
+        if sub_issue == "true" and issue_id:
+            issue = Issue.issue_objects.get(pk=issue_id)
+            issues = issues.filter(~Q(pk=issue_id), parent__isnull=True)
+            if issue.parent:
+                issues = issues.filter(~Q(pk=issue.parent_id))
+
+        if cycle == "true":
+            issues = issues.exclude(issue_cycle__isnull=False)
+
+        if module == "true":
+            issues = issues.exclude(issue_module__isnull=False)
+
+        return Response(
+            issues.values(
+                "name",
+                "id",
+                "sequence_id",
+                "project__name",
+                "project__identifier",
+                "project_id",
+                "workspace__slug",
+                "state__name",
+                "state__group",
+                "state__color",
+            ),
+            status=status.HTTP_200_OK,
+        )
diff --git a/apiserver/plane/api/views/state.py b/apiserver/plane/api/views/state.py
index 4fe0c8260..dbb6e1d71 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -2,7 +2,6 @@
 from itertools import groupby
 
 # Django imports
-from django.db import IntegrityError
 from django.db.models import Q
 
 # Third party imports
@@ -41,67 +40,54 @@ class StateViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = StateSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError:
-            return Response(
-                {"error": "State with the name already exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = StateSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def list(self, request, slug, project_id):
-        try:
-            state_dict = dict()
-            states = StateSerializer(self.get_queryset(), many=True).data
-
+        states = StateSerializer(self.get_queryset(), many=True).data
+        grouped = request.GET.get("grouped", False)
+        if grouped == "true":
+            state_dict = {}
             for key, value in groupby(
                 sorted(states, key=lambda state: state["group"]),
                 lambda state: state.get("group"),
             ):
                 state_dict[str(key)] = list(value)
-
             return Response(state_dict, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        return Response(states, status=status.HTTP_200_OK)
+
+    def mark_as_default(self, request, slug, project_id, pk):
+        # Select all the states which are marked as default
+        _ = State.objects.filter(
+            workspace__slug=slug, project_id=project_id, default=True
+        ).update(default=False)
+        _ = State.objects.filter(
+            workspace__slug=slug, project_id=project_id, pk=pk
+        ).update(default=True)
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def destroy(self, request, slug, project_id, pk):
+        state = State.objects.get(
+            ~Q(name="Triage"),
+            pk=pk,
+            project_id=project_id,
+            workspace__slug=slug,
+        )
+
+        if state.default:
+            return Response({"error": "Default state cannot be deleted"}, status=False)
+
+        # Check for any issues in the state
+        issue_exist = Issue.issue_objects.filter(state=pk).exists()
+
+        if issue_exist:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "The state is not empty, only empty states can be deleted"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, slug, project_id, pk):
-        try:
-            state = State.objects.get(
-                ~Q(name="Triage"),
-                pk=pk, project_id=project_id, workspace__slug=slug,
-            )
-
-            if state.default:
-                return Response(
-                    {"error": "Default state cannot be deleted"}, status=False
-                )
-
-            # Check for any issues in the state
-            issue_exist = Issue.issue_objects.filter(state=pk).exists()
-
-            if issue_exist:
-                return Response(
-                    {
-                        "error": "The state is not empty, only empty states can be deleted"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            state.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except State.DoesNotExist:
-            return Response({"error": "State does not exists"}, status=status.HTTP_404)
+        state.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/user.py b/apiserver/plane/api/views/user.py
index 68958e504..2e40565b4 100644
--- a/apiserver/plane/api/views/user.py
+++ b/apiserver/plane/api/views/user.py
@@ -8,6 +8,8 @@ from sentry_sdk import capture_exception
 from plane.api.serializers import (
     UserSerializer,
     IssueActivitySerializer,
+    UserMeSerializer,
+    UserMeSettingsSerializer,
 )
 
 from plane.api.views.base import BaseViewSet, BaseAPIView
@@ -17,7 +19,6 @@ from plane.db.models import (
     WorkspaceMemberInvite,
     Issue,
     IssueActivity,
-    WorkspaceMember,
 )
 from plane.utils.paginator import BasePaginator
 
@@ -30,129 +31,43 @@ class UserEndpoint(BaseViewSet):
         return self.request.user
 
     def retrieve(self, request):
-        try:
-            workspace = Workspace.objects.get(
-                pk=request.user.last_workspace_id, workspace_member__member=request.user
-            )
-            workspace_invites = WorkspaceMemberInvite.objects.filter(
-                email=request.user.email
-            ).count()
-            assigned_issues = Issue.issue_objects.filter(
-                assignees__in=[request.user]
-            ).count()
+        serialized_data = UserMeSerializer(request.user).data
+        return Response(
+            serialized_data,
+            status=status.HTTP_200_OK,
+        )
 
-            serialized_data = UserSerializer(request.user).data
-            serialized_data["workspace"] = {
-                "last_workspace_id": request.user.last_workspace_id,
-                "last_workspace_slug": workspace.slug,
-                "fallback_workspace_id": request.user.last_workspace_id,
-                "fallback_workspace_slug": workspace.slug,
-                "invites": workspace_invites,
-            }
-            serialized_data.setdefault("issues", {})[
-                "assigned_issues"
-            ] = assigned_issues
-
-            return Response(
-                serialized_data,
-                status=status.HTTP_200_OK,
-            )
-        except Workspace.DoesNotExist:
-            # This exception will be hit even when the `last_workspace_id` is None
-
-            workspace_invites = WorkspaceMemberInvite.objects.filter(
-                email=request.user.email
-            ).count()
-            assigned_issues = Issue.issue_objects.filter(
-                assignees__in=[request.user]
-            ).count()
-
-            fallback_workspace = (
-                Workspace.objects.filter(workspace_member__member=request.user)
-                .order_by("created_at")
-                .first()
-            )
-
-            serialized_data = UserSerializer(request.user).data
-
-            serialized_data["workspace"] = {
-                "last_workspace_id": None,
-                "last_workspace_slug": None,
-                "fallback_workspace_id": fallback_workspace.id
-                if fallback_workspace is not None
-                else None,
-                "fallback_workspace_slug": fallback_workspace.slug
-                if fallback_workspace is not None
-                else None,
-                "invites": workspace_invites,
-            }
-            serialized_data.setdefault("issues", {})[
-                "assigned_issues"
-            ] = assigned_issues
-
-            return Response(
-                serialized_data,
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def retrieve_user_settings(self, request):
+        serialized_data = UserMeSettingsSerializer(request.user).data
+        return Response(serialized_data, status=status.HTTP_200_OK)
 
 
 class UpdateUserOnBoardedEndpoint(BaseAPIView):
     def patch(self, request):
-        try:
-            user = User.objects.get(pk=request.user.id)
-            user.is_onboarded = request.data.get("is_onboarded", False)
-            user.save()
-            return Response(
-                {"message": "Updated successfully"}, status=status.HTTP_200_OK
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        user = User.objects.get(pk=request.user.id)
+        user.is_onboarded = request.data.get("is_onboarded", False)
+        user.save()
+        return Response({"message": "Updated successfully"}, status=status.HTTP_200_OK)
 
 
 class UpdateUserTourCompletedEndpoint(BaseAPIView):
     def patch(self, request):
-        try:
-            user = User.objects.get(pk=request.user.id)
-            user.is_tour_completed = request.data.get("is_tour_completed", False)
-            user.save()
-            return Response(
-                {"message": "Updated successfully"}, status=status.HTTP_200_OK
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        user = User.objects.get(pk=request.user.id)
+        user.is_tour_completed = request.data.get("is_tour_completed", False)
+        user.save()
+        return Response({"message": "Updated successfully"}, status=status.HTTP_200_OK)
 
 
 class UserActivityEndpoint(BaseAPIView, BasePaginator):
     def get(self, request, slug):
-        try:
-            queryset = IssueActivity.objects.filter(
-                actor=request.user, workspace__slug=slug
-            ).select_related("actor", "workspace", "issue", "project")
+        queryset = IssueActivity.objects.filter(
+            actor=request.user, workspace__slug=slug
+        ).select_related("actor", "workspace", "issue", "project")
 
-            return self.paginate(
-                request=request,
-                queryset=queryset,
-                on_results=lambda issue_activities: IssueActivitySerializer(
-                    issue_activities, many=True
-                ).data,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return self.paginate(
+            request=request,
+            queryset=queryset,
+            on_results=lambda issue_activities: IssueActivitySerializer(
+                issue_activities, many=True
+            ).data,
+        )
diff --git a/apiserver/plane/api/views/view.py b/apiserver/plane/api/views/view.py
index 435f8725a..f58f320b7 100644
--- a/apiserver/plane/api/views/view.py
+++ b/apiserver/plane/api/views/view.py
@@ -13,7 +13,6 @@ from django.db.models import (
 )
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
-from django.db import IntegrityError
 from django.db.models import Prefetch, OuterRef, Exists
 
 # Third party imports
@@ -94,123 +93,111 @@ class GlobalViewIssuesViewSet(BaseViewSet):
             )
         )
 
-        
     @method_decorator(gzip_page)
     def list(self, request, slug):
-        try:
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            issue_queryset = (
-                self.get_queryset()
-                .filter(**filters)
-                .filter(project__project_projectmember__member=self.request.user)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .filter(project__project_projectmember__member=self.request.user)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
 
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
+            ).order_by("priority_order")
 
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            sub_group_by = request.GET.get("sub_group_by", False)
-            if sub_group_by and sub_group_by == group_by:
-                return Response(
-                    {"error": "Group by and sub group by cannot be same"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            
-            if group_by:
-                return Response(
-                    group_results(issues, group_by, sub_group_by), status=status.HTTP_200_OK
-                )
-
-            return Response(issues, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Group by and sub group by cannot be same"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(issues, status=status.HTTP_200_OK)
+
 
 class IssueViewViewSet(BaseViewSet):
     serializer_class = IssueViewSerializer
@@ -243,51 +230,6 @@ class IssueViewViewSet(BaseViewSet):
         )
 
 
-class ViewIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def get(self, request, slug, project_id, view_id):
-        try:
-            view = IssueView.objects.get(pk=view_id)
-            queries = view.query
-
-            filters = issue_filters(request.query_params, "GET")
-
-            issues = (
-                Issue.issue_objects.filter(
-                    **queries, project_id=project_id, workspace__slug=slug
-                )
-                .filter(**filters)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-            )
-
-            serializer = IssueLiteSerializer(issues, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except IssueView.DoesNotExist:
-            return Response(
-                {"error": "Issue View does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
 class IssueViewFavoriteViewSet(BaseViewSet):
     serializer_class = IssueViewFavoriteSerializer
     model = IssueViewFavorite
@@ -302,49 +244,18 @@ class IssueViewFavoriteViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = IssueViewFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The view is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = IssueViewFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, view_id):
-        try:
-            view_favourite = IssueViewFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                view_id=view_id,
-            )
-            view_favourite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueViewFavorite.DoesNotExist:
-            return Response(
-                {"error": "View is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        view_favourite = IssueViewFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            view_id=view_id,
+        )
+        view_favourite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index 8d518b160..c53fbf126 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -6,12 +6,10 @@ from uuid import uuid4
 
 # Django imports
 from django.db import IntegrityError
-from django.db.models import Prefetch
 from django.conf import settings
 from django.utils import timezone
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
-from django.contrib.sites.shortcuts import get_current_site
 from django.db.models import (
     Prefetch,
     OuterRef,
@@ -48,13 +46,13 @@ from plane.api.serializers import (
     IssueActivitySerializer,
     IssueLiteSerializer,
     WorkspaceMemberAdminSerializer,
+    WorkspaceMemberMeSerializer,
 )
 from plane.api.views.base import BaseAPIView
 from . import BaseViewSet
 from plane.db.models import (
     User,
     Workspace,
-    WorkspaceMember,
     WorkspaceMemberInvite,
     Team,
     ProjectMember,
@@ -164,23 +162,12 @@ class WorkSpaceViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        ## Handling unique integrity error for now
-        ## TODO: Extend this to handle other common errors which are not automatically handled by APIException
         except IntegrityError as e:
             if "already exists" in str(e):
                 return Response(
                     {"slug": "The workspace with the slug already exists"},
                     status=status.HTTP_410_GONE,
                 )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {
-                    "error": "Something went wrong please try again later",
-                    "identifier": None,
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
 
 class UserWorkSpacesEndpoint(BaseAPIView):
@@ -192,70 +179,53 @@ class UserWorkSpacesEndpoint(BaseAPIView):
     ]
 
     def get(self, request):
-        try:
-            member_count = (
-                WorkspaceMember.objects.filter(
-                    workspace=OuterRef("id"), member__is_bot=False
+        member_count = (
+            WorkspaceMember.objects.filter(
+                workspace=OuterRef("id"), member__is_bot=False
+            )
+            .order_by()
+            .annotate(count=Func(F("id"), function="Count"))
+            .values("count")
+        )
+
+        issue_count = (
+            Issue.issue_objects.filter(workspace=OuterRef("id"))
+            .order_by()
+            .annotate(count=Func(F("id"), function="Count"))
+            .values("count")
+        )
+
+        workspace = (
+            (
+                Workspace.objects.prefetch_related(
+                    Prefetch("workspace_member", queryset=WorkspaceMember.objects.all())
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-
-            issue_count = (
-                Issue.issue_objects.filter(workspace=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-
-            workspace = (
-                (
-                    Workspace.objects.prefetch_related(
-                        Prefetch(
-                            "workspace_member", queryset=WorkspaceMember.objects.all()
-                        )
-                    )
-                    .filter(
-                        workspace_member__member=request.user,
-                    )
-                    .select_related("owner")
+                .filter(
+                    workspace_member__member=request.user,
                 )
-                .annotate(total_members=member_count)
-                .annotate(total_issues=issue_count)
+                .select_related("owner")
             )
+            .annotate(total_members=member_count)
+            .annotate(total_issues=issue_count)
+        )
 
-            serializer = WorkSpaceSerializer(self.filter_queryset(workspace), many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = WorkSpaceSerializer(self.filter_queryset(workspace), many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class WorkSpaceAvailabilityCheckEndpoint(BaseAPIView):
     def get(self, request):
-        try:
-            slug = request.GET.get("slug", False)
+        slug = request.GET.get("slug", False)
 
-            if not slug or slug == "":
-                return Response(
-                    {"error": "Workspace Slug is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            workspace = Workspace.objects.filter(slug=slug).exists()
-            return Response({"status": not workspace}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        if not slug or slug == "":
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Workspace Slug is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        workspace = Workspace.objects.filter(slug=slug).exists()
+        return Response({"status": not workspace}, status=status.HTTP_200_OK)
+
 
 class InviteWorkspaceEndpoint(BaseAPIView):
     permission_classes = [
@@ -263,126 +233,113 @@ class InviteWorkspaceEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug):
-        try:
-            emails = request.data.get("emails", False)
-            # Check if email is provided
-            if not emails or not len(emails):
-                return Response(
-                    {"error": "Emails are required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            # check for role level
-            requesting_user = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
+        emails = request.data.get("emails", False)
+        # Check if email is provided
+        if not emails or not len(emails):
+            return Response(
+                {"error": "Emails are required"}, status=status.HTTP_400_BAD_REQUEST
             )
-            if len(
-                [
-                    email
-                    for email in emails
-                    if int(email.get("role", 10)) > requesting_user.role
-                ]
-            ):
-                return Response(
-                    {"error": "You cannot invite a user with higher role"},
-                    status=status.HTTP_400_BAD_REQUEST,
+
+        # check for role level
+        requesting_user = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        if len(
+            [
+                email
+                for email in emails
+                if int(email.get("role", 10)) > requesting_user.role
+            ]
+        ):
+            return Response(
+                {"error": "You cannot invite a user with higher role"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        workspace = Workspace.objects.get(slug=slug)
+
+        # Check if user is already a member of workspace
+        workspace_members = WorkspaceMember.objects.filter(
+            workspace_id=workspace.id,
+            member__email__in=[email.get("email") for email in emails],
+        ).select_related("member", "workspace", "workspace__owner")
+
+        if len(workspace_members):
+            return Response(
+                {
+                    "error": "Some users are already member of workspace",
+                    "workspace_users": WorkSpaceMemberSerializer(
+                        workspace_members, many=True
+                    ).data,
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        workspace_invitations = []
+        for email in emails:
+            try:
+                validate_email(email.get("email"))
+                workspace_invitations.append(
+                    WorkspaceMemberInvite(
+                        email=email.get("email").strip().lower(),
+                        workspace_id=workspace.id,
+                        token=jwt.encode(
+                            {
+                                "email": email,
+                                "timestamp": datetime.now().timestamp(),
+                            },
+                            settings.SECRET_KEY,
+                            algorithm="HS256",
+                        ),
+                        role=email.get("role", 10),
+                        created_by=request.user,
+                    )
                 )
-
-            workspace = Workspace.objects.get(slug=slug)
-
-            # Check if user is already a member of workspace
-            workspace_members = WorkspaceMember.objects.filter(
-                workspace_id=workspace.id,
-                member__email__in=[email.get("email") for email in emails],
-            ).select_related("member", "workspace", "workspace__owner")
-
-            if len(workspace_members):
+            except ValidationError:
                 return Response(
                     {
-                        "error": "Some users are already member of workspace",
-                        "workspace_users": WorkSpaceMemberSerializer(
-                            workspace_members, many=True
-                        ).data,
+                        "error": f"Invalid email - {email} provided a valid email address is required to send the invite"
                     },
                     status=status.HTTP_400_BAD_REQUEST,
                 )
+        WorkspaceMemberInvite.objects.bulk_create(
+            workspace_invitations, batch_size=10, ignore_conflicts=True
+        )
 
-            workspace_invitations = []
-            for email in emails:
-                try:
-                    validate_email(email.get("email"))
-                    workspace_invitations.append(
-                        WorkspaceMemberInvite(
-                            email=email.get("email").strip().lower(),
-                            workspace_id=workspace.id,
-                            token=jwt.encode(
-                                {
-                                    "email": email,
-                                    "timestamp": datetime.now().timestamp(),
-                                },
-                                settings.SECRET_KEY,
-                                algorithm="HS256",
-                            ),
-                            role=email.get("role", 10),
-                            created_by=request.user,
-                        )
+        workspace_invitations = WorkspaceMemberInvite.objects.filter(
+            email__in=[email.get("email") for email in emails]
+        ).select_related("workspace")
+
+        # create the user if signup is disabled
+        if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
+            _ = User.objects.bulk_create(
+                [
+                    User(
+                        username=str(uuid4().hex),
+                        email=invitation.email,
+                        password=make_password(uuid4().hex),
+                        is_password_autoset=True,
                     )
-                except ValidationError:
-                    return Response(
-                        {
-                            "error": f"Invalid email - {email} provided a valid email address is required to send the invite"
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-            WorkspaceMemberInvite.objects.bulk_create(
-                workspace_invitations, batch_size=10, ignore_conflicts=True
+                    for invitation in workspace_invitations
+                ],
+                batch_size=100,
             )
 
-            workspace_invitations = WorkspaceMemberInvite.objects.filter(
-                email__in=[email.get("email") for email in emails]
-            ).select_related("workspace")
-
-            # create the user if signup is disabled
-            if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
-                _ = User.objects.bulk_create(
-                    [
-                        User(
-                            username=str(uuid4().hex),
-                            email=invitation.email,
-                            password=make_password(uuid4().hex),
-                            is_password_autoset=True,
-                        )
-                        for invitation in workspace_invitations
-                    ],
-                    batch_size=100,
-                )
-
-            for invitation in workspace_invitations:
-                workspace_invitation.delay(
-                    invitation.email,
-                    workspace.id,
-                    invitation.token,
-                    settings.WEB_URL,
-                    request.user.email,
-                )
-
-            return Response(
-                {
-                    "message": "Emails sent successfully",
-                },
-                status=status.HTTP_200_OK,
+        for invitation in workspace_invitations:
+            workspace_invitation.delay(
+                invitation.email,
+                workspace.id,
+                invitation.token,
+                settings.WEB_URL,
+                request.user.email,
             )
 
-        except Workspace.DoesNotExist:
-            return Response(
-                {"error": "Workspace does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {
+                "message": "Emails sent successfully",
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class JoinWorkspaceEndpoint(BaseAPIView):
@@ -391,68 +348,55 @@ class JoinWorkspaceEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, pk):
-        try:
-            workspace_invite = WorkspaceMemberInvite.objects.get(
-                pk=pk, workspace__slug=slug
+        workspace_invite = WorkspaceMemberInvite.objects.get(
+            pk=pk, workspace__slug=slug
+        )
+
+        email = request.data.get("email", "")
+
+        if email == "" or workspace_invite.email != email:
+            return Response(
+                {"error": "You do not have permission to join the workspace"},
+                status=status.HTTP_403_FORBIDDEN,
             )
 
-            email = request.data.get("email", "")
+        if workspace_invite.responded_at is None:
+            workspace_invite.accepted = request.data.get("accepted", False)
+            workspace_invite.responded_at = timezone.now()
+            workspace_invite.save()
 
-            if email == "" or workspace_invite.email != email:
-                return Response(
-                    {"error": "You do not have permission to join the workspace"},
-                    status=status.HTTP_403_FORBIDDEN,
-                )
+            if workspace_invite.accepted:
+                # Check if the user created account after invitation
+                user = User.objects.filter(email=email).first()
 
-            if workspace_invite.responded_at is None:
-                workspace_invite.accepted = request.data.get("accepted", False)
-                workspace_invite.responded_at = timezone.now()
-                workspace_invite.save()
-
-                if workspace_invite.accepted:
-                    # Check if the user created account after invitation
-                    user = User.objects.filter(email=email).first()
-
-                    # If the user is present then create the workspace member
-                    if user is not None:
-                        WorkspaceMember.objects.create(
-                            workspace=workspace_invite.workspace,
-                            member=user,
-                            role=workspace_invite.role,
-                        )
-
-                        user.last_workspace_id = workspace_invite.workspace.id
-                        user.save()
-
-                        # Delete the invitation
-                        workspace_invite.delete()
-
-                    return Response(
-                        {"message": "Workspace Invitation Accepted"},
-                        status=status.HTTP_200_OK,
+                # If the user is present then create the workspace member
+                if user is not None:
+                    WorkspaceMember.objects.create(
+                        workspace=workspace_invite.workspace,
+                        member=user,
+                        role=workspace_invite.role,
                     )
 
+                    user.last_workspace_id = workspace_invite.workspace.id
+                    user.save()
+
+                    # Delete the invitation
+                    workspace_invite.delete()
+
                 return Response(
-                    {"message": "Workspace Invitation was not accepted"},
+                    {"message": "Workspace Invitation Accepted"},
                     status=status.HTTP_200_OK,
                 )
 
             return Response(
-                {"error": "You have already responded to the invitation request"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"message": "Workspace Invitation was not accepted"},
+                status=status.HTTP_200_OK,
             )
 
-        except WorkspaceMemberInvite.DoesNotExist:
-            return Response(
-                {"error": "The invitation either got expired or could not be found"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {"error": "You have already responded to the invitation request"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
 
 
 class WorkspaceInvitationsViewset(BaseViewSet):
@@ -472,28 +416,16 @@ class WorkspaceInvitationsViewset(BaseViewSet):
         )
 
     def destroy(self, request, slug, pk):
-        try:
-            workspace_member_invite = WorkspaceMemberInvite.objects.get(
-                pk=pk, workspace__slug=slug
-            )
-            # delete the user if signup is disabled
-            if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
-                user = User.objects.filter(email=workspace_member_invite.email).first()
-                if user is not None:
-                    user.delete()
-            workspace_member_invite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except WorkspaceMemberInvite.DoesNotExist:
-            return Response(
-                {"error": "Workspace member invite does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace_member_invite = WorkspaceMemberInvite.objects.get(
+            pk=pk, workspace__slug=slug
+        )
+        # delete the user if signup is disabled
+        if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
+            user = User.objects.filter(email=workspace_member_invite.email).first()
+            if user is not None:
+                user.delete()
+        workspace_member_invite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserWorkspaceInvitationsEndpoint(BaseViewSet):
@@ -510,35 +442,26 @@ class UserWorkspaceInvitationsEndpoint(BaseViewSet):
         )
 
     def create(self, request):
-        try:
-            invitations = request.data.get("invitations")
-            workspace_invitations = WorkspaceMemberInvite.objects.filter(
-                pk__in=invitations
-            )
+        invitations = request.data.get("invitations")
+        workspace_invitations = WorkspaceMemberInvite.objects.filter(pk__in=invitations)
 
-            WorkspaceMember.objects.bulk_create(
-                [
-                    WorkspaceMember(
-                        workspace=invitation.workspace,
-                        member=request.user,
-                        role=invitation.role,
-                        created_by=request.user,
-                    )
-                    for invitation in workspace_invitations
-                ],
-                ignore_conflicts=True,
-            )
+        WorkspaceMember.objects.bulk_create(
+            [
+                WorkspaceMember(
+                    workspace=invitation.workspace,
+                    member=request.user,
+                    role=invitation.role,
+                    created_by=request.user,
+                )
+                for invitation in workspace_invitations
+            ],
+            ignore_conflicts=True,
+        )
 
-            # Delete joined workspace invites
-            workspace_invitations.delete()
+        # Delete joined workspace invites
+        workspace_invitations.delete()
 
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class WorkSpaceMemberViewSet(BaseViewSet):
@@ -546,7 +469,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     model = WorkspaceMember
 
     permission_classes = [
-        WorkSpaceAdminPermission,
+        WorkspaceEntityPermission,
     ]
 
     search_fields = [
@@ -563,131 +486,124 @@ class WorkSpaceMemberViewSet(BaseViewSet):
             .select_related("member")
         )
 
-    def partial_update(self, request, slug, pk):
-        try:
-            workspace_member = WorkspaceMember.objects.get(pk=pk, workspace__slug=slug)
-            if request.user.id == workspace_member.member_id:
-                return Response(
-                    {"error": "You cannot update your own role"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+    def list(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user, workspace__slug=slug
+        )
 
-            # Get the requested user role
-            requested_workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            # Check if role is being updated
-            # One cannot update role higher than his own role
-            if (
-                "role" in request.data
-                and int(request.data.get("role", workspace_member.role))
-                > requested_workspace_member.role
-            ):
-                return Response(
-                    {
-                        "error": "You cannot update a role that is higher than your own role"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        workspace_members = WorkspaceMember.objects.filter(
+            workspace__slug=slug,
+            member__is_bot=False,
+        ).select_related("workspace", "member")
 
+        if workspace_member.role > 10:
+            serializer = WorkspaceMemberAdminSerializer(workspace_members, many=True)
+        else:
             serializer = WorkSpaceMemberSerializer(
-                workspace_member, data=request.data, partial=True
+                workspace_members,
+                many=True,
+            )
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def partial_update(self, request, slug, pk):
+        workspace_member = WorkspaceMember.objects.get(pk=pk, workspace__slug=slug)
+        if request.user.id == workspace_member.member_id:
+            return Response(
+                {"error": "You cannot update your own role"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except WorkspaceMember.DoesNotExist:
+        # Get the requested user role
+        requested_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        # Check if role is being updated
+        # One cannot update role higher than his own role
+        if (
+            "role" in request.data
+            and int(request.data.get("role", workspace_member.role))
+            > requested_workspace_member.role
+        ):
             return Response(
-                {"error": "Workspace Member does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "You cannot update a role that is higher than your own role"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        serializer = WorkSpaceMemberSerializer(
+            workspace_member, data=request.data, partial=True
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
     def destroy(self, request, slug, pk):
-        try:
-            # Check the user role who is deleting the user
-            workspace_member = WorkspaceMember.objects.get(workspace__slug=slug, pk=pk)
+        # Check the user role who is deleting the user
+        workspace_member = WorkspaceMember.objects.get(workspace__slug=slug, pk=pk)
 
-            # check requesting user role
-            requesting_workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            if requesting_workspace_member.role < workspace_member.role:
-                return Response(
-                    {"error": "You cannot remove a user having role higher than you"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Check for the only member in the workspace
-            if (
-                workspace_member.role == 20
-                and WorkspaceMember.objects.filter(
-                    workspace__slug=slug,
-                    role=20,
-                    member__is_bot=False,
-                ).count()
-                == 1
-            ):
-                return Response(
-                    {"error": "Cannot delete the only Admin for the workspace"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Delete the user also from all the projects
-            ProjectMember.objects.filter(
-                workspace__slug=slug, member=workspace_member.member
-            ).delete()
-            # Remove all favorites
-            ProjectFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            CycleFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            ModuleFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            PageFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            IssueViewFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            # Also remove issue from issue assigned
-            IssueAssignee.objects.filter(
-                workspace__slug=slug, assignee=workspace_member.member
-            ).delete()
-
-            # Remove if module member
-            ModuleMember.objects.filter(
-                workspace__slug=slug, member=workspace_member.member
-            ).delete()
-            # Delete owned Pages
-            Page.objects.filter(
-                workspace__slug=slug, owned_by=workspace_member.member
-            ).delete()
-
-            workspace_member.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except WorkspaceMember.DoesNotExist:
+        # check requesting user role
+        requesting_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        if requesting_workspace_member.role < workspace_member.role:
             return Response(
-                {"error": "Workspace Member does not exists"},
+                {"error": "You cannot remove a user having role higher than you"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        # Check for the only member in the workspace
+        if (
+            workspace_member.role == 20
+            and WorkspaceMember.objects.filter(
+                workspace__slug=slug,
+                role=20,
+                member__is_bot=False,
+            ).count()
+            == 1
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Cannot delete the only Admin for the workspace"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Delete the user also from all the projects
+        ProjectMember.objects.filter(
+            workspace__slug=slug, member=workspace_member.member
+        ).delete()
+        # Remove all favorites
+        ProjectFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        CycleFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        ModuleFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        PageFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        IssueViewFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        # Also remove issue from issue assigned
+        IssueAssignee.objects.filter(
+            workspace__slug=slug, assignee=workspace_member.member
+        ).delete()
+
+        # Remove if module member
+        ModuleMember.objects.filter(
+            workspace__slug=slug, member=workspace_member.member
+        ).delete()
+        # Delete owned Pages
+        Page.objects.filter(
+            workspace__slug=slug, owned_by=workspace_member.member
+        ).delete()
+
+        workspace_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class TeamMemberViewSet(BaseViewSet):
     serializer_class = TeamSerializer
@@ -711,51 +627,36 @@ class TeamMemberViewSet(BaseViewSet):
         )
 
     def create(self, request, slug):
-        try:
-            members = list(
-                WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member__id__in=request.data.get("members", [])
-                )
-                .annotate(member_str_id=Cast("member", output_field=CharField()))
-                .distinct()
-                .values_list("member_str_id", flat=True)
+        members = list(
+            WorkspaceMember.objects.filter(
+                workspace__slug=slug, member__id__in=request.data.get("members", [])
             )
+            .annotate(member_str_id=Cast("member", output_field=CharField()))
+            .distinct()
+            .values_list("member_str_id", flat=True)
+        )
 
-            if len(members) != len(request.data.get("members", [])):
-                users = list(set(request.data.get("members", [])).difference(members))
-                users = User.objects.filter(pk__in=users)
+        if len(members) != len(request.data.get("members", [])):
+            users = list(set(request.data.get("members", [])).difference(members))
+            users = User.objects.filter(pk__in=users)
 
-                serializer = UserLiteSerializer(users, many=True)
-                return Response(
-                    {
-                        "error": f"{len(users)} of the member(s) are not a part of the workspace",
-                        "members": serializer.data,
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            workspace = Workspace.objects.get(slug=slug)
-
-            serializer = TeamSerializer(
-                data=request.data, context={"workspace": workspace}
-            )
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The team with the name already exists"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Exception as e:
-            capture_exception(e)
+            serializer = UserLiteSerializer(users, many=True)
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": f"{len(users)} of the member(s) are not a part of the workspace",
+                    "members": serializer.data,
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        workspace = Workspace.objects.get(slug=slug)
+
+        serializer = TeamSerializer(data=request.data, context={"workspace": workspace})
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
 
 class UserWorkspaceInvitationEndpoint(BaseViewSet):
     model = WorkspaceMemberInvite
@@ -776,140 +677,93 @@ class UserWorkspaceInvitationEndpoint(BaseViewSet):
 
 class UserLastProjectWithWorkspaceEndpoint(BaseAPIView):
     def get(self, request):
-        try:
-            user = User.objects.get(pk=request.user.id)
+        user = User.objects.get(pk=request.user.id)
 
-            last_workspace_id = user.last_workspace_id
-
-            if last_workspace_id is None:
-                return Response(
-                    {
-                        "project_details": [],
-                        "workspace_details": {},
-                    },
-                    status=status.HTTP_200_OK,
-                )
-
-            workspace = Workspace.objects.get(pk=last_workspace_id)
-            workspace_serializer = WorkSpaceSerializer(workspace)
-
-            project_member = ProjectMember.objects.filter(
-                workspace_id=last_workspace_id, member=request.user
-            ).select_related("workspace", "project", "member", "workspace__owner")
-
-            project_member_serializer = ProjectMemberSerializer(
-                project_member, many=True
-            )
+        last_workspace_id = user.last_workspace_id
 
+        if last_workspace_id is None:
             return Response(
                 {
-                    "workspace_details": workspace_serializer.data,
-                    "project_details": project_member_serializer.data,
+                    "project_details": [],
+                    "workspace_details": {},
                 },
                 status=status.HTTP_200_OK,
             )
 
-        except User.DoesNotExist:
-            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace = Workspace.objects.get(pk=last_workspace_id)
+        workspace_serializer = WorkSpaceSerializer(workspace)
+
+        project_member = ProjectMember.objects.filter(
+            workspace_id=last_workspace_id, member=request.user
+        ).select_related("workspace", "project", "member", "workspace__owner")
+
+        project_member_serializer = ProjectMemberSerializer(project_member, many=True)
+
+        return Response(
+            {
+                "workspace_details": workspace_serializer.data,
+                "project_details": project_member_serializer.data,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class WorkspaceMemberUserEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            workspace_member = WorkspaceMember.objects.get(
-                member=request.user, workspace__slug=slug
-            )
-            serializer = WorkSpaceMemberSerializer(workspace_member)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except (Workspace.DoesNotExist, WorkspaceMember.DoesNotExist):
-            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user, workspace__slug=slug
+        )
+        serializer = WorkspaceMemberMeSerializer(workspace_member)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class WorkspaceMemberUserViewsEndpoint(BaseAPIView):
     def post(self, request, slug):
-        try:
-            workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            workspace_member.view_props = request.data.get("view_props", {})
-            workspace_member.save()
+        workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        workspace_member.view_props = request.data.get("view_props", {})
+        workspace_member.save()
 
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except WorkspaceMember.DoesNotExist:
-            return Response(
-                {"error": "User not a member of workspace"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserActivityGraphEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            issue_activities = (
-                IssueActivity.objects.filter(
-                    actor=request.user,
-                    workspace__slug=slug,
-                    created_at__date__gte=date.today() + relativedelta(months=-6),
-                )
-                .annotate(created_date=Cast("created_at", DateField()))
-                .values("created_date")
-                .annotate(activity_count=Count("created_date"))
-                .order_by("created_date")
+        issue_activities = (
+            IssueActivity.objects.filter(
+                actor=request.user,
+                workspace__slug=slug,
+                created_at__date__gte=date.today() + relativedelta(months=-6),
             )
+            .annotate(created_date=Cast("created_at", DateField()))
+            .values("created_date")
+            .annotate(activity_count=Count("created_date"))
+            .order_by("created_date")
+        )
 
-            return Response(issue_activities, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(issue_activities, status=status.HTTP_200_OK)
 
 
 class UserIssueCompletedGraphEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            month = request.GET.get("month", 1)
+        month = request.GET.get("month", 1)
 
-            issues = (
-                Issue.issue_objects.filter(
-                    assignees__in=[request.user],
-                    workspace__slug=slug,
-                    completed_at__month=month,
-                    completed_at__isnull=False,
-                )
-                .annotate(completed_week=ExtractWeek("completed_at"))
-                .annotate(week=F("completed_week") % 4)
-                .values("week")
-                .annotate(completed_count=Count("completed_week"))
-                .order_by("week")
+        issues = (
+            Issue.issue_objects.filter(
+                assignees__in=[request.user],
+                workspace__slug=slug,
+                completed_at__month=month,
+                completed_at__isnull=False,
             )
+            .annotate(completed_week=ExtractWeek("completed_at"))
+            .annotate(week=F("completed_week") % 4)
+            .values("week")
+            .annotate(completed_count=Count("completed_week"))
+            .order_by("week")
+        )
 
-            return Response(issues, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(issues, status=status.HTTP_200_OK)
 
 
 class WeekInMonth(Func):
@@ -919,108 +773,100 @@ class WeekInMonth(Func):
 
 class UserWorkspaceDashboardEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            issue_activities = (
-                IssueActivity.objects.filter(
-                    actor=request.user,
-                    workspace__slug=slug,
-                    created_at__date__gte=date.today() + relativedelta(months=-3),
-                )
-                .annotate(created_date=Cast("created_at", DateField()))
-                .values("created_date")
-                .annotate(activity_count=Count("created_date"))
-                .order_by("created_date")
+        issue_activities = (
+            IssueActivity.objects.filter(
+                actor=request.user,
+                workspace__slug=slug,
+                created_at__date__gte=date.today() + relativedelta(months=-3),
             )
+            .annotate(created_date=Cast("created_at", DateField()))
+            .values("created_date")
+            .annotate(activity_count=Count("created_date"))
+            .order_by("created_date")
+        )
 
-            month = request.GET.get("month", 1)
+        month = request.GET.get("month", 1)
 
-            completed_issues = (
-                Issue.issue_objects.filter(
-                    assignees__in=[request.user],
-                    workspace__slug=slug,
-                    completed_at__month=month,
-                    completed_at__isnull=False,
-                )
-                .annotate(day_of_month=ExtractDay("completed_at"))
-                .annotate(week_in_month=WeekInMonth(F("day_of_month")))
-                .values("week_in_month")
-                .annotate(completed_count=Count("id"))
-                .order_by("week_in_month")
+        completed_issues = (
+            Issue.issue_objects.filter(
+                assignees__in=[request.user],
+                workspace__slug=slug,
+                completed_at__month=month,
+                completed_at__isnull=False,
             )
+            .annotate(day_of_month=ExtractDay("completed_at"))
+            .annotate(week_in_month=WeekInMonth(F("day_of_month")))
+            .values("week_in_month")
+            .annotate(completed_count=Count("id"))
+            .order_by("week_in_month")
+        )
 
-            assigned_issues = Issue.issue_objects.filter(
+        assigned_issues = Issue.issue_objects.filter(
+            workspace__slug=slug, assignees__in=[request.user]
+        ).count()
+
+        pending_issues_count = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+        ).count()
+
+        completed_issues_count = Issue.issue_objects.filter(
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            state__group="completed",
+        ).count()
+
+        issues_due_week = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[request.user],
+            )
+            .annotate(target_week=ExtractWeek("target_date"))
+            .filter(target_week=timezone.now().date().isocalendar()[1])
+            .count()
+        )
+
+        state_distribution = (
+            Issue.issue_objects.filter(
                 workspace__slug=slug, assignees__in=[request.user]
-            ).count()
-
-            pending_issues_count = Issue.issue_objects.filter(
-                ~Q(state__group__in=["completed", "cancelled"]),
-                workspace__slug=slug,
-                assignees__in=[request.user],
-            ).count()
-
-            completed_issues_count = Issue.issue_objects.filter(
-                workspace__slug=slug,
-                assignees__in=[request.user],
-                state__group="completed",
-            ).count()
-
-            issues_due_week = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[request.user],
-                )
-                .annotate(target_week=ExtractWeek("target_date"))
-                .filter(target_week=timezone.now().date().isocalendar()[1])
-                .count()
             )
+            .annotate(state_group=F("state__group"))
+            .values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            state_distribution = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug, assignees__in=[request.user]
-                )
-                .annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        overdue_issues = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            target_date__lt=timezone.now(),
+            completed_at__isnull=True,
+        ).values("id", "name", "workspace__slug", "project_id", "target_date")
 
-            overdue_issues = Issue.issue_objects.filter(
-                ~Q(state__group__in=["completed", "cancelled"]),
-                workspace__slug=slug,
-                assignees__in=[request.user],
-                target_date__lt=timezone.now(),
-                completed_at__isnull=True,
-            ).values("id", "name", "workspace__slug", "project_id", "target_date")
+        upcoming_issues = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            start_date__gte=timezone.now(),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            completed_at__isnull=True,
+        ).values("id", "name", "workspace__slug", "project_id", "start_date")
 
-            upcoming_issues = Issue.issue_objects.filter(
-                ~Q(state__group__in=["completed", "cancelled"]),
-                start_date__gte=timezone.now(),
-                workspace__slug=slug,
-                assignees__in=[request.user],
-                completed_at__isnull=True,
-            ).values("id", "name", "workspace__slug", "project_id", "start_date")
-
-            return Response(
-                {
-                    "issue_activities": issue_activities,
-                    "completed_issues": completed_issues,
-                    "assigned_issues_count": assigned_issues,
-                    "pending_issues_count": pending_issues_count,
-                    "completed_issues_count": completed_issues_count,
-                    "issues_due_week_count": issues_due_week,
-                    "state_distribution": state_distribution,
-                    "overdue_issues": overdue_issues,
-                    "upcoming_issues": upcoming_issues,
-                },
-                status=status.HTTP_200_OK,
-            )
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {
+                "issue_activities": issue_activities,
+                "completed_issues": completed_issues,
+                "assigned_issues_count": assigned_issues,
+                "pending_issues_count": pending_issues_count,
+                "completed_issues_count": completed_issues_count,
+                "issues_due_week_count": issues_due_week,
+                "state_distribution": state_distribution,
+                "overdue_issues": overdue_issues,
+                "upcoming_issues": upcoming_issues,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class WorkspaceThemeViewSet(BaseViewSet):
@@ -1034,157 +880,138 @@ class WorkspaceThemeViewSet(BaseViewSet):
         return super().get_queryset().filter(workspace__slug=self.kwargs.get("slug"))
 
     def create(self, request, slug):
-        try:
-            workspace = Workspace.objects.get(slug=slug)
-            serializer = WorkspaceThemeSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(workspace=workspace, actor=request.user)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Workspace.DoesNotExist:
-            return Response(
-                {"error": "Workspace does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace = Workspace.objects.get(slug=slug)
+        serializer = WorkspaceThemeSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(workspace=workspace, actor=request.user)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
 
 class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
     def get(self, request, slug, user_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            state_distribution = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
-
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-
-            priority_distribution = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .values("priority")
-                .annotate(priority_count=Count("priority"))
-                .filter(priority_count__gte=1)
-                .annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        default=Value(len(priority_order)),
-                        output_field=IntegerField(),
-                    )
-                )
-                .order_by("priority_order")
-            )
-
-            created_issues = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    project__project_projectmember__member=request.user,
-                    created_by_id=user_id,
-                )
-                .filter(**filters)
-                .count()
-            )
-
-            assigned_issues_count = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
-            )
-
-            pending_issues_count = (
-                Issue.issue_objects.filter(
-                    ~Q(state__group__in=["completed", "cancelled"]),
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
-            )
-
-            completed_issues_count = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    state__group="completed",
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
-            )
-
-            subscribed_issues_count = (
-                IssueSubscriber.objects.filter(
-                    workspace__slug=slug,
-                    subscriber_id=user_id,
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
-            )
-
-            upcoming_cycles = CycleIssue.objects.filter(
+        state_distribution = (
+            Issue.issue_objects.filter(
                 workspace__slug=slug,
-                cycle__start_date__gt=timezone.now().date(),
-                issue__assignees__in=[
-                    user_id,
-                ],
-            ).values("cycle__name", "cycle__id", "cycle__project_id")
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .annotate(state_group=F("state__group"))
+            .values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            present_cycle = CycleIssue.objects.filter(
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+
+        priority_distribution = (
+            Issue.issue_objects.filter(
                 workspace__slug=slug,
-                cycle__start_date__lt=timezone.now().date(),
-                cycle__end_date__gt=timezone.now().date(),
-                issue__assignees__in=[
-                    user_id,
-                ],
-            ).values("cycle__name", "cycle__id", "cycle__project_id")
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .values("priority")
+            .annotate(priority_count=Count("priority"))
+            .filter(priority_count__gte=1)
+            .annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    default=Value(len(priority_order)),
+                    output_field=IntegerField(),
+                )
+            )
+            .order_by("priority_order")
+        )
 
-            return Response(
-                {
-                    "state_distribution": state_distribution,
-                    "priority_distribution": priority_distribution,
-                    "created_issues": created_issues,
-                    "assigned_issues": assigned_issues_count,
-                    "completed_issues": completed_issues_count,
-                    "pending_issues": pending_issues_count,
-                    "subscribed_issues": subscribed_issues_count,
-                    "present_cycles": present_cycle,
-                    "upcoming_cycles": upcoming_cycles,
-                }
+        created_issues = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
+                created_by_id=user_id,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+            .filter(**filters)
+            .count()
+        )
+
+        assigned_issues_count = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
             )
+            .filter(**filters)
+            .count()
+        )
+
+        pending_issues_count = (
+            Issue.issue_objects.filter(
+                ~Q(state__group__in=["completed", "cancelled"]),
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .count()
+        )
+
+        completed_issues_count = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                state__group="completed",
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .count()
+        )
+
+        subscribed_issues_count = (
+            IssueSubscriber.objects.filter(
+                workspace__slug=slug,
+                subscriber_id=user_id,
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .count()
+        )
+
+        upcoming_cycles = CycleIssue.objects.filter(
+            workspace__slug=slug,
+            cycle__start_date__gt=timezone.now().date(),
+            issue__assignees__in=[
+                user_id,
+            ],
+        ).values("cycle__name", "cycle__id", "cycle__project_id")
+
+        present_cycle = CycleIssue.objects.filter(
+            workspace__slug=slug,
+            cycle__start_date__lt=timezone.now().date(),
+            cycle__end_date__gt=timezone.now().date(),
+            issue__assignees__in=[
+                user_id,
+            ],
+        ).values("cycle__name", "cycle__id", "cycle__project_id")
+
+        return Response(
+            {
+                "state_distribution": state_distribution,
+                "priority_distribution": priority_distribution,
+                "created_issues": created_issues,
+                "assigned_issues": assigned_issues_count,
+                "completed_issues": completed_issues_count,
+                "pending_issues": pending_issues_count,
+                "subscribed_issues": subscribed_issues_count,
+                "present_cycles": present_cycle,
+                "upcoming_cycles": upcoming_cycles,
+            }
+        )
 
 
 class WorkspaceUserActivityEndpoint(BaseAPIView):
@@ -1193,132 +1020,116 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, user_id):
-        try:
-            projects = request.query_params.getlist("project", [])
+        projects = request.query_params.getlist("project", [])
 
-            queryset = IssueActivity.objects.filter(
-                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
-                workspace__slug=slug,
-                project__project_projectmember__member=request.user,
-                actor=user_id,
-            ).select_related("actor", "workspace", "issue", "project")
+        queryset = IssueActivity.objects.filter(
+            ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+            actor=user_id,
+        ).select_related("actor", "workspace", "issue", "project")
 
-            if projects:
-                queryset = queryset.filter(project__in=projects)
+        if projects:
+            queryset = queryset.filter(project__in=projects)
 
-            return self.paginate(
-                request=request,
-                queryset=queryset,
-                on_results=lambda issue_activities: IssueActivitySerializer(
-                    issue_activities, many=True
-                ).data,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return self.paginate(
+            request=request,
+            queryset=queryset,
+            on_results=lambda issue_activities: IssueActivitySerializer(
+                issue_activities, many=True
+            ).data,
+        )
 
 
 class WorkspaceUserProfileEndpoint(BaseAPIView):
     def get(self, request, slug, user_id):
-        try:
-            user_data = User.objects.get(pk=user_id)
+        user_data = User.objects.get(pk=user_id)
 
-            requesting_workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            projects = []
-            if requesting_workspace_member.role >= 10:
-                projects = (
-                    Project.objects.filter(
-                        workspace__slug=slug,
-                        project_projectmember__member=request.user,
-                    )
-                    .annotate(
-                        created_issues=Count(
-                            "project_issue",
-                            filter=Q(
-                                project_issue__created_by_id=user_id,
-                                project_issue__archived_at__isnull=True,
-                                project_issue__is_draft=False,
-                            ),
-                        )
-                    )
-                    .annotate(
-                        assigned_issues=Count(
-                            "project_issue",
-                            filter=Q(
-                                project_issue__assignees__in=[user_id],
-                                project_issue__archived_at__isnull=True,
-                                project_issue__is_draft=False,
-                            ),
-                        )
-                    )
-                    .annotate(
-                        completed_issues=Count(
-                            "project_issue",
-                            filter=Q(
-                                project_issue__completed_at__isnull=False,
-                                project_issue__assignees__in=[user_id],
-                                project_issue__archived_at__isnull=True,
-                                project_issue__is_draft=False,
-                            ),
-                        )
-                    )
-                    .annotate(
-                        pending_issues=Count(
-                            "project_issue",
-                            filter=Q(
-                                project_issue__state__group__in=[
-                                    "backlog",
-                                    "unstarted",
-                                    "started",
-                                ],
-                                project_issue__assignees__in=[user_id],
-                                project_issue__archived_at__isnull=True,
-                                project_issue__is_draft=False,
-                            ),
-                        )
-                    )
-                    .values(
-                        "id",
-                        "name",
-                        "identifier",
-                        "emoji",
-                        "icon_prop",
-                        "created_issues",
-                        "assigned_issues",
-                        "completed_issues",
-                        "pending_issues",
+        requesting_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        projects = []
+        if requesting_workspace_member.role >= 10:
+            projects = (
+                Project.objects.filter(
+                    workspace__slug=slug,
+                    project_projectmember__member=request.user,
+                )
+                .annotate(
+                    created_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__created_by_id=user_id,
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
                     )
                 )
+                .annotate(
+                    assigned_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__assignees__in=[user_id],
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
+                    )
+                )
+                .annotate(
+                    completed_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__completed_at__isnull=False,
+                            project_issue__assignees__in=[user_id],
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
+                    )
+                )
+                .annotate(
+                    pending_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__state__group__in=[
+                                "backlog",
+                                "unstarted",
+                                "started",
+                            ],
+                            project_issue__assignees__in=[user_id],
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
+                    )
+                )
+                .values(
+                    "id",
+                    "name",
+                    "identifier",
+                    "emoji",
+                    "icon_prop",
+                    "created_issues",
+                    "assigned_issues",
+                    "completed_issues",
+                    "pending_issues",
+                )
+            )
 
-            return Response(
-                {
-                    "project_data": projects,
-                    "user_data": {
-                        "email": user_data.email,
-                        "first_name": user_data.first_name,
-                        "last_name": user_data.last_name,
-                        "avatar": user_data.avatar,
-                        "cover_image": user_data.cover_image,
-                        "date_joined": user_data.date_joined,
-                        "user_timezone": user_data.user_timezone,
-                        "display_name": user_data.display_name,
-                    },
+        return Response(
+            {
+                "project_data": projects,
+                "user_data": {
+                    "email": user_data.email,
+                    "first_name": user_data.first_name,
+                    "last_name": user_data.last_name,
+                    "avatar": user_data.avatar,
+                    "cover_image": user_data.cover_image,
+                    "date_joined": user_data.date_joined,
+                    "user_timezone": user_data.user_timezone,
+                    "display_name": user_data.display_name,
                 },
-                status=status.HTTP_200_OK,
-            )
-        except WorkspaceMember.DoesNotExist:
-            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
@@ -1327,128 +1138,121 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, user_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", "none"]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
-            issue_queryset = (
-                Issue.issue_objects.filter(
-                    Q(assignees__in=[user_id])
-                    | Q(created_by_id=user_id)
-                    | Q(issue_subscribers__subscriber_id=user_id),
-                    workspace__slug=slug,
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .select_related("project", "workspace", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .order_by("-created_at")
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-            ).distinct()
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
-                )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
-                )
-
-            return Response(issues, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        order_by_param = request.GET.get("order_by", "-created_at")
+        issue_queryset = (
+            Issue.issue_objects.filter(
+                Q(assignees__in=[user_id])
+                | Q(created_by_id=user_id)
+                | Q(issue_subscribers__subscriber_id=user_id),
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
             )
+            .filter(**filters)
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .select_related("project", "workspace", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
+                )
+            )
+            .order_by("-created_at")
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        ).distinct()
+
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
+                )
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
+                )
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
+                )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            grouped_results = group_results(issues, group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(
+            issues, status=status.HTTP_200_OK
+        )
 
 
 class WorkspaceLabelsEndpoint(BaseAPIView):
@@ -1457,39 +1261,11 @@ class WorkspaceLabelsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            labels = Label.objects.filter(
-                workspace__slug=slug,
-                project__project_projectmember__member=request.user,
-            ).values("parent", "name", "color", "id", "project_id", "workspace__slug")
-            return Response(labels, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
-class WorkspaceMembersEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get(self, request, slug):
-        try:
-            workspace_members = WorkspaceMember.objects.filter(
-                workspace__slug=slug,
-                member__is_bot=False,
-            ).select_related("workspace", "member")
-            serialzier = WorkSpaceMemberSerializer(workspace_members, many=True)
-            return Response(serialzier.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        labels = Label.objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+        ).values("parent", "name", "color", "id", "project_id", "workspace__slug")
+        return Response(labels, status=status.HTTP_200_OK)
 
 
 class LeaveWorkspaceEndpoint(BaseAPIView):
@@ -1498,36 +1274,22 @@ class LeaveWorkspaceEndpoint(BaseAPIView):
     ]
 
     def delete(self, request, slug):
-        try:
-            workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
+        workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
 
-            # Only Admin case
-            if (
-                workspace_member.role == 20
-                and WorkspaceMember.objects.filter(
-                    workspace__slug=slug, role=20
-                ).count()
-                == 1
-            ):
-                return Response(
-                    {
-                        "error": "You cannot leave the workspace since you are the only admin of the workspace you should delete the workspace"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            # Delete the member from workspace
-            workspace_member.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except WorkspaceMember.DoesNotExist:
+        # Only Admin case
+        if (
+            workspace_member.role == 20
+            and WorkspaceMember.objects.filter(workspace__slug=slug, role=20).count()
+            == 1
+        ):
             return Response(
-                {"error": "Workspace member does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "You cannot leave the workspace since you are the only admin of the workspace you should delete the workspace"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        # Delete the member from workspace
+        workspace_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index 492be8870..a80770c37 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -20,8 +20,8 @@ from plane.utils.issue_filters import issue_filters
 row_mapping = {
     "state__name": "State",
     "state__group": "State Group",
-    "labels__name": "Label",
-    "assignees__display_name": "Assignee Name",
+    "labels__id": "Label",
+    "assignees__id": "Assignee Name",
     "start_date": "Start Date",
     "target_date": "Due Date",
     "completed_at": "Completed At",
@@ -29,8 +29,321 @@ row_mapping = {
     "issue_count": "Issue Count",
     "priority": "Priority",
     "estimate": "Estimate",
+    "issue_cycle__cycle_id": "Cycle",
+    "issue_module__module_id": "Module"
 }
 
+ASSIGNEE_ID = "assignees__id"
+LABEL_ID = "labels__id"
+STATE_ID = "state_id"
+CYCLE_ID = "issue_cycle__cycle_id"
+MODULE_ID = "issue_module__module_id"
+
+
+def send_export_email(email, slug, csv_buffer):
+    """Helper function to send export email."""
+    subject = "Your Export is ready"
+    html_content = render_to_string("emails/exports/analytics.html", {})
+    text_content = strip_tags(html_content)
+
+    csv_buffer.seek(0)
+    msg = EmailMultiAlternatives(subject, text_content, settings.EMAIL_FROM, [email])
+    msg.attach(f"{slug}-analytics.csv", csv_buffer.getvalue())
+    msg.send(fail_silently=False)
+
+
+def get_assignee_details(slug, filters):
+    """Fetch assignee details if required."""
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug, **filters, assignees__avatar__isnull=False
+        )
+        .distinct("assignees__id")
+        .order_by("assignees__id")
+        .values(
+            "assignees__avatar",
+            "assignees__display_name",
+            "assignees__first_name",
+            "assignees__last_name",
+            "assignees__id",
+        )
+    )
+
+
+def get_label_details(slug, filters):
+    """Fetch label details if required"""
+    return (
+        Issue.objects.filter(workspace__slug=slug, **filters, labels__id__isnull=False)
+        .distinct("labels__id")
+        .order_by("labels__id")
+        .values("labels__id", "labels__color", "labels__name")
+    )
+
+
+def get_state_details(slug, filters):
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug,
+            **filters,
+        )
+        .distinct("state_id")
+        .order_by("state_id")
+        .values("state_id", "state__name", "state__color")
+    )
+
+
+def get_module_details(slug, filters):
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug,
+            **filters,
+            issue_module__module_id__isnull=False,
+        )
+        .distinct("issue_module__module_id")
+        .order_by("issue_module__module_id")
+        .values(
+            "issue_module__module_id",
+            "issue_module__module__name",
+        )
+    )
+
+
+def get_cycle_details(slug, filters):
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug,
+            **filters,
+            issue_cycle__cycle_id__isnull=False,
+        )
+        .distinct("issue_cycle__cycle_id")
+        .order_by("issue_cycle__cycle_id")
+        .values(
+            "issue_cycle__cycle_id",
+            "issue_cycle__cycle__name",
+        )
+    )
+
+
+def generate_csv_from_rows(rows):
+    """Generate CSV buffer from rows."""
+    csv_buffer = io.StringIO()
+    writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
+    [writer.writerow(row) for row in rows]
+    return csv_buffer
+
+
+def generate_segmented_rows(
+    distribution,
+    x_axis,
+    y_axis,
+    segment,
+    key,
+    assignee_details,
+    label_details,
+    state_details,
+    cycle_details,
+    module_details,
+):
+    segment_zero = list(
+        set(
+            item.get("segment") for sublist in distribution.values() for item in sublist
+        )
+    )
+
+    segmented = segment
+
+    row_zero = [
+        row_mapping.get(x_axis, "X-Axis"),
+        row_mapping.get(y_axis, "Y-Axis"),
+    ] + segment_zero
+
+    rows = []
+    for item, data in distribution.items():
+        generated_row = [
+            item,
+            sum(obj.get(key) for obj in data if obj.get(key) is not None),
+        ]
+
+        for segment in segment_zero:
+            value = next((x.get(key) for x in data if x.get("segment") == segment), "0")
+            generated_row.append(value)
+
+        if x_axis == ASSIGNEE_ID:
+            assignee = next(
+                (
+                    user
+                    for user in assignee_details
+                    if str(user[ASSIGNEE_ID]) == str(item)
+                ),
+                None,
+            )
+            if assignee:
+                generated_row[
+                    0
+                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+
+        if x_axis == LABEL_ID:
+            label = next(
+                (lab for lab in label_details if str(lab[LABEL_ID]) == str(item)),
+                None,
+            )
+
+            if label:
+                generated_row[0] = f"{label['labels__name']}"
+
+        if x_axis == STATE_ID:
+            state = next(
+                (sta for sta in state_details if str(sta[STATE_ID]) == str(item)),
+                None,
+            )
+
+            if state:
+                generated_row[0] = f"{state['state__name']}"
+
+        if x_axis == CYCLE_ID:
+            cycle = next(
+                (cyc for cyc in cycle_details if str(cyc[CYCLE_ID]) == str(item)),
+                None,
+            )
+
+            if cycle:
+                generated_row[0] = f"{cycle['issue_cycle__cycle__name']}"
+
+        if x_axis == MODULE_ID:
+            module = next(
+                (mod for mod in module_details if str(mod[MODULE_ID]) == str(item)),
+                None,
+            )
+
+            if module:
+                generated_row[0] = f"{module['issue_module__module__name']}"
+
+        rows.append(tuple(generated_row))
+
+    if segmented == ASSIGNEE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            assignee = next(
+                (
+                    user
+                    for user in assignee_details
+                    if str(user[ASSIGNEE_ID]) == str(segm)
+                ),
+                None,
+            )
+            if assignee:
+                row_zero[
+                    index + 2
+                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+
+    if segmented == LABEL_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            label = next(
+                (lab for lab in label_details if str(lab[LABEL_ID]) == str(segm)),
+                None,
+            )
+            if label:
+                row_zero[index + 2] = label["labels__name"]
+
+    if segmented == STATE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            state = next(
+                (sta for sta in state_details if str(sta[STATE_ID]) == str(segm)),
+                None,
+            )
+            if state:
+                row_zero[index + 2] = state["state__name"]
+
+    if segmented == MODULE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            module = next(
+                (mod for mod in label_details if str(mod[MODULE_ID]) == str(segm)),
+                None,
+            )
+            if module:
+                row_zero[index + 2] = module["issue_module__module__name"]
+
+    if segmented == CYCLE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            cycle = next(
+                (cyc for cyc in cycle_details if str(cyc[CYCLE_ID]) == str(segm)),
+                None,
+            )
+            if cycle:
+                row_zero[index + 2] = cycle["issue_cycle__cycle__name"]
+
+    return [tuple(row_zero)] + rows
+
+
+def generate_non_segmented_rows(
+    distribution,
+    x_axis,
+    y_axis,
+    key,
+    assignee_details,
+    label_details,
+    state_details,
+    cycle_details,
+    module_details,
+):
+    rows = []
+    for item, data in distribution.items():
+        row = [item, data[0].get("count" if y_axis == "issue_count" else "estimate")]
+
+        if x_axis == ASSIGNEE_ID:
+            assignee = next(
+                (
+                    user
+                    for user in assignee_details
+                    if str(user[ASSIGNEE_ID]) == str(item)
+                ),
+                None,
+            )
+            if assignee:
+                row[
+                    0
+                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+
+        if x_axis == LABEL_ID:
+            label = next(
+                (lab for lab in label_details if str(lab[LABEL_ID]) == str(item)),
+                None,
+            )
+
+            if label:
+                row[0] = f"{label['labels__name']}"
+
+        if x_axis == STATE_ID:
+            state = next(
+                (sta for sta in state_details if str(sta[STATE_ID]) == str(item)),
+                None,
+            )
+
+            if state:
+                row[0] = f"{state['state__name']}"
+
+        if x_axis == CYCLE_ID:
+            cycle = next(
+                (cyc for cyc in cycle_details if str(cyc[CYCLE_ID]) == str(item)),
+                None,
+            )
+
+            if cycle:
+                row[0] = f"{cycle['issue_cycle__cycle__name']}"
+
+        if x_axis == MODULE_ID:
+            module = next(
+                (mod for mod in module_details if str(mod[MODULE_ID]) == str(item)),
+                None,
+            )
+
+            if module:
+                row[0] = f"{module['issue_module__module__name']}"
+
+        rows.append(tuple(row))
+
+    row_zero = [row_mapping.get(x_axis, "X-Axis"), row_mapping.get(y_axis, "Y-Axis")]
+    return [tuple(row_zero)] + rows
+
 
 @shared_task
 def analytic_export_task(email, data, slug):
@@ -43,134 +356,69 @@ def analytic_export_task(email, data, slug):
         segment = data.get("segment", False)
 
         distribution = build_graph_plot(
-            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+            queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
         )
-
         key = "count" if y_axis == "issue_count" else "estimate"
 
-        segmented = segment
+        assignee_details = (
+            get_assignee_details(slug, filters)
+            if x_axis == ASSIGNEE_ID or segment == ASSIGNEE_ID
+            else {}
+        )
 
-        assignee_details = {}
-        if x_axis in ["assignees__id"] or segment in ["assignees__id"]:
-            assignee_details = (
-                Issue.issue_objects.filter(workspace__slug=slug, **filters, assignees__avatar__isnull=False)
-                .order_by("assignees__id")
-                .distinct("assignees__id")
-                .values("assignees__avatar", "assignees__display_name", "assignees__first_name", "assignees__last_name", "assignees__id")
-            )
+        label_details = (
+            get_label_details(slug, filters)
+            if x_axis == LABEL_ID or segment == LABEL_ID
+            else {}
+        )
+
+        state_details = (
+            get_state_details(slug, filters)
+            if x_axis == STATE_ID or segment == STATE_ID
+            else {}
+        )
+
+        cycle_details = (
+            get_cycle_details(slug, filters)
+            if x_axis == CYCLE_ID or segment == CYCLE_ID
+            else {}
+        )
+
+        module_details = (
+            get_module_details(slug, filters)
+            if x_axis == MODULE_ID or segment == MODULE_ID
+            else {}
+        )
 
         if segment:
-            segment_zero = []
-            for item in distribution:
-                current_dict = distribution.get(item)
-                for current in current_dict:
-                    segment_zero.append(current.get("segment"))
-
-            segment_zero = list(set(segment_zero))
-            row_zero = (
-                [
-                    row_mapping.get(x_axis, "X-Axis"),
-                ]
-                + [
-                    row_mapping.get(y_axis, "Y-Axis"),
-                ]
-                + segment_zero
+            rows = generate_segmented_rows(
+                distribution,
+                x_axis,
+                y_axis,
+                segment,
+                key,
+                assignee_details,
+                label_details,
+                state_details,
+                cycle_details,
+                module_details,
             )
-            rows = []
-            for item in distribution:
-                generated_row = [
-                    item,
-                ]
-
-                data = distribution.get(item)
-                # Add y axis values
-                generated_row.append(sum(obj.get(key) for obj in data if obj.get(key, None) is not None))
-
-                for segment in segment_zero:
-                    value = [x for x in data if x.get("segment") == segment]
-                    if len(value):
-                        generated_row.append(value[0].get(key))
-                    else:
-                        generated_row.append("0")
-                # x-axis replacement for names
-                if x_axis in ["assignees__id"]:
-                    assignee = [user for user in assignee_details if str(user.get("assignees__id")) == str(item)]
-                    if len(assignee):
-                        generated_row[0] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
-                rows.append(tuple(generated_row))
-
-            # If segment is ["assignees__display_name"] then replace segment_zero rows with first and last names
-            if segmented in ["assignees__id"]:
-                for index, segm in enumerate(row_zero[2:]):
-                    # find the name of the user
-                    assignee = [user for user in assignee_details if str(user.get("assignees__id")) == str(segm)]
-                    if len(assignee):
-                        row_zero[index + 2] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
-
-            rows = [tuple(row_zero)] + rows
-            csv_buffer = io.StringIO()
-            writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
-
-            # Write CSV data to the buffer
-            for row in rows:
-                writer.writerow(row)
-
-            subject = "Your Export is ready"
-
-            html_content = render_to_string("emails/exports/analytics.html", {})
-
-            text_content = strip_tags(html_content)
-            csv_buffer.seek(0)
-            msg = EmailMultiAlternatives(
-                subject, text_content, settings.EMAIL_FROM, [email]
-            )
-            msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
-            msg.send(fail_silently=False)
-
         else:
-            row_zero = [
-                row_mapping.get(x_axis, "X-Axis"),
-                row_mapping.get(y_axis, "Y-Axis"),
-            ]
-            rows = []
-            for item in distribution:
-                row =  [
-                            item,
-                            distribution.get(item)[0].get("count")
-                            if y_axis == "issue_count"
-                            else distribution.get(item)[0].get("estimate  "),
-                        ]
-                # x-axis replacement to names
-                if x_axis in ["assignees__id"]:
-                    assignee = [user for user in assignee_details if str(user.get("assignees__id")) == str(item)]
-                    if len(assignee):
-                        row[0] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
-
-                rows.append(tuple(row))
-            rows = [tuple(row_zero)] + rows
-            csv_buffer = io.StringIO()
-            writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
-
-            # Write CSV data to the buffer
-            for row in rows:
-                writer.writerow(row)
-
-            subject = "Your Export is ready"
-
-            html_content = render_to_string("emails/exports/analytics.html", {})
-
-            text_content = strip_tags(html_content)
-
-            csv_buffer.seek(0)
-            msg = EmailMultiAlternatives(
-                subject, text_content, settings.EMAIL_FROM, [email]
+            rows = generate_non_segmented_rows(
+                distribution,
+                x_axis,
+                y_axis,
+                key,
+                assignee_details,
+                label_details,
+                state_details,
+                cycle_details,
+                module_details,
             )
-            msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
-            msg.send(fail_silently=False)
 
+        csv_buffer = generate_csv_from_rows(rows)
+        send_export_email(email, slug, csv_buffer)
     except Exception as e:
-        # Print logs if in DEBUG mode
         if settings.DEBUG:
             print(e)
         capture_exception(e)
-        return
diff --git a/apiserver/plane/bgtasks/email_verification_task.py b/apiserver/plane/bgtasks/email_verification_task.py
index 93b15c425..9f9d06437 100644
--- a/apiserver/plane/bgtasks/email_verification_task.py
+++ b/apiserver/plane/bgtasks/email_verification_task.py
@@ -23,7 +23,7 @@ def email_verification(first_name, email, token, current_site):
 
         from_email_string = settings.EMAIL_FROM
 
-        subject = f"Verify your Email!"
+        subject = "Verify your Email!"
 
         context = {
             "first_name": first_name,
diff --git a/apiserver/plane/bgtasks/export_task.py b/apiserver/plane/bgtasks/export_task.py
index a45120eb5..1329697e9 100644
--- a/apiserver/plane/bgtasks/export_task.py
+++ b/apiserver/plane/bgtasks/export_task.py
@@ -4,7 +4,6 @@ import io
 import json
 import boto3
 import zipfile
-from urllib.parse import urlparse, urlunparse
 
 # Django imports
 from django.conf import settings
diff --git a/apiserver/plane/bgtasks/forgot_password_task.py b/apiserver/plane/bgtasks/forgot_password_task.py
index 93283dfd5..de1390f01 100644
--- a/apiserver/plane/bgtasks/forgot_password_task.py
+++ b/apiserver/plane/bgtasks/forgot_password_task.py
@@ -8,20 +8,18 @@ from django.conf import settings
 from celery import shared_task
 from sentry_sdk import capture_exception
 
-# Module imports
-from plane.db.models import User
 
 
 @shared_task
 def forgot_password(first_name, email, uidb64, token, current_site):
 
     try:
-        realtivelink = f"/reset-password/?uidb64={uidb64}&token={token}"
+        realtivelink = f"/accounts/reset-password/?uidb64={uidb64}&token={token}"
         abs_url = current_site + realtivelink
 
         from_email_string = settings.EMAIL_FROM
 
-        subject = f"Reset Your Password - Plane"
+        subject = "Reset Your Password - Plane"
 
         context = {
             "first_name": first_name,
diff --git a/apiserver/plane/bgtasks/importer_task.py b/apiserver/plane/bgtasks/importer_task.py
index 757ef601b..14bece21b 100644
--- a/apiserver/plane/bgtasks/importer_task.py
+++ b/apiserver/plane/bgtasks/importer_task.py
@@ -2,8 +2,6 @@
 import json
 import requests
 import uuid
-import jwt
-from datetime import datetime
 
 # Django imports
 from django.conf import settings
@@ -25,8 +23,8 @@ from plane.db.models import (
     WorkspaceIntegration,
     Label,
     User,
+    IssueProperty,
 )
-from .workspace_invitation_task import workspace_invitation
 from plane.bgtasks.user_welcome_task import send_welcome_slack
 
 
@@ -57,7 +55,7 @@ def service_importer(service, importer_id):
                 ignore_conflicts=True,
             )
 
-            [
+            _ = [
                 send_welcome_slack.delay(
                     str(user.id),
                     True,
@@ -103,6 +101,20 @@ def service_importer(service, importer_id):
                 ignore_conflicts=True,
             )
 
+            IssueProperty.objects.bulk_create(
+                [
+                    IssueProperty(
+                        project_id=importer.project_id,
+                        workspace_id=importer.workspace_id,
+                        user=user,
+                        created_by=importer.created_by,
+                    )
+                    for user in workspace_users
+                ],
+                batch_size=100,
+                ignore_conflicts=True,
+            )
+
         # Check if sync config is on for github importers
         if service == "github" and importer.config.get("sync", False):
             name = importer.metadata.get("name", False)
@@ -142,7 +154,7 @@ def service_importer(service, importer_id):
             )
 
             # Create repo sync
-            repo_sync = GithubRepositorySync.objects.create(
+            _ = GithubRepositorySync.objects.create(
                 repository=repo,
                 workspace_integration=workspace_integration,
                 actor=workspace_integration.actor,
@@ -164,7 +176,7 @@ def service_importer(service, importer_id):
                 ImporterSerializer(importer).data,
                 cls=DjangoJSONEncoder,
             )
-            res = requests.post(
+            _ = requests.post(
                 f"{settings.PROXY_BASE_URL}/hooks/workspaces/{str(importer.workspace_id)}/projects/{str(importer.project_id)}/importers/{str(service)}/",
                 json=import_data_json,
                 headers=headers,
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 87c4fa1a4..4776bceab 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -29,141 +29,32 @@ from plane.db.models import (
     IssueComment,
 )
 from plane.api.serializers import IssueActivitySerializer
+from plane.bgtasks.notification_task import notifications
 
 
-# Track Chnages in name
+# Track Changes in name
 def track_name(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
-    epoch
+    epoch,
 ):
     if current_instance.get("name") != requested_data.get("name"):
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=current_instance.get("name"),
                 new_value=requested_data.get("name"),
                 field="name",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated the name to {requested_data.get('name')}",
-                epoch=epoch,
-            )
-        )
-
-
-# Track changes in parent issue
-def track_parent(
-    requested_data,
-    current_instance,
-    issue_id,
-    project,
-    actor,
-    issue_activities,
-    epoch
-):
-    if current_instance.get("parent") != requested_data.get("parent"):
-        if requested_data.get("parent") == None:
-            old_parent = Issue.objects.get(pk=current_instance.get("parent"))
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}",
-                    new_value=None,
-                    field="parent",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the parent issue to None",
-                    old_identifier=old_parent.id,
-                    new_identifier=None,
-                    epoch=epoch,
-                )
-            )
-        else:
-            new_parent = Issue.objects.get(pk=requested_data.get("parent"))
-            old_parent = Issue.objects.filter(pk=current_instance.get("parent")).first()
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}"
-                    if old_parent is not None
-                    else None,
-                    new_value=f"{new_parent.project.identifier}-{new_parent.sequence_id}",
-                    field="parent",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the parent issue to {new_parent.name}",
-                    old_identifier=old_parent.id if old_parent is not None else None,
-                    new_identifier=new_parent.id,
-                    epoch=epoch,
-                )
-            )
-
-
-# Track changes in priority
-def track_priority(
-    requested_data,
-    current_instance,
-    issue_id,
-    project,
-    actor,
-    issue_activities,
-    epoch
-):
-    if current_instance.get("priority") != requested_data.get("priority"):
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                actor=actor,
-                verb="updated",
-                old_value=current_instance.get("priority"),
-                new_value=requested_data.get("priority"),
-                field="priority",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated the priority to {requested_data.get('priority')}",
-                epoch=epoch,
-            )
-        )
-
-
-# Track chnages in state of the issue
-def track_state(
-    requested_data,
-    current_instance,
-    issue_id,
-    project,
-    actor,
-    issue_activities,
-    epoch
-):
-    if current_instance.get("state") != requested_data.get("state"):
-        new_state = State.objects.get(pk=requested_data.get("state", None))
-        old_state = State.objects.get(pk=current_instance.get("state", None))
-
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                actor=actor,
-                verb="updated",
-                old_value=old_state.name,
-                new_value=new_state.name,
-                field="state",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated the state to {new_state.name}",
-                old_identifier=old_state.id,
-                new_identifier=new_state.id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the name to",
                 epoch=epoch,
             )
         )
@@ -174,33 +65,140 @@ def track_description(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
-    epoch
+    epoch,
 ):
     if current_instance.get("description_html") != requested_data.get(
         "description_html"
     ):
-        last_activity = IssueActivity.objects.filter(issue_id=issue_id).order_by("-created_at").first()
-        if(last_activity is not None and last_activity.field == "description" and actor.id == last_activity.actor_id):
+        last_activity = (
+            IssueActivity.objects.filter(issue_id=issue_id)
+            .order_by("-created_at")
+            .first()
+        )
+        if (
+            last_activity is not None
+            and last_activity.field == "description"
+            and actor_id == str(last_activity.actor_id)
+        ):
             last_activity.created_at = timezone.now()
             last_activity.save(update_fields=["created_at"])
         else:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("description_html"),
-                        new_value=requested_data.get("description_html"),
-                        field="description",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"updated the description to {requested_data.get('description_html')}",
-                        epoch=epoch,
-                    )
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor_id=actor_id,
+                    verb="updated",
+                    old_value=current_instance.get("description_html"),
+                    new_value=requested_data.get("description_html"),
+                    field="description",
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment=f"updated the description to",
+                    epoch=epoch,
                 )
+            )
+
+
+# Track changes in parent issue
+def track_parent(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    if current_instance.get("parent") != requested_data.get("parent"):
+        old_parent = Issue.objects.filter(pk=current_instance.get("parent")).first()
+        new_parent = Issue.objects.filter(pk=requested_data.get("parent")).first()
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}"
+                if old_parent is not None
+                else "",
+                new_value=f"{new_parent.project.identifier}-{new_parent.sequence_id}"
+                if new_parent is not None
+                else "",
+                field="parent",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the parent issue to",
+                old_identifier=old_parent.id if old_parent is not None else None,
+                new_identifier=new_parent.id if new_parent is not None else None,
+                epoch=epoch,
+            )
+        )
+
+
+# Track changes in priority
+def track_priority(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    if current_instance.get("priority") != requested_data.get("priority"):
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("priority"),
+                new_value=requested_data.get("priority"),
+                field="priority",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the priority to",
+                epoch=epoch,
+            )
+        )
+
+
+# Track changes in state of the issue
+def track_state(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    if current_instance.get("state") != requested_data.get("state"):
+        new_state = State.objects.get(pk=requested_data.get("state", None))
+        old_state = State.objects.get(pk=current_instance.get("state", None))
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=old_state.name,
+                new_value=new_state.name,
+                field="state",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the state to",
+                old_identifier=old_state.id,
+                new_identifier=new_state.id,
+                epoch=epoch,
+            )
+        )
 
 
 # Track changes in issue target date
@@ -208,42 +206,31 @@ def track_target_date(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
-    epoch
+    epoch,
 ):
     if current_instance.get("target_date") != requested_data.get("target_date"):
-        if requested_data.get("target_date") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("target_date"),
-                    new_value=requested_data.get("target_date"),
-                    field="target_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the target date to None",
-                    epoch=epoch,
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("target_date"),
-                    new_value=requested_data.get("target_date"),
-                    field="target_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the target date to {requested_data.get('target_date')}",
-                    epoch=epoch,
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("target_date")
+                if current_instance.get("target_date") is not None
+                else "",
+                new_value=requested_data.get("target_date")
+                if requested_data.get("target_date") is not None
+                else "",
+                field="target_date",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the target date to",
+                epoch=epoch,
             )
+        )
 
 
 # Track changes in issue start date
@@ -251,42 +238,31 @@ def track_start_date(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
-    epoch
+    epoch,
 ):
     if current_instance.get("start_date") != requested_data.get("start_date"):
-        if requested_data.get("start_date") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("start_date"),
-                    new_value=requested_data.get("start_date"),
-                    field="start_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the start date to None",
-                    epoch=epoch,
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("start_date"),
-                    new_value=requested_data.get("start_date"),
-                    field="start_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the start date to {requested_data.get('start_date')}",
-                    epoch=epoch,
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("start_date")
+                if current_instance.get("start_date") is not None
+                else "",
+                new_value=requested_data.get("start_date")
+                if requested_data.get("start_date") is not None
+                else "",
+                field="start_date",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the start date to ",
+                epoch=epoch,
             )
+        )
 
 
 # Track changes in issue labels
@@ -294,54 +270,57 @@ def track_labels(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
-    epoch
+    epoch,
 ):
-    # Label Addition
-    if len(requested_data.get("labels_list")) > len(current_instance.get("labels")):
-        for label in requested_data.get("labels_list"):
-            if label not in current_instance.get("labels"):
-                label = Label.objects.get(pk=label)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value="",
-                        new_value=label.name,
-                        field="labels",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"added label {label.name}",
-                        new_identifier=label.id,
-                        old_identifier=None,
-                        epoch=epoch,
-                    )
-                )
+    requested_labels = set([str(lab) for lab in requested_data.get("labels", [])])
+    current_labels = set([str(lab) for lab in current_instance.get("labels", [])])
 
-    # Label Removal
-    if len(requested_data.get("labels_list")) < len(current_instance.get("labels")):
-        for label in current_instance.get("labels"):
-            if label not in requested_data.get("labels_list"):
-                label = Label.objects.get(pk=label)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=label.name,
-                        new_value="",
-                        field="labels",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"removed label {label.name}",
-                        old_identifier=label.id,
-                        new_identifier=None,
-                        epoch=epoch,
-                    )
-                )
+    added_labels = requested_labels - current_labels
+    dropped_labels = current_labels - requested_labels
+
+    # Set of newly added labels
+    for added_label in added_labels:
+        label = Label.objects.get(pk=added_label)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                verb="updated",
+                field="labels",
+                comment="added label ",
+                old_value="",
+                new_value=label.name,
+                new_identifier=label.id,
+                old_identifier=None,
+                epoch=epoch,
+            )
+        )
+
+    # Set of dropped labels
+    for dropped_label in dropped_labels:
+        label = Label.objects.get(pk=dropped_label)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=label.name,
+                new_value="",
+                field="labels",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed label ",
+                old_identifier=label.id,
+                new_identifier=None,
+                epoch=epoch,
+            )
+        )
 
 
 # Track changes in issue assignees
@@ -349,90 +328,109 @@ def track_assignees(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
-    epoch
+    epoch,
 ):
-    # Assignee Addition
-    if len(requested_data.get("assignees_list")) > len(
-        current_instance.get("assignees")
-    ):
-        for assignee in requested_data.get("assignees_list"):
-            if assignee not in current_instance.get("assignees"):
-                assignee = User.objects.get(pk=assignee)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value="",
-                        new_value=assignee.display_name,
-                        field="assignees",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"added assignee {assignee.display_name}",
-                        new_identifier=assignee.id,
-                        epoch=epoch,
-                    )
-                )
+    requested_assignees = set([str(asg) for asg in requested_data.get("assignees", [])])
+    current_assignees = set([str(asg) for asg in current_instance.get("assignees", [])])
 
-    # Assignee Removal
-    if len(requested_data.get("assignees_list")) < len(
-        current_instance.get("assignees")
-    ):
-        for assignee in current_instance.get("assignees"):
-            if assignee not in requested_data.get("assignees_list"):
-                assignee = User.objects.get(pk=assignee)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=assignee.display_name,
-                        new_value="",
-                        field="assignees",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"removed assignee {assignee.display_name}",
-                        old_identifier=assignee.id,
-                        epoch=epoch,
-                    )
-                )
+    added_assignees = requested_assignees - current_assignees
+    dropped_assginees = current_assignees - requested_assignees
 
-
-def create_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
-):
+    for added_asignee in added_assignees:
+        assignee = User.objects.get(pk=added_asignee)
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
-                comment=f"created the issue",
-                verb="created",
-                actor=actor,
+                actor_id=actor_id,
+                verb="updated",
+                old_value="",
+                new_value=assignee.display_name,
+                field="assignees",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"added assignee ",
+                new_identifier=assignee.id,
+                epoch=epoch,
+            )
+        )
+
+    for dropped_assignee in dropped_assginees:
+        assignee = User.objects.get(pk=dropped_assignee)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=assignee.display_name,
+                new_value="",
+                field="assignees",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed assignee ",
+                old_identifier=assignee.id,
                 epoch=epoch,
             )
         )
 
 
 def track_estimate_points(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     if current_instance.get("estimate_point") != requested_data.get("estimate_point"):
-        if requested_data.get("estimate_point") == None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("estimate_point")
+                if current_instance.get("estimate_point") is not None
+                else "",
+                new_value=requested_data.get("estimate_point")
+                if requested_data.get("estimate_point") is not None
+                else "",
+                field="estimate_point",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the estimate point to ",
+                epoch=epoch,
+            )
+        )
+
+
+def track_archive_at(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    if current_instance.get("archived_at") != requested_data.get("archived_at"):
+        if requested_data.get("archived_at") is None:
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="has restored the issue",
                     verb="updated",
-                    old_value=current_instance.get("estimate_point"),
-                    new_value=requested_data.get("estimate_point"),
-                    field="estimate_point",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the estimate point to None",
+                    actor_id=actor_id,
+                    field="archived_at",
+                    old_value="archive",
+                    new_value="restore",
                     epoch=epoch,
                 )
             )
@@ -440,73 +438,44 @@ def track_estimate_points(
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="Plane has archived the issue",
                     verb="updated",
-                    old_value=current_instance.get("estimate_point"),
-                    new_value=requested_data.get("estimate_point"),
-                    field="estimate_point",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the estimate point to {requested_data.get('estimate_point')}",
+                    actor_id=actor_id,
+                    field="archived_at",
+                    old_value=None,
+                    new_value="archive",
                     epoch=epoch,
                 )
             )
 
 
-def track_archive_at(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
-):
-    if requested_data.get("archived_at") is None:
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
-                comment=f"has restored the issue",
-                verb="updated",
-                actor=actor,
-                field="archived_at",
-                old_value="archive",
-                new_value="restore",
-                epoch=epoch,
-            )
-        )
-    else:
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
-                comment=f"Plane has archived the issue",
-                verb="updated",
-                actor=actor,
-                field="archived_at",
-                old_value=None,
-                new_value="archive",
-                epoch=epoch,
-            )
-        )
-
-
 def track_closed_to(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     if requested_data.get("closed_to") is not None:
         updated_state = State.objects.get(
-            pk=requested_data.get("closed_to"), project=project
+            pk=requested_data.get("closed_to"), project_id=project_id
         )
-
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=None,
                 new_value=updated_state.name,
                 field="state",
-                project=project,
-                workspace=project.workspace,
-                comment=f"Plane updated the state to {updated_state.name}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"Plane updated the state to ",
                 old_identifier=None,
                 new_identifier=updated_state.id,
                 epoch=epoch,
@@ -514,8 +483,38 @@ def track_closed_to(
         )
 
 
+def create_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    issue_activities.append(
+        IssueActivity(
+            issue_id=issue_id,
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"created the issue",
+            verb="created",
+            actor_id=actor_id,
+            epoch=epoch,
+        )
+    )
+
+
 def update_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     ISSUE_ACTIVITY_MAPPER = {
         "name": track_name,
@@ -525,8 +524,8 @@ def update_issue_activity(
         "description_html": track_description,
         "target_date": track_target_date,
         "start_date": track_start_date,
-        "labels_list": track_labels,
-        "assignees_list": track_assignees,
+        "labels": track_labels,
+        "assignees": track_assignees,
         "estimate_point": track_estimate_points,
         "archived_at": track_archive_at,
         "closed_to": track_closed_to,
@@ -538,29 +537,37 @@ def update_issue_activity(
     )
 
     for key in requested_data:
-        func = ISSUE_ACTIVITY_MAPPER.get(key, None)
+        func = ISSUE_ACTIVITY_MAPPER.get(key)
         if func is not None:
             func(
-                requested_data,
-                current_instance,
-                issue_id,
-                project,
-                actor,
-                issue_activities,
-                epoch
+                requested_data=requested_data,
+                current_instance=current_instance,
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                actor_id=actor_id,
+                issue_activities=issue_activities,
+                epoch=epoch,
             )
 
 
 def delete_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     issue_activities.append(
         IssueActivity(
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the issue",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="issue",
             epoch=epoch,
         )
@@ -568,7 +575,14 @@ def delete_issue_activity(
 
 
 def create_comment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -578,11 +592,11 @@ def create_comment_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"created a comment",
             verb="created",
-            actor=actor,
+            actor_id=actor_id,
             field="comment",
             new_value=requested_data.get("comment_html", ""),
             new_identifier=requested_data.get("id", None),
@@ -593,7 +607,14 @@ def create_comment_activity(
 
 
 def update_comment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -604,11 +625,11 @@ def update_comment_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"updated a comment",
                 verb="updated",
-                actor=actor,
+                actor_id=actor_id,
                 field="comment",
                 old_value=current_instance.get("comment_html", ""),
                 old_identifier=current_instance.get("id"),
@@ -621,16 +642,23 @@ def update_comment_activity(
 
 
 def delete_comment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the comment",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="comment",
             epoch=epoch,
         )
@@ -638,7 +666,14 @@ def delete_comment_activity(
 
 
 def create_cycle_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -656,17 +691,21 @@ def create_cycle_issue_activity(
         new_cycle = Cycle.objects.filter(
             pk=updated_record.get("new_cycle_id", None)
         ).first()
+        issue = Issue.objects.filter(pk=updated_record.get("issue_id")).first()
+        if issue:
+            issue.updated_at = timezone.now()
+            issue.save(update_fields=["updated_at"])
 
         issue_activities.append(
             IssueActivity(
                 issue_id=updated_record.get("issue_id"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=old_cycle.name,
                 new_value=new_cycle.name,
                 field="cycles",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"updated cycle from {old_cycle.name} to {new_cycle.name}",
                 old_identifier=old_cycle.id,
                 new_identifier=new_cycle.id,
@@ -678,17 +717,21 @@ def create_cycle_issue_activity(
         cycle = Cycle.objects.filter(
             pk=created_record.get("fields").get("cycle")
         ).first()
+        issue = Issue.objects.filter(pk=created_record.get("fields").get("issue")).first()
+        if issue:
+            issue.updated_at = timezone.now()
+            issue.save(update_fields=["updated_at"])
 
         issue_activities.append(
             IssueActivity(
                 issue_id=created_record.get("fields").get("issue"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="created",
                 old_value="",
                 new_value=cycle.name,
                 field="cycles",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"added cycle {cycle.name}",
                 new_identifier=cycle.id,
                 epoch=epoch,
@@ -697,7 +740,14 @@ def create_cycle_issue_activity(
 
 
 def delete_cycle_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -705,29 +755,41 @@ def delete_cycle_issue_activity(
     )
 
     cycle_id = requested_data.get("cycle_id", "")
+    cycle_name = requested_data.get("cycle_name", "")
     cycle = Cycle.objects.filter(pk=cycle_id).first()
     issues = requested_data.get("issues")
 
     for issue in issues:
+        current_issue = Issue.objects.filter(pk=issue).first()
+        if issue:
+            current_issue.updated_at = timezone.now()
+            current_issue.save(update_fields=["updated_at"])
         issue_activities.append(
             IssueActivity(
                 issue_id=issue,
-                actor=actor,
+                actor_id=actor_id,
                 verb="deleted",
-                old_value=cycle.name if cycle is not None else "",
+                old_value=cycle.name if cycle is not None else cycle_name,
                 new_value="",
                 field="cycles",
-                project=project,
-                workspace=project.workspace,
-                comment=f"removed this issue from {cycle.name if cycle is not None else None}",
-                old_identifier=cycle.id if cycle is not None else None,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed this issue from {cycle.name if cycle is not None else cycle_name}",
+                old_identifier=cycle_id if cycle_id is not None else None,
                 epoch=epoch,
             )
         )
 
 
 def create_module_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -745,18 +807,22 @@ def create_module_issue_activity(
         new_module = Module.objects.filter(
             pk=updated_record.get("new_module_id", None)
         ).first()
+        issue = Issue.objects.filter(pk=updated_record.get("issue_id")).first()
+        if issue:
+            issue.updated_at = timezone.now()
+            issue.save(update_fields=["updated_at"])
 
         issue_activities.append(
             IssueActivity(
                 issue_id=updated_record.get("issue_id"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=old_module.name,
                 new_value=new_module.name,
                 field="modules",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated module from {old_module.name} to {new_module.name}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated module to ",
                 old_identifier=old_module.id,
                 new_identifier=new_module.id,
                 epoch=epoch,
@@ -767,16 +833,20 @@ def create_module_issue_activity(
         module = Module.objects.filter(
             pk=created_record.get("fields").get("module")
         ).first()
+        issue = Issue.objects.filter(pk=created_record.get("fields").get("issue")).first()
+        if issue:
+            issue.updated_at = timezone.now()
+            issue.save(update_fields=["updated_at"])
         issue_activities.append(
             IssueActivity(
                 issue_id=created_record.get("fields").get("issue"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="created",
                 old_value="",
                 new_value=module.name,
                 field="modules",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"added module {module.name}",
                 new_identifier=module.id,
                 epoch=epoch,
@@ -785,7 +855,14 @@ def create_module_issue_activity(
 
 
 def delete_module_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -793,29 +870,41 @@ def delete_module_issue_activity(
     )
 
     module_id = requested_data.get("module_id", "")
+    module_name = requested_data.get("module_name", "")
     module = Module.objects.filter(pk=module_id).first()
     issues = requested_data.get("issues")
 
     for issue in issues:
+        current_issue = Issue.objects.filter(pk=issue).first()
+        if issue:
+            current_issue.updated_at = timezone.now()
+            current_issue.save(update_fields=["updated_at"])
         issue_activities.append(
             IssueActivity(
                 issue_id=issue,
-                actor=actor,
+                actor_id=actor_id,
                 verb="deleted",
-                old_value=module.name if module is not None else "",
+                old_value=module.name if module is not None else module_name,
                 new_value="",
                 field="modules",
-                project=project,
-                workspace=project.workspace,
-                comment=f"removed this issue from {module.name if module is not None else None}",
-                old_identifier=module.id if module is not None else None,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed this issue from {module.name if module is not None else module_name}",
+                old_identifier=module_id if module_id is not None else None,
                 epoch=epoch,
             )
         )
 
 
 def create_link_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    actor_id,
+    workspace_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -825,11 +914,11 @@ def create_link_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"created a link",
             verb="created",
-            actor=actor,
+            actor_id=actor_id,
             field="link",
             new_value=requested_data.get("url", ""),
             new_identifier=requested_data.get("id", None),
@@ -839,7 +928,14 @@ def create_link_activity(
 
 
 def update_link_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -850,11 +946,11 @@ def update_link_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"updated a link",
                 verb="updated",
-                actor=actor,
+                actor_id=actor_id,
                 field="link",
                 old_value=current_instance.get("url", ""),
                 old_identifier=current_instance.get("id"),
@@ -866,9 +962,15 @@ def update_link_activity(
 
 
 def delete_link_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
-
     current_instance = (
         json.loads(current_instance) if current_instance is not None else None
     )
@@ -876,11 +978,11 @@ def delete_link_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the link",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="link",
             old_value=current_instance.get("url", ""),
             new_value="",
@@ -890,7 +992,14 @@ def delete_link_activity(
 
 
 def create_attachment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    actor_id,
+    workspace_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -900,11 +1009,11 @@ def create_attachment_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"created an attachment",
             verb="created",
-            actor=actor,
+            actor_id=actor_id,
             field="attachment",
             new_value=current_instance.get("asset", ""),
             new_identifier=current_instance.get("id", None),
@@ -914,38 +1023,61 @@ def create_attachment_activity(
 
 
 def delete_attachment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the attachment",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="attachment",
             epoch=epoch,
         )
     )
 
+
 def create_issue_reaction_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     if requested_data and requested_data.get("reaction") is not None:
-        issue_reaction = IssueReaction.objects.filter(reaction=requested_data.get("reaction"), project=project, actor=actor).values_list('id', flat=True).first()
+        issue_reaction = (
+            IssueReaction.objects.filter(
+                reaction=requested_data.get("reaction"),
+                project_id=project_id,
+                actor_id=actor_id,
+            )
+            .values_list("id", flat=True)
+            .first()
+        )
         if issue_reaction is not None:
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    actor_id=actor_id,
                     verb="created",
                     old_value=None,
                     new_value=requested_data.get("reaction"),
                     field="reaction",
-                    project=project,
-                    workspace=project.workspace,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
                     comment="added the reaction",
                     old_identifier=None,
                     new_identifier=issue_reaction,
@@ -955,7 +1087,14 @@ def create_issue_reaction_activity(
 
 
 def delete_issue_reaction_activity(
-        requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     current_instance = (
         json.loads(current_instance) if current_instance is not None else None
@@ -964,13 +1103,13 @@ def delete_issue_reaction_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="deleted",
                 old_value=current_instance.get("reaction"),
                 new_value=None,
                 field="reaction",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment="removed the reaction",
                 old_identifier=current_instance.get("identifier"),
                 new_identifier=None,
@@ -980,23 +1119,42 @@ def delete_issue_reaction_activity(
 
 
 def create_comment_reaction_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     if requested_data and requested_data.get("reaction") is not None:
-        comment_reaction_id, comment_id = CommentReaction.objects.filter(reaction=requested_data.get("reaction"), project=project, actor=actor).values_list('id', 'comment__id').first()
-        comment = IssueComment.objects.get(pk=comment_id,project=project)
-        if comment is not None and comment_reaction_id is not None and comment_id is not None:
+        comment_reaction_id, comment_id = (
+            CommentReaction.objects.filter(
+                reaction=requested_data.get("reaction"),
+                project_id=project_id,
+                actor_id=actor_id,
+            )
+            .values_list("id", "comment__id")
+            .first()
+        )
+        comment = IssueComment.objects.get(pk=comment_id, project_id=project_id)
+        if (
+            comment is not None
+            and comment_reaction_id is not None
+            and comment_id is not None
+        ):
             issue_activities.append(
                 IssueActivity(
                     issue_id=comment.issue_id,
-                    actor=actor,
+                    actor_id=actor_id,
                     verb="created",
                     old_value=None,
                     new_value=requested_data.get("reaction"),
                     field="reaction",
-                    project=project,
-                    workspace=project.workspace,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
                     comment="added the reaction",
                     old_identifier=None,
                     new_identifier=comment_reaction_id,
@@ -1006,24 +1164,37 @@ def create_comment_reaction_activity(
 
 
 def delete_comment_reaction_activity(
-        requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     current_instance = (
         json.loads(current_instance) if current_instance is not None else None
     )
     if current_instance and current_instance.get("reaction") is not None:
-        issue_id = IssueComment.objects.filter(pk=current_instance.get("comment_id"), project=project).values_list('issue_id', flat=True).first()
+        issue_id = (
+            IssueComment.objects.filter(
+                pk=current_instance.get("comment_id"), project_id=project_id
+            )
+            .values_list("issue_id", flat=True)
+            .first()
+        )
         if issue_id is not None:
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    actor_id=actor_id,
                     verb="deleted",
                     old_value=current_instance.get("reaction"),
                     new_value=None,
                     field="reaction",
-                    project=project,
-                    workspace=project.workspace,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
                     comment="removed the reaction",
                     old_identifier=current_instance.get("identifier"),
                     new_identifier=None,
@@ -1033,20 +1204,27 @@ def delete_comment_reaction_activity(
 
 
 def create_issue_vote_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     if requested_data and requested_data.get("vote") is not None:
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="created",
                 old_value=None,
                 new_value=requested_data.get("vote"),
                 field="vote",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment="added the vote",
                 old_identifier=None,
                 new_identifier=None,
@@ -1056,7 +1234,14 @@ def create_issue_vote_activity(
 
 
 def delete_issue_vote_activity(
-        requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     current_instance = (
         json.loads(current_instance) if current_instance is not None else None
@@ -1065,13 +1250,13 @@ def delete_issue_vote_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="deleted",
                 old_value=current_instance.get("vote"),
                 new_value=None,
                 field="vote",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment="removed the vote",
                 old_identifier=current_instance.get("identifier"),
                 new_identifier=None,
@@ -1081,7 +1266,14 @@ def delete_issue_vote_activity(
 
 
 def create_issue_relation_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -1097,14 +1289,14 @@ def create_issue_relation_activity(
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_relation.get("related_issue"),
-                    actor=actor,
+                    actor_id=actor_id,
                     verb="created",
                     old_value="",
-                    new_value=f"{project.identifier}-{issue.sequence_id}",
+                    new_value=f"{issue.project.identifier}-{issue.sequence_id}",
                     field=relation_type,
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f'added {relation_type} relation',
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment=f"added {relation_type} relation",
                     old_identifier=issue_relation.get("issue"),
                 )
             )
@@ -1112,13 +1304,13 @@ def create_issue_relation_activity(
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_relation.get("issue"),
-                    actor=actor,
+                    actor_id=actor_id,
                     verb="created",
                     old_value="",
-                    new_value=f"{project.identifier}-{issue.sequence_id}",
+                    new_value=f"{issue.project.identifier}-{issue.sequence_id}",
                     field=f'{issue_relation.get("relation_type")}',
-                    project=project,
-                    workspace=project.workspace,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
                     comment=f'added {issue_relation.get("relation_type")} relation',
                     old_identifier=issue_relation.get("related_issue"),
                     epoch=epoch,
@@ -1127,118 +1319,149 @@ def create_issue_relation_activity(
 
 
 def delete_issue_relation_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
         json.loads(current_instance) if current_instance is not None else None
     )
     if current_instance is not None and requested_data.get("related_list") is None:
-            if current_instance.get("relation_type") == "blocked_by":
-                relation_type = "blocking"
-            else:
-                relation_type = current_instance.get("relation_type")
-            issue = Issue.objects.get(pk=current_instance.get("issue"))
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=current_instance.get("related_issue"),
-                    actor=actor,
-                    verb="deleted",
-                    old_value=f"{project.identifier}-{issue.sequence_id}",
-                    new_value="",
-                    field=relation_type,
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f'deleted {relation_type} relation',
-                    old_identifier=current_instance.get("issue"),
-                    epoch=epoch,
-                )
-            )
-            issue = Issue.objects.get(pk=current_instance.get("related_issue"))
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=current_instance.get("issue"),
-                    actor=actor,
-                    verb="deleted",
-                    old_value=f"{project.identifier}-{issue.sequence_id}",
-                    new_value="",
-                    field=f'{current_instance.get("relation_type")}',
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f'deleted {current_instance.get("relation_type")} relation',
-                    old_identifier=current_instance.get("related_issue"),
-                    epoch=epoch,
-                )
-            )
-
-
-def create_draft_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
-):
+        if current_instance.get("relation_type") == "blocked_by":
+            relation_type = "blocking"
+        else:
+            relation_type = current_instance.get("relation_type")
+        issue = Issue.objects.get(pk=current_instance.get("issue"))
         issue_activities.append(
             IssueActivity(
-                issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
-                comment=f"drafted the issue",
-                field="draft",
-                verb="created",
-                actor=actor,
+                issue_id=current_instance.get("related_issue"),
+                actor_id=actor_id,
+                verb="deleted",
+                old_value=f"{issue.project.identifier}-{issue.sequence_id}",
+                new_value="",
+                field=relation_type,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"deleted {relation_type} relation",
+                old_identifier=current_instance.get("issue"),
+                epoch=epoch,
+            )
+        )
+        issue = Issue.objects.get(pk=current_instance.get("related_issue"))
+        issue_activities.append(
+            IssueActivity(
+                issue_id=current_instance.get("issue"),
+                actor_id=actor_id,
+                verb="deleted",
+                old_value=f"{issue.project.identifier}-{issue.sequence_id}",
+                new_value="",
+                field=f'{current_instance.get("relation_type")}',
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f'deleted {current_instance.get("relation_type")} relation',
+                old_identifier=current_instance.get("related_issue"),
                 epoch=epoch,
             )
         )
 
 
-def update_draft_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
-):
-        requested_data = json.loads(requested_data) if requested_data is not None else None
-        current_instance = (
-            json.loads(current_instance) if current_instance is not None else None
-        )
-        if requested_data.get("is_draft") is not None and requested_data.get("is_draft") == False:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"created the issue",
-                    verb="updated",
-                    actor=actor,
-                    epoch=epoch,
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the draft issue",
-                    field="draft",
-                    verb="updated",
-                    actor=actor,
-                    epoch=epoch,
-                )
-            )
-
-
-
-def delete_draft_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities, epoch
+def create_draft_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     issue_activities.append(
         IssueActivity(
-            project=project,
-            workspace=project.workspace,
-            comment=f"deleted the draft issue",
+            issue_id=issue_id,
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"drafted the issue",
             field="draft",
-            verb="deleted",
-            actor=actor,
+            verb="created",
+            actor_id=actor_id,
             epoch=epoch,
         )
     )
 
+
+def update_draft_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if (
+        requested_data.get("is_draft") is not None
+        and requested_data.get("is_draft") == False
+    ):
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"created the issue",
+                verb="updated",
+                actor_id=actor_id,
+                epoch=epoch,
+            )
+        )
+    else:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the draft issue",
+                field="draft",
+                verb="updated",
+                actor_id=actor_id,
+                epoch=epoch,
+            )
+        )
+
+
+def delete_draft_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    issue_activities.append(
+        IssueActivity(
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"deleted the draft issue",
+            field="draft",
+            verb="deleted",
+            actor_id=actor_id,
+            epoch=epoch,
+        )
+    )
+
+
 # Receive message from room group
 @shared_task
 def issue_activity(
@@ -1254,39 +1477,18 @@ def issue_activity(
     try:
         issue_activities = []
 
-        actor = User.objects.get(pk=actor_id)
         project = Project.objects.get(pk=project_id)
+        workspace_id = project.workspace_id
 
-        if type not in [
-            "cycle.activity.created",
-            "cycle.activity.deleted",
-            "module.activity.created",
-            "module.activity.deleted",
-            "issue_reaction.activity.created",
-            "issue_reaction.activity.deleted",
-            "comment_reaction.activity.created",
-            "comment_reaction.activity.deleted",
-            "issue_vote.activity.created",
-            "issue_vote.activity.deleted",
-        ]:
+        if issue_id is not None:
             issue = Issue.objects.filter(pk=issue_id).first()
-
-            if issue is not None:
+            if issue:
                 try:
                     issue.updated_at = timezone.now()
                     issue.save(update_fields=["updated_at"])
                 except Exception as e:
                     pass
 
-            if subscriber:
-                # add the user to issue subscriber
-                try:
-                    _ = IssueSubscriber.objects.get_or_create(
-                        issue_id=issue_id, subscriber=actor
-                    )
-                except Exception as e:
-                    pass
-
         ACTIVITY_MAPPER = {
             "issue.activity.created": create_issue_activity,
             "issue.activity.updated": update_issue_activity,
@@ -1319,13 +1521,14 @@ def issue_activity(
         func = ACTIVITY_MAPPER.get(type)
         if func is not None:
             func(
-                requested_data,
-                current_instance,
-                issue_id,
-                project,
-                actor,
-                issue_activities,
-                epoch,
+                requested_data=requested_data,
+                current_instance=current_instance,
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                actor_id=actor_id,
+                issue_activities=issue_activities,
+                epoch=epoch,
             )
 
         # Save all the values to database
@@ -1349,86 +1552,19 @@ def issue_activity(
             except Exception as e:
                 capture_exception(e)
 
-        if type not in [
-            "cycle.activity.created",
-            "cycle.activity.deleted",
-            "module.activity.created",
-            "module.activity.deleted",
-            "issue_reaction.activity.created",
-            "issue_reaction.activity.deleted",
-            "comment_reaction.activity.created",
-            "comment_reaction.activity.deleted",
-            "issue_vote.activity.created",
-            "issue_vote.activity.deleted",
-        ]:
-            # Create Notifications
-            bulk_notifications = []
-
-            issue_subscribers = list(
-                IssueSubscriber.objects.filter(project=project, issue_id=issue_id)
-                .exclude(subscriber_id=actor_id)
-                .values_list("subscriber", flat=True)
-            )
-
-            issue_assignees = list(
-                IssueAssignee.objects.filter(project=project, issue_id=issue_id)
-                .exclude(assignee_id=actor_id)
-                .values_list("assignee", flat=True)
-            )
-
-            issue_subscribers = issue_subscribers + issue_assignees
-
-            issue = Issue.objects.filter(pk=issue_id).first()
-
-            # Add bot filtering
-            if (
-                issue is not None
-                and issue.created_by_id is not None
-                and not issue.created_by.is_bot
-                and str(issue.created_by_id) != str(actor_id)
-            ):
-                issue_subscribers = issue_subscribers + [issue.created_by_id]
-
-            for subscriber in  list(set(issue_subscribers)):
-                for issue_activity in issue_activities_created:
-                    bulk_notifications.append(
-                        Notification(
-                            workspace=project.workspace,
-                            sender="in_app:issue_activities",
-                            triggered_by_id=actor_id,
-                            receiver_id=subscriber,
-                            entity_identifier=issue_id,
-                            entity_name="issue",
-                            project=project,
-                            title=issue_activity.comment,
-                            data={
-                                "issue": {
-                                    "id": str(issue_id),
-                                    "name": str(issue.name),
-                                    "identifier": str(issue.project.identifier),
-                                    "sequence_id": issue.sequence_id,
-                                    "state_name": issue.state.name,
-                                    "state_group": issue.state.group,
-                                },
-                                "issue_activity": {
-                                    "id": str(issue_activity.id),
-                                    "verb": str(issue_activity.verb),
-                                    "field": str(issue_activity.field),
-                                    "actor": str(issue_activity.actor_id),
-                                    "new_value": str(issue_activity.new_value),
-                                    "old_value": str(issue_activity.old_value),
-                                    "issue_comment": str(
-                                        issue_activity.issue_comment.comment_stripped
-                                        if issue_activity.issue_comment is not None
-                                        else ""
-                                    ),
-                                },
-                            },
-                        )
-                    )
-
-            # Bulk create notifications
-            Notification.objects.bulk_create(bulk_notifications, batch_size=100)
+        notifications.delay(
+            type=type,
+            issue_id=issue_id,
+            actor_id=actor_id,
+            project_id=project_id,
+            subscriber=subscriber,
+            issue_activities_created=json.dumps(
+                IssueActivitySerializer(issue_activities_created, many=True).data,
+                cls=DjangoJSONEncoder,
+            ),
+            requested_data=requested_data,
+            current_instance=current_instance,
+        )
 
         return
     except Exception as e:
diff --git a/apiserver/plane/bgtasks/issue_automation_task.py b/apiserver/plane/bgtasks/issue_automation_task.py
index 656329cec..d9e1e8ef2 100644
--- a/apiserver/plane/bgtasks/issue_automation_task.py
+++ b/apiserver/plane/bgtasks/issue_automation_task.py
@@ -60,7 +60,7 @@ def archive_old_issues():
             # Check if Issues
             if issues:
                 # Set the archive time to current time
-                archive_at = timezone.now()
+                archive_at = timezone.now().date()
 
                 issues_to_update = []
                 for issue in issues:
@@ -72,14 +72,14 @@ def archive_old_issues():
                     Issue.objects.bulk_update(
                         issues_to_update, ["archived_at"], batch_size=100
                     )
-                    [
+                    _ = [
                         issue_activity.delay(
                             type="issue.activity.updated",
                             requested_data=json.dumps({"archived_at": str(archive_at)}),
                             actor_id=str(project.created_by_id),
                             issue_id=issue.id,
                             project_id=project_id,
-                            current_instance=None,
+                            current_instance=json.dumps({"archived_at": None}),
                             subscriber=False,
                             epoch=int(timezone.now().timestamp()),
                         )
diff --git a/apiserver/plane/bgtasks/magic_link_code_task.py b/apiserver/plane/bgtasks/magic_link_code_task.py
index 91cc461bb..71f6db8da 100644
--- a/apiserver/plane/bgtasks/magic_link_code_task.py
+++ b/apiserver/plane/bgtasks/magic_link_code_task.py
@@ -17,7 +17,7 @@ def magic_link(email, key, token, current_site):
 
         from_email_string = settings.EMAIL_FROM
 
-        subject = f"Login for Plane"
+        subject = "Login for Plane"
 
         context = {"magic_url": abs_url, "code": token}
 
diff --git a/apiserver/plane/bgtasks/notification_task.py b/apiserver/plane/bgtasks/notification_task.py
new file mode 100644
index 000000000..0c2199e44
--- /dev/null
+++ b/apiserver/plane/bgtasks/notification_task.py
@@ -0,0 +1,418 @@
+# Python imports
+import json
+import uuid
+
+# Module imports
+from plane.db.models import (
+    IssueMention,
+    IssueSubscriber,
+    Project,
+    User,
+    IssueAssignee,
+    Issue,
+    Notification,
+    IssueComment,
+    IssueActivity
+)
+
+# Third Party imports
+from celery import shared_task
+from bs4 import BeautifulSoup
+
+
+    
+# =========== Issue Description Html Parsing and Notification Functions ======================
+
+def update_mentions_for_issue(issue, project, new_mentions, removed_mention):
+    aggregated_issue_mentions = []
+
+    for mention_id in new_mentions:
+        aggregated_issue_mentions.append(
+            IssueMention(
+                mention_id=mention_id,
+                issue=issue,
+                project=project,
+                workspace_id=project.workspace_id
+            )
+        )
+
+    IssueMention.objects.bulk_create(
+        aggregated_issue_mentions, batch_size=100)
+    IssueMention.objects.filter(
+        issue=issue, mention__in=removed_mention).delete()
+
+
+def get_new_mentions(requested_instance, current_instance):
+    # requested_data is the newer instance of the current issue
+    # current_instance is the older instance of the current issue, saved in the database
+
+    # extract mentions from both the instance of data
+    mentions_older = extract_mentions(current_instance)
+    
+    mentions_newer = extract_mentions(requested_instance)
+
+    # Getting Set Difference from mentions_newer
+    new_mentions = [
+        mention for mention in mentions_newer if mention not in mentions_older]
+
+    return new_mentions
+
+# Get Removed Mention
+
+
+def get_removed_mentions(requested_instance, current_instance):
+    # requested_data is the newer instance of the current issue
+    # current_instance is the older instance of the current issue, saved in the database
+
+    # extract mentions from both the instance of data
+    mentions_older = extract_mentions(current_instance)
+    mentions_newer = extract_mentions(requested_instance)
+
+    # Getting Set Difference from mentions_newer
+    removed_mentions = [
+        mention for mention in mentions_older if mention not in mentions_newer]
+
+    return removed_mentions
+
+# Adds mentions as subscribers
+
+
+def extract_mentions_as_subscribers(project_id, issue_id, mentions):
+    # mentions is an array of User IDs representing the FILTERED set of mentioned users
+
+    bulk_mention_subscribers = []
+
+    for mention_id in mentions:
+        # If the particular mention has not already been subscribed to the issue, he must be sent the mentioned notification
+        if not IssueSubscriber.objects.filter(
+            issue_id=issue_id,
+            subscriber_id=mention_id,
+            project_id=project_id,
+        ).exists() and not IssueAssignee.objects.filter(
+            project_id=project_id, issue_id=issue_id,
+            assignee_id=mention_id
+        ).exists() and not Issue.objects.filter(
+            project_id=project_id, pk=issue_id, created_by_id=mention_id
+        ).exists():
+
+            project = Project.objects.get(pk=project_id)
+
+            bulk_mention_subscribers.append(IssueSubscriber(
+                workspace_id=project.workspace_id,
+                project_id=project_id,
+                issue_id=issue_id,
+                subscriber_id=mention_id,
+            ))
+    return bulk_mention_subscribers
+
+# Parse Issue Description & extracts mentions
+def extract_mentions(issue_instance):
+    try:
+        # issue_instance has to be a dictionary passed, containing the description_html and other set of activity data.
+        mentions = []
+        # Convert string to dictionary
+        data = json.loads(issue_instance)
+        html = data.get("description_html")
+        soup = BeautifulSoup(html, 'html.parser')
+        mention_tags = soup.find_all(
+            'mention-component', attrs={'target': 'users'})
+
+        mentions = [mention_tag['id'] for mention_tag in mention_tags]
+
+        return list(set(mentions))
+    except Exception as e:
+        return []
+    
+    
+# =========== Comment Parsing and Notification Functions ======================
+def extract_comment_mentions(comment_value):
+    try:
+        mentions = []
+        soup = BeautifulSoup(comment_value, 'html.parser')
+        mentions_tags = soup.find_all(
+            'mention-component', attrs={'target': 'users'}
+        )
+        for mention_tag in mentions_tags:
+            mentions.append(mention_tag['id'])
+        return list(set(mentions))
+    except Exception as e:
+        return []
+    
+def get_new_comment_mentions(new_value, old_value):
+    
+    mentions_newer = extract_comment_mentions(new_value)
+    if old_value is None:
+        return mentions_newer
+    
+    mentions_older = extract_comment_mentions(old_value)
+    # Getting Set Difference from mentions_newer
+    new_mentions = [
+        mention for mention in mentions_newer if mention not in mentions_older]
+
+    return new_mentions
+
+
+def createMentionNotification(project, notification_comment, issue, actor_id, mention_id, issue_id, activity):
+    return Notification(
+        workspace=project.workspace,
+        sender="in_app:issue_activities:mentioned",
+        triggered_by_id=actor_id,
+        receiver_id=mention_id,
+        entity_identifier=issue_id,
+        entity_name="issue",
+        project=project,
+        message=notification_comment,
+        data={
+            "issue": {
+                "id": str(issue_id),
+                "name": str(issue.name),
+                "identifier": str(issue.project.identifier),
+                "sequence_id": issue.sequence_id,
+                "state_name": issue.state.name,
+                "state_group": issue.state.group,
+            },
+            "issue_activity": {
+                "id": str(activity.get("id")),
+                "verb": str(activity.get("verb")),
+                "field": str(activity.get("field")),
+                "actor": str(activity.get("actor_id")),
+                "new_value": str(activity.get("new_value")),
+                "old_value": str(activity.get("old_value")),
+            }
+        },
+    )
+
+
+@shared_task
+def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activities_created, requested_data, current_instance):
+    issue_activities_created = (
+        json.loads(
+            issue_activities_created) if issue_activities_created is not None else None
+    )
+    if type not in [
+        "cycle.activity.created",
+        "cycle.activity.deleted",
+        "module.activity.created",
+        "module.activity.deleted",
+        "issue_reaction.activity.created",
+        "issue_reaction.activity.deleted",
+        "comment_reaction.activity.created",
+        "comment_reaction.activity.deleted",
+        "issue_vote.activity.created",
+        "issue_vote.activity.deleted",
+        "issue_draft.activity.created",
+        "issue_draft.activity.updated",
+        "issue_draft.activity.deleted",
+    ]:
+        # Create Notifications
+        bulk_notifications = []
+
+        """
+        Mention Tasks
+        1. Perform Diffing and Extract the mentions, that mention notification needs to be sent
+        2. From the latest set of mentions, extract the users which are not a subscribers & make them subscribers
+        """
+
+        # Get new mentions from the newer instance
+        new_mentions = get_new_mentions(
+            requested_instance=requested_data, current_instance=current_instance)
+        removed_mention = get_removed_mentions(
+            requested_instance=requested_data, current_instance=current_instance)
+        
+        comment_mentions = []
+        all_comment_mentions = []
+
+        # Get New Subscribers from the mentions of the newer instance
+        requested_mentions = extract_mentions(
+            issue_instance=requested_data)
+        mention_subscribers = extract_mentions_as_subscribers(
+            project_id=project_id, issue_id=issue_id, mentions=requested_mentions)
+        
+        for issue_activity in issue_activities_created:
+            issue_comment = issue_activity.get("issue_comment")
+            issue_comment_new_value = issue_activity.get("new_value")
+            issue_comment_old_value = issue_activity.get("old_value")
+            if issue_comment is not None:
+                # TODO: Maybe save the comment mentions, so that in future, we can filter out the issues based on comment mentions as well.
+                
+                all_comment_mentions = all_comment_mentions + extract_comment_mentions(issue_comment_new_value)
+                
+                new_comment_mentions = get_new_comment_mentions(old_value=issue_comment_old_value, new_value=issue_comment_new_value)
+                comment_mentions = comment_mentions + new_comment_mentions
+                
+        comment_mention_subscribers = extract_mentions_as_subscribers( project_id=project_id, issue_id=issue_id, mentions=all_comment_mentions)
+        """
+        We will not send subscription activity notification to the below mentioned user sets
+        - Those who have been newly mentioned in the issue description, we will send mention notification to them.
+        - When the activity is a comment_created and there exist a mention in the comment, then we have to send the "mention_in_comment" notification
+        - When the activity is a comment_updated and there exist a mention change, then also we have to send the "mention_in_comment" notification
+        """
+        
+        issue_assignees = list(
+            IssueAssignee.objects.filter(
+                project_id=project_id, issue_id=issue_id)
+            .exclude(assignee_id__in=list(new_mentions + comment_mentions))
+            .values_list("assignee", flat=True)
+        )
+        
+        issue_subscribers = list(
+            IssueSubscriber.objects.filter(
+                project_id=project_id, issue_id=issue_id)
+            .exclude(subscriber_id__in=list(new_mentions + comment_mentions + [actor_id]))
+            .values_list("subscriber", flat=True)
+        )
+
+        issue = Issue.objects.filter(pk=issue_id).first()
+
+        if (issue.created_by_id is not None and str(issue.created_by_id) != str(actor_id)):
+            issue_subscribers = issue_subscribers + [issue.created_by_id]
+
+        if subscriber:
+            # add the user to issue subscriber
+            try:
+                if str(issue.created_by_id) != str(actor_id) and uuid.UUID(actor_id) not in issue_assignees:
+                    _ = IssueSubscriber.objects.get_or_create(
+                        project_id=project_id, issue_id=issue_id, subscriber_id=actor_id
+                    )
+            except Exception as e:
+                pass
+
+        project = Project.objects.get(pk=project_id)
+
+        issue_subscribers = list(set(issue_subscribers + issue_assignees) - {uuid.UUID(actor_id)})
+
+        for subscriber in issue_subscribers:
+            if subscriber in issue_subscribers:
+                sender = "in_app:issue_activities:subscribed"
+            if issue.created_by_id is not None and subscriber == issue.created_by_id:
+                sender = "in_app:issue_activities:created"
+            if subscriber in issue_assignees:
+                sender = "in_app:issue_activities:assigned"
+
+            for issue_activity in issue_activities_created:
+                issue_comment = issue_activity.get("issue_comment")
+                if issue_comment is not None:
+                    issue_comment = IssueComment.objects.get(
+                        id=issue_comment, issue_id=issue_id, project_id=project_id, workspace_id=project.workspace_id)
+                    
+                bulk_notifications.append(
+                    Notification(
+                        workspace=project.workspace,
+                        sender=sender,
+                        triggered_by_id=actor_id,
+                        receiver_id=subscriber,
+                        entity_identifier=issue_id,
+                        entity_name="issue",
+                        project=project,
+                        title=issue_activity.get("comment"),
+                        data={
+                            "issue": {
+                                "id": str(issue_id),
+                                "name": str(issue.name),
+                                "identifier": str(issue.project.identifier),
+                                "sequence_id": issue.sequence_id,
+                                "state_name": issue.state.name,
+                                "state_group": issue.state.group,
+                            },
+                            "issue_activity": {
+                                "id": str(issue_activity.get("id")),
+                                "verb": str(issue_activity.get("verb")),
+                                "field": str(issue_activity.get("field")),
+                                "actor": str(issue_activity.get("actor_id")),
+                                "new_value": str(issue_activity.get("new_value")),
+                                "old_value": str(issue_activity.get("old_value")),
+                                "issue_comment": str(
+                                    issue_comment.comment_stripped
+                                    if issue_activity.get("issue_comment") is not None
+                                    else ""
+                                ),
+                            },
+                        },
+                    )
+                )
+
+        # Add Mentioned as Issue Subscribers
+        IssueSubscriber.objects.bulk_create(
+            mention_subscribers + comment_mention_subscribers, batch_size=100)
+
+        last_activity = (
+            IssueActivity.objects.filter(issue_id=issue_id)
+            .order_by("-created_at")
+            .first()
+        )
+        
+        actor = User.objects.get(pk=actor_id)
+        
+        for mention_id in comment_mentions:
+            if (mention_id != actor_id):
+                for issue_activity in issue_activities_created:
+                    notification = createMentionNotification(
+                        project=project,
+                        issue=issue,
+                        notification_comment=f"{actor.display_name} has mentioned you in a comment in issue {issue.name}",
+                        actor_id=actor_id,
+                        mention_id=mention_id,
+                        issue_id=issue_id,
+                        activity=issue_activity
+                    )
+                    bulk_notifications.append(notification)
+                    
+
+        for mention_id in new_mentions:
+            if (mention_id != actor_id):
+                if (
+                    last_activity is not None
+                    and last_activity.field == "description"
+                    and actor_id == str(last_activity.actor_id)
+                ):
+                    bulk_notifications.append(
+                         Notification(
+                             workspace=project.workspace,
+                            sender="in_app:issue_activities:mentioned",
+                            triggered_by_id=actor_id,
+                            receiver_id=mention_id,
+                            entity_identifier=issue_id,
+                            entity_name="issue",
+                            project=project,
+                            message=f"You have been mentioned in the issue {issue.name}",
+                            data={
+                                "issue": {
+                                    "id": str(issue_id),
+                                    "name": str(issue.name),
+                                    "identifier": str(issue.project.identifier),
+                                    "sequence_id": issue.sequence_id,
+                                    "state_name": issue.state.name,
+                                     "state_group": issue.state.group,
+                                 },
+                                 "issue_activity": {
+                                     "id": str(last_activity.id),
+                                     "verb": str(last_activity.verb),
+                                     "field": str(last_activity.field),
+                                     "actor": str(last_activity.actor_id),
+                                     "new_value": str(last_activity.new_value),
+                                     "old_value": str(last_activity.old_value),
+                                 },
+                             },
+                         )
+                     )
+                else:
+                    for issue_activity in issue_activities_created:
+                        notification = createMentionNotification(
+                            project=project,
+                            issue=issue,
+                            notification_comment=f"You have been mentioned in the issue {issue.name}",
+                            actor_id=actor_id,
+                            mention_id=mention_id,
+                            issue_id=issue_id,
+                            activity=issue_activity
+                        )
+                        bulk_notifications.append(notification)
+
+        # save new mentions for the particular issue and remove the mentions that has been deleted from the description
+        update_mentions_for_issue(issue=issue, project=project, new_mentions=new_mentions, 
+                                  removed_mention=removed_mention)
+        
+        # Bulk create notifications
+        Notification.objects.bulk_create(bulk_notifications, batch_size=100)
+        
+        
diff --git a/apiserver/plane/bgtasks/workspace_invitation_task.py b/apiserver/plane/bgtasks/workspace_invitation_task.py
index d84a0b414..94be6f879 100644
--- a/apiserver/plane/bgtasks/workspace_invitation_task.py
+++ b/apiserver/plane/bgtasks/workspace_invitation_task.py
@@ -11,7 +11,7 @@ from slack_sdk import WebClient
 from slack_sdk.errors import SlackApiError
 
 # Module imports
-from plane.db.models import Workspace, User, WorkspaceMemberInvite
+from plane.db.models import Workspace, WorkspaceMemberInvite
 
 
 @shared_task
diff --git a/apiserver/plane/celery.py b/apiserver/plane/celery.py
index 15fe8af52..dfb094339 100644
--- a/apiserver/plane/celery.py
+++ b/apiserver/plane/celery.py
@@ -29,4 +29,4 @@ app.conf.beat_schedule = {
 # Load task modules from all registered Django app configs.
 app.autodiscover_tasks()
 
-app.conf.beat_scheduler = 'django_celery_beat.schedulers.DatabaseScheduler'
\ No newline at end of file
+app.conf.beat_scheduler = 'django_celery_beat.schedulers.DatabaseScheduler'
diff --git a/apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py
new file mode 100644
index 000000000..ae5753e07
--- /dev/null
+++ b/apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py
@@ -0,0 +1,41 @@
+# Generated by Django 4.2.5 on 2023-10-18 12:04
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.issue
+import uuid
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0045_issueactivity_epoch_workspacemember_issue_props_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="issue_mentions",
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4,editable=False, primary_key=True, serialize=False, unique=True)),
+                ('mention', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_mention', to=settings.AUTH_USER_MODEL)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL,related_name='issuemention_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_mention', to='db.issue')),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_issuemention', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='issuemention_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_issuemention', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'IssueMention',
+                'verbose_name_plural': 'IssueMentions',
+                'db_table': 'issue_mentions',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.AlterField(
+            model_name='issueproperty',
+            name='properties',
+            field=models.JSONField(default=plane.db.models.issue.get_default_properties),
+        ),
+    ]
\ No newline at end of file
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index e18f5a6e9..22344d782 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -27,12 +27,12 @@ from .issue import (
     IssueActivity,
     IssueProperty,
     IssueComment,
-    IssueBlocker,
     IssueLabel,
     IssueAssignee,
     Label,
     IssueBlocker,
     IssueRelation,
+    IssueMention,
     IssueLink,
     IssueSequence,
     IssueAttachment,
@@ -78,4 +78,4 @@ from .analytic import AnalyticView
 
 from .notification import Notification
 
-from .exporter import ExporterHistory
\ No newline at end of file
+from .exporter import ExporterHistory
diff --git a/apiserver/plane/db/models/exporter.py b/apiserver/plane/db/models/exporter.py
index fce31c8e7..0383807b7 100644
--- a/apiserver/plane/db/models/exporter.py
+++ b/apiserver/plane/db/models/exporter.py
@@ -53,4 +53,4 @@ class ExporterHistory(BaseModel):
 
     def __str__(self):
         """Return name of the service"""
-        return f"{self.provider} <{self.workspace.name}>"
\ No newline at end of file
+        return f"{self.provider} <{self.workspace.name}>"
diff --git a/apiserver/plane/db/models/integration/__init__.py b/apiserver/plane/db/models/integration/__init__.py
index 3f2be93b8..3bef68708 100644
--- a/apiserver/plane/db/models/integration/__init__.py
+++ b/apiserver/plane/db/models/integration/__init__.py
@@ -1,3 +1,3 @@
 from .base import Integration, WorkspaceIntegration
 from .github import GithubRepository, GithubRepositorySync, GithubIssueSync, GithubCommentSync
-from .slack import SlackProjectSync
\ No newline at end of file
+from .slack import SlackProjectSync
diff --git a/apiserver/plane/db/models/integration/github.py b/apiserver/plane/db/models/integration/github.py
index 130925c21..f4d152bb1 100644
--- a/apiserver/plane/db/models/integration/github.py
+++ b/apiserver/plane/db/models/integration/github.py
@@ -6,7 +6,6 @@ from django.db import models
 
 # Module imports
 from plane.db.models import ProjectBaseModel
-from plane.db.mixins import AuditModel
 
 
 class GithubRepository(ProjectBaseModel):
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index ba46ae9f7..cd8cf6ea0 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -16,6 +16,24 @@ from . import ProjectBaseModel
 from plane.utils.html_processor import strip_tags
 
 
+def get_default_properties():
+    return {
+        "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,
+    }
+
+
 # TODO: Handle identifiers for Bulk Inserts - nk
 class IssueManager(models.Manager):
     def get_queryset(self):
@@ -39,7 +57,7 @@ class Issue(ProjectBaseModel):
         ("high", "High"),
         ("medium", "Medium"),
         ("low", "Low"),
-        ("none", "None")
+        ("none", "None"),
     )
     parent = models.ForeignKey(
         "self",
@@ -186,7 +204,7 @@ class IssueRelation(ProjectBaseModel):
         ("relates_to", "Relates To"),
         ("blocked_by", "Blocked By"),
     )
-        
+
     issue = models.ForeignKey(
         Issue, related_name="issue_relation", on_delete=models.CASCADE
     )
@@ -209,6 +227,25 @@ class IssueRelation(ProjectBaseModel):
 
     def __str__(self):
         return f"{self.issue.name} {self.related_issue.name}"    
+    
+class IssueMention(ProjectBaseModel):
+    issue = models.ForeignKey(
+        Issue, on_delete=models.CASCADE, related_name="issue_mention"
+    )
+    mention = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="issue_mention",
+    )
+    class Meta:
+        unique_together = ["issue", "mention"]
+        verbose_name = "Issue Mention"
+        verbose_name_plural = "Issue Mentions"
+        db_table = "issue_mentions"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.issue.name} {self.mention.email}" 
 
 
 class IssueAssignee(ProjectBaseModel):
@@ -327,7 +364,9 @@ class IssueComment(ProjectBaseModel):
     comment_json = models.JSONField(blank=True, default=dict)
     comment_html = models.TextField(blank=True, default="<p></p>")
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
-    issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_comments")
+    issue = models.ForeignKey(
+        Issue, on_delete=models.CASCADE, related_name="issue_comments"
+    )
     # System can also create comment
     actor = models.ForeignKey(
         settings.AUTH_USER_MODEL,
@@ -367,7 +406,7 @@ class IssueProperty(ProjectBaseModel):
         on_delete=models.CASCADE,
         related_name="issue_property_user",
     )
-    properties = models.JSONField(default=dict)
+    properties = models.JSONField(default=get_default_properties)
 
     class Meta:
         verbose_name = "Issue Property"
@@ -515,7 +554,10 @@ class IssueVote(ProjectBaseModel):
     )
 
     class Meta:
-        unique_together = ["issue", "actor",]
+        unique_together = [
+            "issue",
+            "actor",
+        ]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index 4cd2134ac..f4ace65e5 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -4,9 +4,6 @@ from uuid import uuid4
 # Django imports
 from django.db import models
 from django.conf import settings
-from django.template.defaultfilters import slugify
-from django.db.models.signals import post_save
-from django.dispatch import receiver
 from django.core.validators import MinValueValidator, MaxValueValidator
 
 # Modeule imports
diff --git a/apiserver/plane/middleware/user_middleware.py b/apiserver/plane/middleware/user_middleware.py
deleted file mode 100644
index 60dee9b73..000000000
--- a/apiserver/plane/middleware/user_middleware.py
+++ /dev/null
@@ -1,33 +0,0 @@
-import jwt
-import pytz
-from django.conf import settings
-from django.utils import timezone
-from plane.db.models import User
-
-
-class UserMiddleware(object):
-
-    def __init__(self, get_response):
-        self.get_response = get_response
-
-    def __call__(self, request):
-
-        try:
-            if request.headers.get("Authorization"):
-                authorization_header = request.headers.get("Authorization")
-                access_token = authorization_header.split(" ")[1]
-                decoded = jwt.decode(
-                    access_token, settings.SECRET_KEY, algorithms=["HS256"]
-                )
-                id = decoded['user_id']
-                user = User.objects.get(id=id)
-                user.last_active = timezone.now()
-                user.token_updated_at = None
-                user.save()
-                timezone.activate(pytz.timezone(user.user_timezone))
-        except Exception as e:
-            print(e)
-        
-        response = self.get_response(request)
-
-        return response
diff --git a/apiserver/plane/settings/local.py b/apiserver/plane/settings/local.py
index 6f4833a6c..76586b0fe 100644
--- a/apiserver/plane/settings/local.py
+++ b/apiserver/plane/settings/local.py
@@ -12,6 +12,10 @@ from .common import *  # noqa
 
 DEBUG = int(os.environ.get("DEBUG", 1)) == 1
 
+ALLOWED_HOSTS = [
+    "*",
+]
+
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
 
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index 9c6bd95a9..541a0cfd4 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -14,19 +14,21 @@ from .common import *  # noqa
 # Database
 DEBUG = int(os.environ.get("DEBUG", 0)) == 1
 
-DATABASES = {
-    "default": {
-        "ENGINE": "django.db.backends.postgresql",
-        "NAME": "plane",
-        "USER": os.environ.get("PGUSER", ""),
-        "PASSWORD": os.environ.get("PGPASSWORD", ""),
-        "HOST": os.environ.get("PGHOST", ""),
+if bool(os.environ.get("DATABASE_URL")):
+    # Parse database configuration from $DATABASE_URL
+    DATABASES["default"] = dj_database_url.config()
+else:
+    DATABASES = {
+        "default": {
+            "ENGINE": "django.db.backends.postgresql",
+            "NAME": os.environ.get("POSTGRES_DB"),
+            "USER": os.environ.get("POSTGRES_USER"),
+            "PASSWORD": os.environ.get("POSTGRES_PASSWORD"),
+            "HOST": os.environ.get("POSTGRES_HOST"),
+        }
     }
-}
 
 
-# Parse database configuration from $DATABASE_URL
-DATABASES["default"] = dj_database_url.config()
 SITE_ID = 1
 
 # Set the variable true if running in docker environment
@@ -278,4 +280,3 @@ SCOUT_NAME = "Plane"
 
 # Unsplash Access key
 UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
-
diff --git a/apiserver/plane/settings/staging.py b/apiserver/plane/settings/staging.py
index f776afd91..fe4732343 100644
--- a/apiserver/plane/settings/staging.py
+++ b/apiserver/plane/settings/staging.py
@@ -4,7 +4,6 @@ import ssl
 import certifi
 
 import dj_database_url
-from urllib.parse import urlparse
 
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
diff --git a/apiserver/plane/tests/__init__.py b/apiserver/plane/tests/__init__.py
index f77d5060c..0a0e47b0b 100644
--- a/apiserver/plane/tests/__init__.py
+++ b/apiserver/plane/tests/__init__.py
@@ -1 +1 @@
-from .api import *
\ No newline at end of file
+from .api import *
diff --git a/apiserver/plane/urls.py b/apiserver/plane/urls.py
index 2b83ef8cf..90643749c 100644
--- a/apiserver/plane/urls.py
+++ b/apiserver/plane/urls.py
@@ -2,16 +2,13 @@
 
 """
 
-# from django.contrib import admin
 from django.urls import path, include, re_path
 from django.views.generic import TemplateView
 
 from django.conf import settings
 
-# from django.conf.urls.static import static
 
 urlpatterns = [
-    # path("admin/", admin.site.urls),
     path("", TemplateView.as_view(template_name="index.html")),
     path("api/", include("plane.api.urls")),
     path("", include("plane.web.urls")),
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index bffbb4c2a..be52bcce4 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -12,34 +12,47 @@ from django.db.models.functions import Coalesce, ExtractMonth, ExtractYear, Conc
 from plane.db.models import Issue
 
 
-def build_graph_plot(queryset, x_axis, y_axis, segment=None):
-
-    temp_axis = x_axis
+def annotate_with_monthly_dimension(queryset, field_name, attribute):
+    # Get the year and the months
+    year = ExtractYear(field_name)
+    month = ExtractMonth(field_name)
+    # Concat the year and month
+    dimension = Concat(year, Value("-"), month, output_field=CharField())
+    # Annotate the dimension
+    return queryset.annotate(**{attribute: dimension})
 
+def extract_axis(queryset, x_axis):
+    # Format the dimension when the axis is in date
     if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
-        year = ExtractYear(x_axis)
-        month = ExtractMonth(x_axis)
-        dimension = Concat(year, Value("-"), month, output_field=CharField())
-        queryset = queryset.annotate(dimension=dimension)
-        x_axis = "dimension"
+        queryset = annotate_with_monthly_dimension(queryset, x_axis, "dimension")
+        return queryset, "dimension"
     else:
-        queryset = queryset.annotate(dimension=F(x_axis))
-        x_axis = "dimension"
+        return queryset.annotate(dimension=F(x_axis)), "dimension"
 
-    if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
-        queryset = queryset.exclude(x_axis__is_null=True)
+def sort_data(data, temp_axis):
+    # When the axis is in priority order by
+    if temp_axis == "priority":
+        order = ["low", "medium", "high", "urgent", "none"]
+        return {key: data[key] for key in order if key in data}
+    else:
+        return dict(sorted(data.items(), key=lambda x: (x[0] == "none", x[0])))
 
+def build_graph_plot(queryset, x_axis, y_axis, segment=None):
+    # temp x_axis
+    temp_axis = x_axis
+    # Extract the x_axis and queryset
+    queryset, x_axis = extract_axis(queryset, x_axis)
+    if x_axis == "dimension":
+        queryset = queryset.exclude(dimension__isnull=True)
+
+    # 
     if segment in ["created_at", "start_date", "target_date", "completed_at"]:
-        year = ExtractYear(segment)
-        month = ExtractMonth(segment)
-        dimension = Concat(year, Value("-"), month, output_field=CharField())
-        queryset = queryset.annotate(segmented=dimension)
+        queryset = annotate_with_monthly_dimension(queryset, segment, "segmented")
         segment = "segmented"
 
     queryset = queryset.values(x_axis)
 
-    # Group queryset by x_axis field
-
+    # Issue count
     if y_axis == "issue_count":
         queryset = queryset.annotate(
             is_null=Case(
@@ -49,43 +62,25 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
             ),
             dimension_ex=Coalesce("dimension", Value("null")),
         ).values("dimension")
-        if segment:
-            queryset = queryset.annotate(segment=F(segment)).values(
-                "dimension", "segment"
-            )
-        else:
-            queryset = queryset.values("dimension")
-
+        queryset = queryset.annotate(segment=F(segment)) if segment else queryset
+        queryset = queryset.values("dimension", "segment") if segment else queryset.values("dimension")
         queryset = queryset.annotate(count=Count("*")).order_by("dimension")
 
-    if y_axis == "estimate":
+    # Estimate
+    else:
         queryset = queryset.annotate(estimate=Sum("estimate_point")).order_by(x_axis)
-        if segment:
-            queryset = queryset.annotate(segment=F(segment)).values(
-                "dimension", "segment", "estimate"
-            )
-        else:
-            queryset = queryset.values("dimension", "estimate")
+        queryset = queryset.annotate(segment=F(segment)) if segment else queryset
+        queryset = queryset.values("dimension", "segment", "estimate") if segment else queryset.values("dimension", "estimate")
 
     result_values = list(queryset)
-    grouped_data = {}
-    for key, items in groupby(result_values, key=lambda x: x[str("dimension")]):
-        grouped_data[str(key)] = list(items)
-
-    sorted_data = grouped_data
-    if temp_axis == "priority":
-        order = ["low", "medium", "high", "urgent", "none"]
-        sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
-    else:
-        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "none", x[0])))
-    return sorted_data
+    grouped_data = {str(key): list(items) for key, items in groupby(result_values, key=lambda x: x[str("dimension")])}
 
+    return sort_data(grouped_data, temp_axis)
 
 def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
     # Total Issues in Cycle or Module
     total_issues = queryset.total_issues
 
-
     if cycle_id:
         # Get all dates between the two dates
         date_range = [
@@ -107,7 +102,7 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
             .values("date", "total_completed")
             .order_by("date")
         )
-    
+
     if module_id:
         # Get all dates between the two dates
         date_range = [
@@ -130,18 +125,15 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
             .order_by("date")
         )
 
-
     for date in date_range:
         cumulative_pending_issues = total_issues
         total_completed = 0
         total_completed = sum(
-            [
-                item["total_completed"]
-                for item in completed_issues_distribution
-                if item["date"] is not None and item["date"] <= date
-            ]
+            item["total_completed"]
+            for item in completed_issues_distribution
+            if item["date"] is not None and item["date"] <= date
         )
         cumulative_pending_issues -= total_completed
         chart_data[str(date)] = cumulative_pending_issues
 
-    return chart_data
\ No newline at end of file
+    return chart_data
diff --git a/apiserver/plane/utils/grouper.py b/apiserver/plane/utils/grouper.py
index 9e134042a..853874b31 100644
--- a/apiserver/plane/utils/grouper.py
+++ b/apiserver/plane/utils/grouper.py
@@ -127,7 +127,7 @@ def group_results(results_data, group_by, sub_group_by=False):
         return main_responsive_dict            
 
     else:
-        response_dict = dict()
+        response_dict = {}
 
         if group_by == "priority":
             response_dict = {
diff --git a/apiserver/plane/utils/imports.py b/apiserver/plane/utils/imports.py
index 1a0d2924e..5f9f1c98c 100644
--- a/apiserver/plane/utils/imports.py
+++ b/apiserver/plane/utils/imports.py
@@ -17,4 +17,4 @@ def import_submodules(context, root_module, path):
         for k, v in six.iteritems(vars(module)):
             if not k.startswith('_'):
                 context[k] = v
-        context[module_name] = module
\ No newline at end of file
+        context[module_name] = module
diff --git a/apiserver/plane/utils/integrations/slack.py b/apiserver/plane/utils/integrations/slack.py
new file mode 100644
index 000000000..70f26e160
--- /dev/null
+++ b/apiserver/plane/utils/integrations/slack.py
@@ -0,0 +1,20 @@
+import os
+import requests
+
+def slack_oauth(code):
+    SLACK_OAUTH_URL = os.environ.get("SLACK_OAUTH_URL", False)
+    SLACK_CLIENT_ID = os.environ.get("SLACK_CLIENT_ID", False)
+    SLACK_CLIENT_SECRET = os.environ.get("SLACK_CLIENT_SECRET", False)
+
+    # Oauth Slack
+    if SLACK_OAUTH_URL and SLACK_CLIENT_ID and SLACK_CLIENT_SECRET:
+        response = requests.get(
+            SLACK_OAUTH_URL,
+            params={
+                "code": code,
+                "client_id": SLACK_CLIENT_ID,
+                "client_secret": SLACK_CLIENT_SECRET,
+            },
+        )
+        return response.json()
+    return {}
diff --git a/apiserver/plane/utils/ip_address.py b/apiserver/plane/utils/ip_address.py
index 29a2fa520..06ca4353d 100644
--- a/apiserver/plane/utils/ip_address.py
+++ b/apiserver/plane/utils/ip_address.py
@@ -4,4 +4,4 @@ def get_client_ip(request):
         ip = x_forwarded_for.split(',')[0]
     else:
         ip = request.META.get('REMOTE_ADDR')
-    return ip
\ No newline at end of file
+    return ip
diff --git a/apiserver/plane/utils/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index dae301c38..75437fbee 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -1,43 +1,115 @@
-from django.utils.timezone import make_aware
-from django.utils.dateparse import parse_datetime
+import re
+import uuid
+from datetime import timedelta
+from django.utils import timezone
+
+
+# The date from pattern
+pattern = re.compile(r"\d+_(weeks|months)$")
+
+# check the valid uuids
+def filter_valid_uuids(uuid_list):
+    valid_uuids = []
+    for uuid_str in uuid_list:
+        try:
+            uuid_obj = uuid.UUID(uuid_str)
+            valid_uuids.append(uuid_obj)
+        except ValueError:
+            # ignore the invalid uuids
+            pass
+    return valid_uuids
+
+
+# Get the 2_weeks, 3_months
+def string_date_filter(filter, duration, subsequent, term, date_filter, offset):
+    now = timezone.now().date()
+    if term == "months":
+        if subsequent == "after":
+            if offset == "fromnow":
+                filter[f"{date_filter}__gte"] = now + timedelta(days=duration * 30)
+            else:
+                filter[f"{date_filter}__gte"] = now - timedelta(days=duration * 30)
+        else:
+            if offset == "fromnow":
+                filter[f"{date_filter}__lte"] = now + timedelta(days=duration * 30)
+            else:
+                filter[f"{date_filter}__lte"] = now - timedelta(days=duration * 30)
+    if term == "weeks":
+        if subsequent == "after":
+            if offset == "fromnow":
+                filter[f"{date_filter}__gte"] = now + timedelta(weeks=duration)
+            else:
+                filter[f"{date_filter}__gte"] = now - timedelta(weeks=duration)
+        else:
+            if offset == "fromnow":
+                filter[f"{date_filter}__lte"] = now + timedelta(days=duration)
+            else:
+                filter[f"{date_filter}__lte"] = now - timedelta(days=duration)
+
+
+def date_filter(filter, date_term, queries):
+    """
+        Handle all date filters
+    """
+    for query in queries:
+        date_query = query.split(";")
+        if len(date_query) >= 2:
+            match = pattern.match(date_query[0])
+            if match:
+                if len(date_query) == 3:
+                    digit, term = date_query[0].split("_")
+                    string_date_filter(
+                        filter=filter,
+                        duration=int(digit),
+                        subsequent=date_query[1],
+                        term=term,
+                        date_filter="created_at__date",
+                        offset=date_query[2],
+                    )
+            else:
+                if "after" in date_query:
+                    filter[f"{date_term}__gte"] = date_query[0]
+                else:
+                    filter[f"{date_term}__lte"] = date_query[0]
 
 
 def filter_state(params, filter, method):
     if method == "GET":
-        states = params.get("state").split(",")
+        states = [item for item in params.get("state").split(",") if item != 'null']
+        states = filter_valid_uuids(states)
         if len(states) and "" not in states:
             filter["state__in"] = states
     else:
-        if params.get("state", None) and len(params.get("state")):
+        if params.get("state", None) and len(params.get("state")) and params.get("state") != 'null':
             filter["state__in"] = params.get("state")
     return filter
 
 
 def filter_state_group(params, filter, method):
     if method == "GET":
-        state_group = params.get("state_group").split(",")
+        state_group = [item for item in params.get("state_group").split(",") if item != 'null']
         if len(state_group) and "" not in state_group:
             filter["state__group__in"] = state_group
     else:
-        if params.get("state_group", None) and len(params.get("state_group")):
+        if params.get("state_group", None) and len(params.get("state_group")) and params.get("state_group") != 'null':
             filter["state__group__in"] = params.get("state_group")
     return filter
 
 
 def filter_estimate_point(params, filter, method):
     if method == "GET":
-        estimate_points = params.get("estimate_point").split(",")
+        estimate_points = [item for item in params.get("estimate_point").split(",") if item != 'null']
         if len(estimate_points) and "" not in estimate_points:
             filter["estimate_point__in"] = estimate_points
     else:
-        if params.get("estimate_point", None) and len(params.get("estimate_point")):
+        if params.get("estimate_point", None) and len(params.get("estimate_point")) and params.get("estimate_point") != 'null':
             filter["estimate_point__in"] = params.get("estimate_point")
     return filter
 
 
 def filter_priority(params, filter, method):
     if method == "GET":
-        priorities = params.get("priority").split(",")
+        priorities = [item for item in params.get("priority").split(",") if item != 'null']
         if len(priorities) and "" not in priorities:
             filter["priority__in"] = priorities
     return filter
@@ -45,44 +117,59 @@ def filter_priority(params, filter, method):
 
 def filter_parent(params, filter, method):
     if method == "GET":
-        parents = params.get("parent").split(",")
+        parents = [item for item in params.get("parent").split(",") if item != 'null']
+        parents = filter_valid_uuids(parents)
         if len(parents) and "" not in parents:
             filter["parent__in"] = parents
     else:
-        if params.get("parent", None) and len(params.get("parent")):
+        if params.get("parent", None) and len(params.get("parent")) and params.get("parent") != 'null':
             filter["parent__in"] = params.get("parent")
     return filter
 
 
 def filter_labels(params, filter, method):
     if method == "GET":
-        labels = params.get("labels").split(",")
+        labels = [item for item in params.get("labels").split(",") if item != 'null']
+        labels = filter_valid_uuids(labels)
         if len(labels) and "" not in labels:
             filter["labels__in"] = labels
     else:
-        if params.get("labels", None) and len(params.get("labels")):
+        if params.get("labels", None) and len(params.get("labels")) and params.get("labels") != 'null':
             filter["labels__in"] = params.get("labels")
     return filter
 
 
 def filter_assignees(params, filter, method):
     if method == "GET":
-        assignees = params.get("assignees").split(",")
+        assignees = [item for item in params.get("assignees").split(",") if item != 'null']
+        assignees = filter_valid_uuids(assignees)
         if len(assignees) and "" not in assignees:
             filter["assignees__in"] = assignees
     else:
-        if params.get("assignees", None) and len(params.get("assignees")):
+        if params.get("assignees", None) and len(params.get("assignees")) and params.get("assignees") != 'null':
             filter["assignees__in"] = params.get("assignees")
     return filter
 
+def filter_mentions(params, filter, method):
+    if method == "GET":
+        mentions = [item for item in params.get("mentions").split(",") if item != 'null']
+        mentions = filter_valid_uuids(mentions)
+        if len(mentions) and "" not in mentions:
+            filter["issue_mention__mention__id__in"] = mentions
+    else:
+        if params.get("mentions", None) and len(params.get("mentions")) and params.get("mentions") != 'null':
+            filter["issue_mention__mention__id__in"] = params.get("mentions")
+    return filter
+
 
 def filter_created_by(params, filter, method):
     if method == "GET":
-        created_bys = params.get("created_by").split(",")
+        created_bys = [item for item in params.get("created_by").split(",") if item != 'null']
+        created_bys = filter_valid_uuids(created_bys)
         if len(created_bys) and "" not in created_bys:
             filter["created_by__in"] = created_bys
     else:
-        if params.get("created_by", None) and len(params.get("created_by")):
+        if params.get("created_by", None) and len(params.get("created_by")) and params.get("created_by") != 'null':
             filter["created_by__in"] = params.get("created_by")
     return filter
 
@@ -97,20 +184,10 @@ def filter_created_at(params, filter, method):
     if method == "GET":
         created_ats = params.get("created_at").split(",")
         if len(created_ats) and "" not in created_ats:
-            for query in created_ats:
-                created_at_query = query.split(";")
-                if len(created_at_query) == 2 and "after" in created_at_query:
-                    filter["created_at__date__gte"] = created_at_query[0]
-                else:
-                    filter["created_at__date__lte"] = created_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=created_ats)
     else:
         if params.get("created_at", None) and len(params.get("created_at")):
-            for query in params.get("created_at"):
-                created_at_query = query.split(";")
-                if len(created_at_query) == 2 and "after" in created_at_query:
-                    filter["created_at__date__gte"] = created_at_query[0]
-                else:
-                    filter["created_at__date__lte"] = created_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=params.get("created_at", []))
     return filter
 
 
@@ -118,20 +195,10 @@ def filter_updated_at(params, filter, method):
     if method == "GET":
         updated_ats = params.get("updated_at").split(",")
         if len(updated_ats) and "" not in updated_ats:
-            for query in updated_ats:
-                updated_at_query = query.split(";")
-                if len(updated_at_query) == 2 and "after" in updated_at_query:
-                    filter["updated_at__date__gte"] = updated_at_query[0]
-                else:
-                    filter["updated_at__date__lte"] = updated_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=updated_ats)
     else:
         if params.get("updated_at", None) and len(params.get("updated_at")):
-            for query in params.get("updated_at"):
-                updated_at_query = query.split(";")
-                if len(updated_at_query) == 2 and "after" in updated_at_query:
-                    filter["updated_at__date__gte"] = updated_at_query[0]
-                else:
-                    filter["updated_at__date__lte"] = updated_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=params.get("updated_at", []))
     return filter
 
 
@@ -139,20 +206,10 @@ def filter_start_date(params, filter, method):
     if method == "GET":
         start_dates = params.get("start_date").split(",")
         if len(start_dates) and "" not in start_dates:
-            for query in start_dates:
-                start_date_query = query.split(";")
-                if len(start_date_query) == 2 and "after" in start_date_query:
-                    filter["start_date__gte"] = start_date_query[0]
-                else:
-                    filter["start_date__lte"] = start_date_query[0]
+            date_filter(filter=filter, date_term="start_date", queries=start_dates)
     else:
         if params.get("start_date", None) and len(params.get("start_date")):
-            for query in params.get("start_date"):
-                start_date_query = query.split(";")
-                if len(start_date_query) == 2 and "after" in start_date_query:
-                    filter["start_date__gte"] = start_date_query[0]
-                else:
-                    filter["start_date__lte"] = start_date_query[0]
+            filter["start_date"] = params.get("start_date")
     return filter
 
 
@@ -160,21 +217,10 @@ 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:
-            for query in target_dates:
-                target_date_query = query.split(";")
-                if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
-                else:
-                    filter["target_date__lte"] = target_date_query[0]
+            date_filter(filter=filter, date_term="target_date", queries=target_dates)
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
-            for query in params.get("target_date"):
-                target_date_query = query.split(";")
-                if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
-                else:
-                    filter["target_date__lte"] = target_date_query[0]
-
+            filter["target_date"] = params.get("target_date")
     return filter
 
 
@@ -182,20 +228,10 @@ def filter_completed_at(params, filter, method):
     if method == "GET":
         completed_ats = params.get("completed_at").split(",")
         if len(completed_ats) and "" not in completed_ats:
-            for query in completed_ats:
-                completed_at_query = query.split(";")
-                if len(completed_at_query) == 2 and "after" in completed_at_query:
-                    filter["completed_at__date__gte"] = completed_at_query[0]
-                else:
-                    filter["completed_at__lte"] = completed_at_query[0]
+            date_filter(filter=filter, date_term="completed_at__date", queries=completed_ats)
     else:
         if params.get("completed_at", None) and len(params.get("completed_at")):
-            for query in params.get("completed_at"):
-                completed_at_query = query.split(";")
-                if len(completed_at_query) == 2 and "after" in completed_at_query:
-                    filter["completed_at__date__gte"] = completed_at_query[0]
-                else:
-                    filter["completed_at__lte"] = completed_at_query[0]
+            date_filter(filter=filter, date_term="completed_at__date", queries=params.get("completed_at", []))
     return filter
 
 
@@ -213,44 +249,47 @@ def filter_issue_state_type(params, filter, method):
 
 def filter_project(params, filter, method):
     if method == "GET":
-        projects = params.get("project").split(",")
+        projects = [item for item in params.get("project").split(",") if item != 'null']
+        projects = filter_valid_uuids(projects)
         if len(projects) and "" not in projects:
             filter["project__in"] = projects
     else:
-        if params.get("project", None) and len(params.get("project")):
+        if params.get("project", None) and len(params.get("project")) and params.get("project") != 'null':
             filter["project__in"] = params.get("project")
     return filter
 
 
 def filter_cycle(params, filter, method):
     if method == "GET":
-        cycles = params.get("cycle").split(",")
+        cycles = [item for item in params.get("cycle").split(",") if item != 'null']
+        cycles = filter_valid_uuids(cycles)
         if len(cycles) and "" not in cycles:
             filter["issue_cycle__cycle_id__in"] = cycles
     else:
-        if params.get("cycle", None) and len(params.get("cycle")):
+        if params.get("cycle", None) and len(params.get("cycle")) and params.get("cycle") != 'null':
             filter["issue_cycle__cycle_id__in"] = params.get("cycle")
     return filter
 
 
 def filter_module(params, filter, method):
     if method == "GET":
-        modules = params.get("module").split(",")
+        modules = [item for item in params.get("module").split(",") if item != 'null']
+        modules = filter_valid_uuids(modules)
         if len(modules) and "" not in modules:
             filter["issue_module__module_id__in"] = modules
     else:
-        if params.get("module", None) and len(params.get("module")):
+        if params.get("module", None) and len(params.get("module")) and params.get("module") != 'null':
             filter["issue_module__module_id__in"] = params.get("module")
     return filter
 
 
 def filter_inbox_status(params, filter, method):
     if method == "GET":
-        status = params.get("inbox_status").split(",")
+        status = [item for item in params.get("inbox_status").split(",") if item != 'null']
         if len(status) and "" not in status:
             filter["issue_inbox__status__in"] = status
     else:
-        if params.get("inbox_status", None) and len(params.get("inbox_status")):
+        if params.get("inbox_status", None) and len(params.get("inbox_status")) and params.get("inbox_status") != 'null':
             filter["issue_inbox__status__in"] = params.get("inbox_status")
     return filter
 
@@ -269,11 +308,12 @@ def filter_sub_issue_toggle(params, filter, method):
 
 def filter_subscribed_issues(params, filter, method):
     if method == "GET":
-        subscribers = params.get("subscriber").split(",")
+        subscribers = [item for item in params.get("subscriber").split(",") if item != 'null']
+        subscribers = filter_valid_uuids(subscribers)
         if len(subscribers) and "" not in subscribers:
             filter["issue_subscribers__subscriber_id__in"] = subscribers
     else:
-        if params.get("subscriber", None) and len(params.get("subscriber")):
+        if params.get("subscriber", None) and len(params.get("subscriber")) and params.get("subscriber") != 'null':
             filter["issue_subscribers__subscriber_id__in"] = params.get("subscriber")
     return filter
 
@@ -287,7 +327,7 @@ def filter_start_target_date_issues(params, filter, method):
 
 
 def issue_filters(query_params, method):
-    filter = dict()
+    filter = {}
 
     ISSUE_FILTER = {
         "state": filter_state,
@@ -297,6 +337,7 @@ def issue_filters(query_params, method):
         "parent": filter_parent,
         "labels": filter_labels,
         "assignees": filter_assignees,
+        "mentions": filter_mentions,
         "created_by": filter_created_by,
         "name": filter_name,
         "created_at": filter_created_at,
diff --git a/apiserver/plane/utils/markdown.py b/apiserver/plane/utils/markdown.py
index 15d5b4dce..188c54fec 100644
--- a/apiserver/plane/utils/markdown.py
+++ b/apiserver/plane/utils/markdown.py
@@ -1,3 +1,3 @@
 import mistune
 
-markdown = mistune.Markdown()
\ No newline at end of file
+markdown = mistune.Markdown()
diff --git a/apiserver/plane/utils/paginator.py b/apiserver/plane/utils/paginator.py
index b3c50abd1..544ed8fef 100644
--- a/apiserver/plane/utils/paginator.py
+++ b/apiserver/plane/utils/paginator.py
@@ -21,12 +21,7 @@ class Cursor:
         )
 
     def __repr__(self):
-        return "<{}: value={} offset={} is_prev={}>".format(
-            type(self).__name__,
-            self.value,
-            self.offset,
-            int(self.is_prev),
-        )
+        return f"{type(self).__name__,}: value={self.value} offset={self.offset}, is_prev={int(self.is_prev)}"
 
     def __bool__(self):
         return bool(self.has_results)
@@ -176,10 +171,6 @@ class BasePaginator:
         **paginator_kwargs,
     ):
         """Paginate the request"""
-        assert (paginator and not paginator_kwargs) or (
-            paginator_cls and paginator_kwargs
-        )
-
         per_page = self.get_per_page(request, default_per_page, max_per_page)
 
         # Convert the cursor value to integer and float from string
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 969ab3c89..249b29d48 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -33,4 +33,5 @@ django_celery_beat==2.5.0
 psycopg-binary==3.1.10
 psycopg-c==3.1.10
 scout-apm==2.26.1
-openpyxl==3.1.2
\ No newline at end of file
+openpyxl==3.1.2
+beautifulsoup4==4.12.2
\ No newline at end of file
diff --git a/apiserver/runtime.txt b/apiserver/runtime.txt
index d5831c54f..dfe813b86 100644
--- a/apiserver/runtime.txt
+++ b/apiserver/runtime.txt
@@ -1 +1 @@
-python-3.11.5
\ No newline at end of file
+python-3.11.6
\ No newline at end of file
diff --git a/deploy/heroku/Dockerfile b/deploy/heroku/Dockerfile
deleted file mode 100644
index edae32788..000000000
--- a/deploy/heroku/Dockerfile
+++ /dev/null
@@ -1,4 +0,0 @@
-# Deploy the Plane image
-FROM makeplane/plane
-
-LABEL maintainer="engineering@plane.so"
\ No newline at end of file
diff --git a/deploy/selfhost/docker-compose.yml b/deploy/selfhost/docker-compose.yml
new file mode 100644
index 000000000..c571291cf
--- /dev/null
+++ b/deploy/selfhost/docker-compose.yml
@@ -0,0 +1,170 @@
+version: "3.8"
+
+x-app-env : &app-env
+  environment:
+    - NGINX_PORT=${NGINX_PORT:-84}
+    - DEBUG=${DEBUG:-0}
+    - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
+    - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
+    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces}
+    - SENTRY_DSN=${SENTRY_DSN:-""}
+    - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
+    - DOCKERIZED=${DOCKERIZED:-1}
+      # Gunicorn Workers
+    - GUNICORN_WORKERS=${GUNICORN_WORKERS:-2}
+    #DB SETTINGS
+    - PGHOST=${PGHOST:-plane-db}
+    - PGDATABASE=${PGDATABASE:-plane}
+    - POSTGRES_USER=${POSTGRES_USER:-plane}
+    - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-plane}
+    - POSTGRES_DB=${POSTGRES_DB:-plane}
+    - PGDATA=${PGDATA:-/var/lib/postgresql/data}
+    - DATABASE_URL=${DATABASE_URL:-postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${PGHOST}/${PGDATABASE}}
+    # REDIS SETTINGS
+    - REDIS_HOST=${REDIS_HOST:-plane-redis}
+    - REDIS_PORT=${REDIS_PORT:-6379}
+    - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
+    # EMAIL SETTINGS
+    - EMAIL_HOST=${EMAIL_HOST:-""}
+    - EMAIL_HOST_USER=${EMAIL_HOST_USER:-""}
+    - EMAIL_HOST_PASSWORD=${EMAIL_HOST_PASSWORD:-""}
+    - EMAIL_PORT=${EMAIL_PORT:-587}
+    - EMAIL_FROM=${EMAIL_FROM:-"Team Plane &lt;team@mailer.plane.so&gt;"}
+    - EMAIL_USE_TLS=${EMAIL_USE_TLS:-1}
+    - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
+    - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
+    - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
+    # OPENAI SETTINGS
+    - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
+    - OPENAI_API_KEY=${OPENAI_API_KEY:-"sk-"}
+    - GPT_ENGINE=${GPT_ENGINE:-"gpt-3.5-turbo"}
+    # LOGIN/SIGNUP SETTINGS
+    - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
+    - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
+    - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
+    - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
+    # DATA STORE SETTINGS
+    - USE_MINIO=${USE_MINIO:-1}
+    - AWS_REGION=${AWS_REGION:-""}
+    - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-"access-key"}
+    - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-"secret-key"}
+    - AWS_S3_ENDPOINT_URL=${AWS_S3_ENDPOINT_URL:-http://plane-minio:9000}
+    - AWS_S3_BUCKET_NAME=${AWS_S3_BUCKET_NAME:-uploads}
+    - MINIO_ROOT_USER=${MINIO_ROOT_USER:-"access-key"}
+    - MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD:-"secret-key"}
+    - BUCKET_NAME=${BUCKET_NAME:-uploads}
+    - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
+
+services:
+  web:
+    <<: *app-env
+    platform: linux/amd64
+    image: makeplane/plane-frontend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: /usr/local/bin/start.sh web/server.js web
+    deploy:
+      replicas: ${WEB_REPLICAS:-1}
+    depends_on:
+      - api
+      - worker
+
+  space:
+    <<: *app-env
+    platform: linux/amd64
+    image: makeplane/plane-space:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: /usr/local/bin/start.sh space/server.js space
+    deploy:
+      replicas: ${SPACE_REPLICAS:-1}
+    depends_on:
+      - api
+      - worker
+      - web
+
+  api:
+    <<: *app-env
+    platform: linux/amd64
+    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: ./bin/takeoff
+    deploy:
+      replicas: ${API_REPLICAS:-1}
+    depends_on:
+      - plane-db
+      - plane-redis
+
+  worker:
+    <<: *app-env
+    container_name: bgworker
+    platform: linux/amd64
+    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: ./bin/worker
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  beat-worker:
+    <<: *app-env
+    container_name: beatworker
+    platform: linux/amd64
+    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: ./bin/beat
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  plane-db:
+    <<: *app-env
+    container_name: plane-db
+    image: postgres:15.2-alpine
+    restart: unless-stopped
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    
+  plane-redis:
+    <<: *app-env
+    container_name: plane-redis
+    image: redis:6.2.7-alpine
+    restart: unless-stopped
+    volumes:
+      - redisdata:/data
+
+  plane-minio:
+    <<: *app-env
+    container_name: plane-minio
+    image: minio/minio
+    restart: unless-stopped
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+
+  createbuckets:
+    <<: *app-env
+    image: minio/mc
+    entrypoint: >
+      /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+    depends_on:
+      - plane-minio
+
+  # Comment this if you already have a reverse proxy running
+  proxy:
+    <<: *app-env
+    container_name: proxy
+    platform: linux/amd64
+    image: makeplane/plane-proxy:${APP_RELEASE:-latest}
+    ports:
+        - ${NGINX_PORT}:80
+    depends_on:
+      - web
+      - api
+      - space
+
+volumes:
+  pgdata:
+  redisdata:
+  uploads:
diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
new file mode 100755
index 000000000..f9437a844
--- /dev/null
+++ b/deploy/selfhost/install.sh
@@ -0,0 +1,111 @@
+#!/bin/bash
+
+BRANCH=${BRANCH:-master}
+SCRIPT_DIR=$PWD
+PLANE_INSTALL_DIR=$PWD/plane-app
+mkdir -p $PLANE_INSTALL_DIR/archive
+
+function install(){
+    echo 
+    echo "Installing on $PLANE_INSTALL_DIR"
+    download
+}
+function download(){
+    cd $SCRIPT_DIR
+    TS=$(date +%s)
+    if [ -f "$PLANE_INSTALL_DIR/docker-compose.yaml" ]
+    then
+        mv $PLANE_INSTALL_DIR/docker-compose.yaml $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yaml
+    fi
+
+    curl -H 'Cache-Control: no-cache, no-store' -s -o $PLANE_INSTALL_DIR/docker-compose.yaml  https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/docker-compose.yml?$(date +%s)
+    curl -H 'Cache-Control: no-cache, no-store' -s -o $PLANE_INSTALL_DIR/variables-upgrade.env https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/variables.env?$(date +%s)
+
+    if [ -f "$PLANE_INSTALL_DIR/.env" ];
+    then
+        cp $PLANE_INSTALL_DIR/.env $PLANE_INSTALL_DIR/archive/$TS.env
+    else
+        mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
+    fi
+
+
+    echo ""
+    echo "Latest version is now available for you to use"
+    echo ""
+    echo "In case of Upgrade, your new setting file is availabe as 'variables-upgrade.env'. Please compare and set the required values in '.env 'file."
+    echo ""
+
+}
+function startServices(){
+    cd $PLANE_INSTALL_DIR
+    docker compose up -d
+    cd $SCRIPT_DIR
+}
+function stopServices(){
+    cd $PLANE_INSTALL_DIR
+    docker compose down
+    cd $SCRIPT_DIR
+}
+function restartServices(){
+    cd $PLANE_INSTALL_DIR
+    docker compose restart
+    cd $SCRIPT_DIR
+}
+function upgrade(){
+    echo "***** STOPPING SERVICES ****"
+    stopServices
+
+    echo
+    echo "***** DOWNLOADING LATEST VERSION ****"
+    download
+
+    echo "***** PLEASE VALIDATE AND START SERVICES ****"
+
+}
+function askForAction(){
+    echo
+    echo "Select a Action you want to perform:"
+    echo "   1) Install"
+    echo "   2) Start"
+    echo "   3) Stop"
+    echo "   4) Restart"
+    echo "   5) Upgrade"
+    echo "   6) Exit"
+    echo 
+    read -p "Action [2]: " ACTION
+    until [[ -z "$ACTION" || "$ACTION" =~ ^[1-6]$ ]]; do
+        echo "$ACTION: invalid selection."
+        read -p "Action [2]: " ACTION
+    done
+    echo
+
+
+    if [ "$ACTION" == "1" ]
+    then
+        install
+        askForAction
+    elif [ "$ACTION" == "2" ] || [ "$ACTION" == "" ]
+    then
+        startServices
+        askForAction
+    elif [ "$ACTION" == "3" ] 
+    then
+        stopServices
+        askForAction
+    elif [ "$ACTION" == "4" ] 
+    then
+        restartServices
+        askForAction
+    elif [ "$ACTION" == "5" ] 
+    then
+        upgrade
+        askForAction
+    elif [ "$ACTION" == "6" ] 
+    then
+        exit 0
+    else
+        echo "INVALID ACTION SUPPLIED"
+    fi
+}
+
+askForAction
diff --git a/deploy/selfhost/variables.env b/deploy/selfhost/variables.env
new file mode 100644
index 000000000..b12031126
--- /dev/null
+++ b/deploy/selfhost/variables.env
@@ -0,0 +1,65 @@
+APP_RELEASE=latest
+
+WEB_REPLICAS=1
+SPACE_REPLICAS=1
+API_REPLICAS=1
+
+NGINX_PORT=80
+DEBUG=0
+DJANGO_SETTINGS_MODULE=plane.settings.selfhosted
+NEXT_PUBLIC_ENABLE_OAUTH=0
+NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
+SENTRY_DSN=""
+GITHUB_CLIENT_SECRET=""
+DOCKERIZED=1
+
+#DB SETTINGS
+PGHOST=plane-db
+PGDATABASE=plane
+POSTGRES_USER=plane
+POSTGRES_PASSWORD=plane
+POSTGRES_DB=plane
+PGDATA=/var/lib/postgresql/data
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${PGHOST}/${PGDATABASE}
+
+# REDIS SETTINGS
+REDIS_HOST=plane-redis
+REDIS_PORT=6379
+REDIS_URL=redis://${REDIS_HOST}:6379/
+
+# EMAIL SETTINGS
+EMAIL_HOST=""
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+EMAIL_FROM="Team Plane &lt;team@mailer.plane.so&gt;"
+EMAIL_USE_TLS=1
+EMAIL_USE_SSL=0
+DEFAULT_EMAIL=captain@plane.so
+DEFAULT_PASSWORD=password123
+
+# OPENAI SETTINGS
+OPENAI_API_BASE=https://api.openai.com/v1
+OPENAI_API_KEY="sk-"
+GPT_ENGINE="gpt-3.5-turbo"
+
+# LOGIN/SIGNUP SETTINGS
+ENABLE_SIGNUP=1
+ENABLE_EMAIL_PASSWORD=1
+ENABLE_MAGIC_LINK_LOGIN=0
+SECRET_KEY=60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5
+
+# DATA STORE SETTINGS
+USE_MINIO=1
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL=http://plane-minio:9000
+AWS_S3_BUCKET_NAME=uploads
+MINIO_ROOT_USER="access-key"
+MINIO_ROOT_PASSWORD="secret-key"
+BUCKET_NAME=uploads
+FILE_SIZE_LIMIT=5242880
+
+# Gunicorn Workers
+GUNICORN_WORKERS=2
diff --git a/docker-compose-hub.yml b/docker-compose-hub.yml
deleted file mode 100644
index 498f37b84..000000000
--- a/docker-compose-hub.yml
+++ /dev/null
@@ -1,126 +0,0 @@
-version: "3.8"
-
-services:
-        web:
-                container_name: web
-                image: makeplane/plane-frontend:latest
-                restart: always
-                command: /usr/local/bin/start.sh web/server.js web
-                env_file:
-                        - ./web/.env
-                depends_on:
-                        - api
-                        - worker
-
-        space:
-                container_name: space
-                image: makeplane/plane-space:latest
-                restart: always
-                command: /usr/local/bin/start.sh space/server.js space
-                env_file:
-                        - ./space/.env
-                depends_on:
-                        - api
-                        - worker
-                        - web
-
-        api:
-                container_name: api
-                image: makeplane/plane-backend:latest
-                restart: always
-                command: ./bin/takeoff
-                env_file:
-                        - ./apiserver/.env
-                depends_on:
-                        - plane-db
-                        - plane-redis
-
-        worker:
-                container_name: bgworker
-                image: makeplane/plane-backend:latest
-                restart: always
-                command: ./bin/worker
-                env_file:
-                        - ./apiserver/.env
-                depends_on:
-                        - api
-                        - plane-db
-                        - plane-redis
-
-        beat-worker:
-                container_name: beatworker
-                image: makeplane/plane-backend:latest
-                restart: always
-                command: ./bin/beat
-                env_file:
-                        - ./apiserver/.env
-                depends_on:
-                        - api
-                        - plane-db
-                        - plane-redis
-
-
-        plane-db:
-                container_name: plane-db
-                image: postgres:15.2-alpine
-                restart: always
-                command: postgres -c 'max_connections=1000'
-                volumes:
-                        - pgdata:/var/lib/postgresql/data
-                env_file:
-                        - .env
-                environment:
-                        POSTGRES_USER: ${PGUSER}
-                        POSTGRES_DB: ${PGDATABASE}
-                        POSTGRES_PASSWORD: ${PGPASSWORD}
-                        PGDATA: /var/lib/postgresql/data
-
-        plane-redis:
-                container_name: plane-redis
-                image: redis:6.2.7-alpine
-                restart: always
-                volumes:
-                        - redisdata:/data
-
-        plane-minio:
-                container_name: plane-minio
-                image: minio/minio
-                restart: always
-                command: server /export --console-address ":9090"
-                volumes:
-                        - uploads:/export
-                env_file:
-                        - .env
-                environment:
-                        MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
-                        MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
-
-        createbuckets:
-                image: minio/mc
-                entrypoint: >
-                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
-                env_file:
-                        - .env
-                depends_on:
-                        - plane-minio
-
-        # Comment this if you already have a reverse proxy running
-        proxy:
-                container_name: proxy
-                image: makeplane/plane-proxy:latest
-                ports:
-                        - ${NGINX_PORT}:80
-                env_file:
-                        - .env
-                environment:
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
-                        BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
-                depends_on:
-                        - web
-                        - api
-                        - space
-
-volumes:
-        pgdata:
-        redisdata:
-        uploads:
diff --git a/docker-compose-local.yml b/docker-compose-local.yml
new file mode 100644
index 000000000..4f433e3ac
--- /dev/null
+++ b/docker-compose-local.yml
@@ -0,0 +1,178 @@
+version: "3.8"
+
+networks:
+  dev_env:
+    driver: bridge
+
+volumes:
+  redisdata:
+  uploads:
+  pgdata:
+  
+
+services:
+  plane-redis:
+    container_name: plane-redis
+    image: redis:6.2.7-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - redisdata:/data
+ 
+  plane-minio:
+    container_name: plane-minio
+    image: minio/minio
+    restart: unless-stopped
+    networks:
+      - dev_env
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+    env_file:
+      - .env
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+ 
+  createbuckets:
+    image: minio/mc
+    networks:
+      - dev_env
+    entrypoint: >
+      /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+    env_file:
+      - .env
+    depends_on:
+      - plane-minio
+ 
+  plane-db:
+    container_name: plane-db
+    image: postgres:15.2-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    env_file:
+      - .env
+    environment:
+      POSTGRES_USER: ${PGUSER}
+      POSTGRES_DB: ${PGDATABASE}
+      POSTGRES_PASSWORD: ${PGPASSWORD}
+      PGDATA: /var/lib/postgresql/data
+
+  web:
+    container_name: web
+    build:
+      context: .
+      dockerfile: ./web/Dockerfile.dev
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - .:/app
+    command: yarn dev --filter=web
+    env_file:
+      - ./web/.env
+    depends_on:
+      - api
+      - worker
+
+  space:
+    build:
+      context: .
+      dockerfile: ./space/Dockerfile.dev
+    container_name: space
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - .:/app
+    command: yarn dev --filter=space
+    env_file:
+      - ./space/.env
+    depends_on:
+      - api
+      - worker
+      - web
+
+  api:
+    container_name: api
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apiserver:/code
+    command: /bin/sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000 --settings=plane.settings.local"
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - plane-db
+      - plane-redis
+  
+  worker:
+    container_name: bgworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apiserver:/code
+    command: /bin/sh -c "celery -A plane worker -l info"
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  beat-worker:
+    container_name: beatworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apiserver:/code
+    command: /bin/sh -c "celery -A plane beat -l info"
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  proxy:
+    container_name: proxy
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    networks:
+      - dev_env
+    ports:
+      - ${NGINX_PORT}:80
+    env_file:
+      - .env
+    environment:
+      FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+      BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+    depends_on:
+      - web
+      - api
+      - space
diff --git a/package.json b/package.json
index 1f2f96414..86f010f3f 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,11 @@
   "workspaces": [
     "web",
     "space",
-    "packages/*"
+    "packages/editor/*",
+    "packages/eslint-config-custom",
+    "packages/tailwind-config-custom",
+    "packages/tsconfig",
+    "packages/ui"
   ],
   "scripts": {
     "build": "turbo run build",
@@ -23,7 +27,10 @@
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.3.3",
-    "turbo": "latest"
+    "turbo": "^1.10.16"
+  },
+  "resolutions": {
+    "@types/react": "18.2.0"
   },
   "packageManager": "yarn@1.22.19"
 }
diff --git a/packages/editor/core/Readme.md b/packages/editor/core/Readme.md
new file mode 100644
index 000000000..aafda7008
--- /dev/null
+++ b/packages/editor/core/Readme.md
@@ -0,0 +1,116 @@
+# @plane/editor-core
+
+## Description
+
+The `@plane/editor-core` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects but only for extending other editors.
+
+## Utilities
+
+We provide a wide range of utilities for extending the core itself.
+
+1. Merging classes and custom styling
+2. Adding new extensions
+3. Adding custom props
+4. Base menu items, and their commands
+
+This allows for extensive customization and flexibility in the Editors created using our `editor-core` package.
+
+### Here's a detailed overview of what's exported
+
+1. useEditor - A hook that you can use to extend the Plane editor.
+
+   | Prop                      | Type                                                             | Description                                                                                                                                                             |
+   | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `extensions`              | `Extension[]`                                                    | An array of custom extensions you want to add into the editor to extend it's core features                                                                              |
+   | `editorProps`             | `EditorProps`                                                    | Extend the editor props by passing in a custom props object                                                                                                             |
+   | `uploadFile`              | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+   | `deleteFile`              | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+   | `value`                   | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+   | `debouncedUpdatesEnabled` | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+   | `onChange`                | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+   | `setIsSubmitting`         | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+   | `setShouldShowAlert`      | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert in case of content not being "saved".                                                                                    |
+   | `forwardedRef`            | `any`                                                            | Pass this in whenever you want to control the editor's state from an external component                                                                                 |
+
+2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.
+
+   | Prop           | Type          | Description                                                                                |
+   | -------------- | ------------- | ------------------------------------------------------------------------------------------ |
+   | `value`        | `string`      | The initial content of the editor.                                                         |
+   | `forwardedRef` | `any`         | Pass this in whenever you want to control the editor's state from an external component    |
+   | `extensions`   | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+   | `editorProps`  | `EditorProps` | Extend the editor props by passing in a custom props object                                |
+
+3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods.
+
+4. UI Wrappers
+
+- `EditorContainer` - Wrap your Editor Container with this to apply base classes and styles.
+- `EditorContentWrapper` - Use this to get Editor's Content and base menus.
+
+5. Extending with Custom Styles
+
+```ts
+const customEditorClassNames = getEditorClassNames({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+});
+```
+
+## Core features
+
+- **Content Trimming**: The Editor’s content is now automatically trimmed of empty line breaks from the start and end before submitting it to the backend. This ensures cleaner, more consistent data.
+- **Value Cleaning**: The Editor’s value is cleaned at the editor core level, eliminating the need for additional validation before sending from our app. This results in cleaner code and less potential for errors.
+- **Turbo Pipeline**: Added a turbo pipeline for both dev and build tasks for projects depending on the editor package.
+
+```json
+    "web#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+    "space#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+    "web#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+    "space#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+
+```
+
+## Base extensions included
+
+- BulletList
+- OrderedList
+- Blockquote
+- Code
+- Gapcursor
+- Link
+- Image
+- Basic Marks
+  - Underline
+  - TextStyle
+  - Color
+- TaskList
+- Markdown
+- Table
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
new file mode 100644
index 000000000..ab6c77724
--- /dev/null
+++ b/packages/editor/core/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "@plane/editor-core",
+  "version": "0.0.1",
+  "description": "Core Editor that powers Plane",
+  "private": true,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@blueprintjs/popover2": "^2.0.10",
+    "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-color": "^2.1.11",
+    "@tiptap/extension-image": "^2.1.7",
+    "@tiptap/extension-link": "^2.1.7",
+    "@tiptap/extension-mention": "^2.1.12",
+    "@tiptap/extension-table": "^2.1.6",
+    "@tiptap/extension-table-cell": "^2.1.6",
+    "@tiptap/extension-table-header": "^2.1.6",
+    "@tiptap/extension-table-row": "^2.1.6",
+    "@tiptap/extension-task-item": "^2.1.7",
+    "@tiptap/extension-task-list": "^2.1.7",
+    "@tiptap/extension-text-style": "^2.1.11",
+    "@tiptap/extension-underline": "^2.1.7",
+    "@tiptap/prosemirror-tables": "^1.1.4",
+    "jsx-dom-cjs": "^8.0.3",
+    "@tiptap/pm": "^2.1.7",
+    "@tiptap/react": "^2.1.7",
+    "@tiptap/starter-kit": "^2.1.10",
+    "@tiptap/suggestion": "^2.0.4",
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "18.0.11",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^0.1.0",
+    "lucide-react": "^0.244.0",
+    "react-markdown": "^8.0.7",
+    "react-moveable": "^0.54.2",
+    "tailwind-merge": "^1.14.0",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.2",
+    "use-debounce": "^9.0.4"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}
diff --git a/packages/editor/core/postcss.config.js b/packages/editor/core/postcss.config.js
new file mode 100644
index 000000000..07aa434b2
--- /dev/null
+++ b/packages/editor/core/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/editor/core/src/index.ts b/packages/editor/core/src/index.ts
new file mode 100644
index 000000000..9c1c292b2
--- /dev/null
+++ b/packages/editor/core/src/index.ts
@@ -0,0 +1,22 @@
+// styles
+// import "./styles/tailwind.css";
+// import "./styles/editor.css";
+
+export { isCellSelection } from "./ui/extensions/table/table/utilities/is-cell-selection";
+
+// utils
+export * from "./lib/utils";
+export * from "./ui/extensions/table/table";
+export { startImageUpload } from "./ui/plugins/upload-image";
+
+// components
+export { EditorContainer } from "./ui/components/editor-container";
+export { EditorContentWrapper } from "./ui/components/editor-content";
+
+// hooks
+export { useEditor } from "./ui/hooks/useEditor";
+export { useReadOnlyEditor } from "./ui/hooks/useReadOnlyEditor";
+
+// helper items
+export * from "./ui/menus/menu-items";
+export * from "./lib/editor-commands";
diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts
new file mode 100644
index 000000000..8f9e36350
--- /dev/null
+++ b/packages/editor/core/src/lib/editor-commands.ts
@@ -0,0 +1,140 @@
+import { Editor, Range } from "@tiptap/core";
+import { UploadImage } from "../types/upload-image";
+import { startImageUpload } from "../ui/plugins/upload-image";
+
+export const toggleHeadingOne = (editor: Editor, range?: Range) => {
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 1 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 1 }).run();
+};
+
+export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 2 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 2 }).run();
+};
+
+export const toggleHeadingThree = (editor: Editor, range?: Range) => {
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 3 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 3 }).run();
+};
+
+export const toggleBold = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
+  else editor.chain().focus().toggleBold().run();
+};
+
+export const toggleItalic = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleItalic().run();
+  else editor.chain().focus().toggleItalic().run();
+};
+
+export const toggleUnderline = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleUnderline().run();
+  else editor.chain().focus().toggleUnderline().run();
+};
+
+export const toggleCode = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleCode().run();
+  else editor.chain().focus().toggleCode().run();
+};
+export const toggleOrderedList = (editor: Editor, range?: Range) => {
+  if (range)
+    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  else editor.chain().focus().toggleOrderedList().run();
+};
+
+export const toggleBulletList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
+  else editor.chain().focus().toggleBulletList().run();
+};
+
+export const toggleTaskList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
+  else editor.chain().focus().toggleTaskList().run();
+};
+
+export const toggleStrike = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
+  else editor.chain().focus().toggleStrike().run();
+};
+
+export const toggleBlockquote = (editor: Editor, range?: Range) => {
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
+};
+
+export const insertTableCommand = (editor: Editor, range?: Range) => {
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
+};
+
+export const unsetLinkEditor = (editor: Editor) => {
+  editor.chain().focus().unsetLink().run();
+};
+
+export const setLinkEditor = (editor: Editor, url: string) => {
+  editor.chain().focus().setLink({ href: url }).run();
+};
+
+export const insertImageCommand = (
+  editor: Editor,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+  range?: Range,
+) => {
+  if (range) editor.chain().focus().deleteRange(range).run();
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "image/*";
+  input.onchange = async () => {
+    if (input.files?.length) {
+      const file = input.files[0];
+      const pos = editor.view.state.selection.from;
+      startImageUpload(file, editor.view, pos, uploadFile, setIsSubmitting);
+    }
+  };
+  input.click();
+};
diff --git a/packages/editor/core/src/lib/utils.ts b/packages/editor/core/src/lib/utils.ts
new file mode 100644
index 000000000..f426b70b7
--- /dev/null
+++ b/packages/editor/core/src/lib/utils.ts
@@ -0,0 +1,50 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+interface EditorClassNames {
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+}
+
+export const getEditorClassNames = ({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+}: EditorClassNames) =>
+  cn(
+    "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
+    noBorder ? "" : "border border-custom-border-200",
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
+    customClassName,
+  );
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const findTableAncestor = (
+  node: Node | null,
+): HTMLTableElement | null => {
+  while (node !== null && node.nodeName !== "TABLE") {
+    node = node.parentNode;
+  }
+  return node as HTMLTableElement;
+};
+
+export const getTrimmedHTML = (html: string) => {
+  html = html.replace(/^(<p><\/p>)+/, "");
+  html = html.replace(/(<p><\/p>)+$/, "");
+  return html;
+};
+
+export const isValidHttpUrl = (string: string): boolean => {
+  let url: URL;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+};
diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
new file mode 100644
index 000000000..85d881eeb
--- /dev/null
+++ b/packages/editor/core/src/styles/editor.css
@@ -0,0 +1,231 @@
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: rgb(var(--color-background-100));
+  margin: 0;
+  cursor: pointer;
+  width: 1.2rem;
+  height: 1.2rem;
+  position: relative;
+  border: 2px solid rgb(var(--color-text-100));
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+
+  &:hover {
+    background-color: rgb(var(--color-background-80));
+  }
+
+  &:active {
+    background-color: rgb(var(--color-background-90));
+  }
+
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(var(--color-text-200));
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 400px !important;
+}
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none;
+  cursor: text;
+  line-height: 1.2;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.fadeIn {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fadeOut {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.img-placeholder {
+  position: relative;
+  width: 35%;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 45%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 3px solid rgba(var(--color-text-200));
+    border-top-color: rgba(var(--color-text-800));
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#editor-container {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+    border: 1px solid rgb(var(--color-border-200));
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid rgb(var(--color-border-200));
+      padding: 10px 15px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: rgb(var(--color-primary-100));
+    }
+
+    td:hover {
+      background-color: rgba(var(--color-primary-300), 0.1);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(var(--color-primary-300), 0.1);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 2px;
+      background-color: rgb(var(--color-primary-400));
+      pointer-events: none;
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * p {
+  padding: 0px 1px;
+  margin: 6px 2px;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
diff --git a/packages/editor/core/src/styles/tailwind.css b/packages/editor/core/src/styles/tailwind.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/packages/editor/core/src/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/editor/core/src/types/delete-image.ts b/packages/editor/core/src/types/delete-image.ts
new file mode 100644
index 000000000..40bfffe2f
--- /dev/null
+++ b/packages/editor/core/src/types/delete-image.ts
@@ -0,0 +1 @@
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
diff --git a/packages/editor/core/src/types/mention-suggestion.ts b/packages/editor/core/src/types/mention-suggestion.ts
new file mode 100644
index 000000000..dcaa3148d
--- /dev/null
+++ b/packages/editor/core/src/types/mention-suggestion.ts
@@ -0,0 +1,10 @@
+export type IMentionSuggestion = {
+  id: string;
+  type: string;
+  avatar: string;
+  title: string;
+  subtitle: string;
+  redirect_uri: string;
+};
+
+export type IMentionHighlight = string;
diff --git a/packages/editor/core/src/types/upload-image.ts b/packages/editor/core/src/types/upload-image.ts
new file mode 100644
index 000000000..3cf1408d2
--- /dev/null
+++ b/packages/editor/core/src/types/upload-image.ts
@@ -0,0 +1 @@
+export type UploadImage = (file: File) => Promise<string>;
diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx
new file mode 100644
index 000000000..050755f5a
--- /dev/null
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@@ -0,0 +1,24 @@
+import { Editor } from "@tiptap/react";
+import { ReactNode } from "react";
+
+interface EditorContainerProps {
+  editor: Editor | null;
+  editorClassNames: string;
+  children: ReactNode;
+}
+
+export const EditorContainer = ({
+  editor,
+  editorClassNames,
+  children,
+}: EditorContainerProps) => (
+  <div
+    id="editor-container"
+    onClick={() => {
+      editor?.chain().focus().run();
+    }}
+    className={`cursor-text ${editorClassNames}`}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx
new file mode 100644
index 000000000..830b87d9c
--- /dev/null
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@@ -0,0 +1,23 @@
+import { Editor, EditorContent } from "@tiptap/react";
+import { ReactNode } from "react";
+import { ImageResizer } from "../extensions/image/image-resize";
+
+interface EditorContentProps {
+  editor: Editor | null;
+  editorContentCustomClassNames: string | undefined;
+  children?: ReactNode;
+}
+
+export const EditorContentWrapper = ({
+  editor,
+  editorContentCustomClassNames = "",
+  children,
+}: EditorContentProps) => (
+  <div className={`contentEditor ${editorContentCustomClassNames}`}>
+    <EditorContent editor={editor} />
+    {editor?.isActive("image") && editor?.isEditable && (
+      <ImageResizer editor={editor} />
+    )}
+    {children}
+  </div>
+);
diff --git a/web/components/tiptap/extensions/image-resize.tsx b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
similarity index 87%
rename from web/components/tiptap/extensions/image-resize.tsx
rename to packages/editor/core/src/ui/extensions/image/image-resize.tsx
index 448b8811c..2545c7e44 100644
--- a/web/components/tiptap/extensions/image-resize.tsx
+++ b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
@@ -3,7 +3,9 @@ import Moveable from "react-moveable";
 
 export const ImageResizer = ({ editor }: { editor: Editor }) => {
   const updateMediaSize = () => {
-    const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+    const imageInfo = document.querySelector(
+      ".ProseMirror-selectednode",
+    ) as HTMLImageElement;
     if (imageInfo) {
       const selection = editor.state.selection;
       editor.commands.setImage({
@@ -23,8 +25,8 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         origin={false}
         edge={false}
         throttleDrag={0}
-        keepRatio={true}
-        resizable={true}
+        keepRatio
+        resizable
         throttleResize={0}
         onResize={({ target, width, height, delta }: any) => {
           delta[0] && (target!.style.width = `${width}px`);
@@ -33,7 +35,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         onResizeEnd={() => {
           updateMediaSize();
         }}
-        scalable={true}
+        scalable
         renderDirections={["w", "e"]}
         onScale={({ target, transform }: any) => {
           target!.style.transform = transform;
diff --git a/packages/editor/core/src/ui/extensions/image/index.tsx b/packages/editor/core/src/ui/extensions/image/index.tsx
new file mode 100644
index 000000000..aea84c6b8
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/index.tsx
@@ -0,0 +1,30 @@
+import Image from "@tiptap/extension-image";
+import TrackImageDeletionPlugin from "../../plugins/delete-image";
+import UploadImagesPlugin from "../../plugins/upload-image";
+import { DeleteImage } from "../../../types/delete-image";
+
+const ImageExtension = (
+  deleteImage: DeleteImage,
+  cancelUploadImage?: () => any,
+) =>
+  Image.extend({
+    addProseMirrorPlugins() {
+      return [
+        UploadImagesPlugin(cancelUploadImage),
+        TrackImageDeletionPlugin(deleteImage),
+      ];
+    },
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        height: {
+          default: null,
+        },
+      };
+    },
+  });
+
+export default ImageExtension;
diff --git a/packages/editor/core/src/ui/extensions/image/read-only-image.tsx b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx
new file mode 100644
index 000000000..73a763d04
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx
@@ -0,0 +1,17 @@
+import Image from "@tiptap/extension-image";
+
+const ReadOnlyImageExtension = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: "35%",
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+});
+
+export default ReadOnlyImageExtension;
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
new file mode 100644
index 000000000..3f191a912
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -0,0 +1,108 @@
+import StarterKit from "@tiptap/starter-kit";
+import TiptapLink from "@tiptap/extension-link";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import Gapcursor from "@tiptap/extension-gapcursor";
+
+import TableHeader from "./table/table-header/table-header";
+import Table from "./table/table";
+import TableCell from "./table/table-cell/table-cell";
+import TableRow from "./table/table-row/table-row";
+
+import ImageExtension from "./image";
+
+import { DeleteImage } from "../../types/delete-image";
+import { isValidHttpUrl } from "../../lib/utils";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+import { Mentions } from "../mentions";
+
+export const CoreEditorExtensions = (
+  mentionConfig: {
+    mentionSuggestions: IMentionSuggestion[];
+    mentionHighlights: string[];
+  },
+  deleteFile: DeleteImage,
+  cancelUploadImage?: () => any,
+) => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside leading-3 -mt-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside leading-3 -mt-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal -mb-2",
+      },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: "border-l-4 border-custom-border-300",
+      },
+    },
+    code: {
+      HTMLAttributes: {
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
+      },
+    },
+    codeBlock: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "rgba(var(--color-text-100))",
+      width: 2,
+    },
+    gapcursor: false,
+  }),
+  Gapcursor,
+  TiptapLink.configure({
+    protocols: ["http", "https"],
+    validate: (url) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  ImageExtension(deleteFile, cancelUploadImage).configure({
+    HTMLAttributes: {
+      class: "rounded-lg border border-custom-border-300",
+    },
+  }),
+  TiptapUnderline,
+  TextStyle,
+  Color,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex items-start my-4",
+    },
+    nested: true,
+  }),
+  Markdown.configure({
+    html: true,
+    transformCopiedText: true,
+  }),
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    false,
+  ),
+];
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
new file mode 100644
index 000000000..fb2183381
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-cell";
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
new file mode 100644
index 000000000..1d3e57af9
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
@@ -0,0 +1,58 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableCellOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+export default Node.create<TableCellOptions>({
+  name: "tableCell",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "paragraph+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+          return value;
+        },
+      },
+      background: {
+        default: "none",
+      },
+    };
+  },
+
+  tableRole: "cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "td" }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}`,
+      }),
+      0,
+    ];
+  },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/index.ts b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
new file mode 100644
index 000000000..cb036c505
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-header";
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
new file mode 100644
index 000000000..0148f1a6f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@@ -0,0 +1,57 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableHeaderOptions {
+  HTMLAttributes: Record<string, any>;
+}
+export default Node.create<TableHeaderOptions>({
+  name: "tableHeader",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "paragraph+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+          return value;
+        },
+      },
+      background: {
+        default: "rgb(var(--color-primary-100))",
+      },
+    };
+  },
+
+  tableRole: "header_cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "th" }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "th",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}`,
+      }),
+      0,
+    ];
+  },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/index.ts b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
new file mode 100644
index 000000000..8c6eb55aa
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-row";
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
new file mode 100644
index 000000000..1b576623b
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
@@ -0,0 +1,31 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableRowOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+export default Node.create<TableRowOptions>({
+  name: "tableRow",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "(tableCell | tableHeader)*",
+
+  tableRole: "row",
+
+  parseHTML() {
+    return [{ tag: "tr" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "tr",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts
new file mode 100644
index 000000000..eda520759
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -0,0 +1,55 @@
+const icons = {
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
+  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
+  insertLeftTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+      >
+    <path
+      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertRightTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertTopTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertBottomTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+};
+
+export default icons;
diff --git a/packages/editor/core/src/ui/extensions/table/table/index.ts b/packages/editor/core/src/ui/extensions/table/table/index.ts
new file mode 100644
index 000000000..ac51d0e2c
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table";
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
new file mode 100644
index 000000000..efaf84970
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
@@ -0,0 +1,122 @@
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { findParentNode } from "@tiptap/core";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+
+const key = new PluginKey("tableControls");
+
+export function tableControls() {
+  return new Plugin({
+    key,
+    state: {
+      init() {
+        return new TableControlsState();
+      },
+      apply(tr, prev) {
+        return prev.apply(tr);
+      },
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          const pluginState = key.getState(view.state);
+
+          if (
+            !(event.target as HTMLElement).closest(".tableWrapper") &&
+            pluginState.values.hoveredTable
+          ) {
+            return view.dispatch(
+              view.state.tr.setMeta(key, {
+                setHoveredTable: null,
+                setHoveredCell: null,
+              }),
+            );
+          }
+
+          const pos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          });
+
+          if (!pos) return;
+
+          const table = findParentNode((node) => node.type.name === "table")(
+            TextSelection.create(view.state.doc, pos.pos),
+          );
+          const cell = findParentNode(
+            (node) =>
+              node.type.name === "tableCell" ||
+              node.type.name === "tableHeader",
+          )(TextSelection.create(view.state.doc, pos.pos));
+
+          if (!table || !cell) return;
+
+          if (pluginState.values.hoveredCell?.pos !== cell.pos) {
+            return view.dispatch(
+              view.state.tr.setMeta(key, {
+                setHoveredTable: table,
+                setHoveredCell: cell,
+              }),
+            );
+          }
+        },
+      },
+      decorations: (state) => {
+        const pluginState = key.getState(state);
+        if (!pluginState) {
+          return null;
+        }
+
+        const { hoveredTable, hoveredCell } = pluginState.values;
+        const docSize = state.doc.content.size;
+        if (
+          hoveredTable &&
+          hoveredCell &&
+          hoveredTable.pos < docSize &&
+          hoveredCell.pos < docSize
+        ) {
+          const decorations = [
+            Decoration.node(
+              hoveredTable.pos,
+              hoveredTable.pos + hoveredTable.node.nodeSize,
+              {},
+              {
+                hoveredTable,
+                hoveredCell,
+              },
+            ),
+          ];
+
+          return DecorationSet.create(state.doc, decorations);
+        }
+
+        return null;
+      },
+    },
+  });
+}
+
+class TableControlsState {
+  values;
+
+  constructor(props = {}) {
+    this.values = {
+      hoveredTable: null,
+      hoveredCell: null,
+      ...props,
+    };
+  }
+
+  apply(tr: any) {
+    const actions = tr.getMeta(key);
+
+    if (actions?.setHoveredTable !== undefined) {
+      this.values.hoveredTable = actions.setHoveredTable;
+    }
+
+    if (actions?.setHoveredCell !== undefined) {
+      this.values.hoveredCell = actions.setHoveredCell;
+    }
+
+    return this;
+  }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
new file mode 100644
index 000000000..7f72a212e
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -0,0 +1,536 @@
+import { h } from "jsx-dom-cjs";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Decoration, NodeView } from "@tiptap/pm/view";
+import tippy, { Instance, Props } from "tippy.js";
+
+import { Editor } from "@tiptap/core";
+import {
+  CellSelection,
+  TableMap,
+  updateColumnsOnResize,
+} from "@tiptap/prosemirror-tables";
+
+import icons from "./icons";
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: HTMLElement,
+  table: HTMLElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: any,
+) {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild as HTMLElement;
+  const row = node.firstChild;
+
+  if (!row) return;
+
+  for (let i = 0, col = 0; i < row.childCount; i += 1) {
+    const { colspan, colwidth } = row.child(i).attrs;
+
+    for (let j = 0; j < colspan; j += 1, col += 1) {
+      const hasWidth =
+        overrideCol === col ? overrideValue : colwidth && colwidth[j];
+      const cssWidth = hasWidth ? `${hasWidth}px` : "";
+
+      totalWidth += hasWidth || cellMinWidth;
+
+      if (!hasWidth) {
+        fixedWidth = false;
+      }
+
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement("col")).style.width =
+          cssWidth;
+      } else {
+        if (nextDOM.style.width !== cssWidth) {
+          nextDOM.style.width = cssWidth;
+        }
+
+        nextDOM = nextDOM.nextSibling as HTMLElement;
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+
+    nextDOM.parentNode?.removeChild(nextDOM);
+    nextDOM = after as HTMLElement;
+  }
+
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`;
+    table.style.minWidth = "";
+  } else {
+    table.style.width = "";
+    table.style.minWidth = `${totalWidth}px`;
+  }
+}
+
+const defaultTippyOptions: Partial<Props> = {
+  allowHTML: true,
+  arrow: false,
+  trigger: "click",
+  animation: "scale-subtle",
+  theme: "light-border no-padding",
+  interactive: true,
+  hideOnClick: true,
+  placement: "right",
+};
+
+function setCellsBackgroundColor(editor: Editor, backgroundColor) {
+  return editor
+    .chain()
+    .focus()
+    .updateAttributes("tableCell", {
+      background: backgroundColor,
+    })
+    .updateAttributes("tableHeader", {
+      background: backgroundColor,
+    })
+    .run();
+}
+
+const columnsToolboxItems = [
+  {
+    label: "Add Column Before",
+    icon: icons.insertLeftTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnBefore().run(),
+  },
+  {
+    label: "Add Column After",
+    icon: icons.insertRightTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnAfter().run(),
+  },
+  {
+    label: "Pick Column Color",
+    icon: icons.colorPicker,
+    action: ({
+      editor,
+      triggerButton,
+      controlsContainer,
+    }: {
+      editor: Editor;
+      triggerButton: HTMLElement;
+      controlsContainer;
+    }) => {
+      createColorPickerToolbox({
+        triggerButton,
+        tippyOptions: {
+          appendTo: controlsContainer,
+        },
+        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+      });
+    },
+  },
+  {
+    label: "Delete Column",
+    icon: icons.deleteColumn,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteColumn().run(),
+  },
+];
+
+const rowsToolboxItems = [
+  {
+    label: "Add Row Above",
+    icon: icons.insertTopTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowBefore().run(),
+  },
+  {
+    label: "Add Row Below",
+    icon: icons.insertBottomTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowAfter().run(),
+  },
+  {
+    label: "Pick Row Color",
+    icon: icons.colorPicker,
+    action: ({
+      editor,
+      triggerButton,
+      controlsContainer,
+    }: {
+      editor: Editor;
+      triggerButton: HTMLButtonElement;
+      controlsContainer:
+        | Element
+        | "parent"
+        | ((ref: Element) => Element)
+        | undefined;
+    }) => {
+      createColorPickerToolbox({
+        triggerButton,
+        tippyOptions: {
+          appendTo: controlsContainer,
+        },
+        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+      });
+    },
+  },
+  {
+    label: "Delete Row",
+    icon: icons.deleteRow,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteRow().run(),
+  },
+];
+
+function createToolbox({
+  triggerButton,
+  items,
+  tippyOptions,
+  onClickItem,
+}: {
+  triggerButton: HTMLElement;
+  items: { icon: string; label: string }[];
+  tippyOptions: any;
+  onClickItem: any;
+}): Instance<Props> {
+  const toolbox = tippy(triggerButton, {
+    content: h(
+      "div",
+      { className: "tableToolbox" },
+      items.map((item) =>
+        h(
+          "div",
+          {
+            className: "toolboxItem",
+            itemType: "button",
+            onClick() {
+              onClickItem(item);
+            },
+          },
+          [
+            h("div", {
+              className: "iconContainer",
+              innerHTML: item.icon,
+            }),
+            h("div", { className: "label" }, item.label),
+          ],
+        ),
+      ),
+    ),
+    ...tippyOptions,
+  });
+
+  return Array.isArray(toolbox) ? toolbox[0] : toolbox;
+}
+
+function createColorPickerToolbox({
+  triggerButton,
+  tippyOptions,
+  onSelectColor = () => {},
+}: {
+  triggerButton: HTMLElement;
+  tippyOptions: Partial<Props>;
+  onSelectColor?: (color: string) => void;
+}) {
+  const items = {
+    Default: "rgb(var(--color-primary-100))",
+    Orange: "#FFE5D1",
+    Grey: "#F1F1F1",
+    Yellow: "#FEF3C7",
+    Green: "#DCFCE7",
+    Red: "#FFDDDD",
+    Blue: "#D9E4FF",
+    Pink: "#FFE8FA",
+    Purple: "#E8DAFB",
+  };
+
+  const colorPicker = tippy(triggerButton, {
+    ...defaultTippyOptions,
+    content: h(
+      "div",
+      { className: "tableColorPickerToolbox" },
+      Object.entries(items).map(([key, value]) =>
+        h(
+          "div",
+          {
+            className: "toolboxItem",
+            itemType: "button",
+            onClick: () => {
+              onSelectColor(value);
+              colorPicker.hide();
+            },
+          },
+          [
+            h("div", {
+              className: "colorContainer",
+              style: {
+                backgroundColor: value,
+              },
+            }),
+            h(
+              "div",
+              {
+                className: "label",
+              },
+              key,
+            ),
+          ],
+        ),
+      ),
+    ),
+    onHidden: (instance) => {
+      instance.destroy();
+    },
+    showOnCreate: true,
+    ...tippyOptions,
+  });
+
+  return colorPicker;
+}
+
+export class TableView implements NodeView {
+  node: ProseMirrorNode;
+  cellMinWidth: number;
+  decorations: Decoration[];
+  editor: Editor;
+  getPos: () => number;
+  hoveredCell;
+  map: TableMap;
+  root: HTMLElement;
+  table: HTMLElement;
+  colgroup: HTMLElement;
+  tbody: HTMLElement;
+  rowsControl?: HTMLElement;
+  columnsControl?: HTMLElement;
+  columnsToolbox?: Instance<Props>;
+  rowsToolbox?: Instance<Props>;
+  controls?: HTMLElement;
+
+  get dom() {
+    return this.root;
+  }
+
+  get contentDOM() {
+    return this.tbody;
+  }
+
+  constructor(
+    node: ProseMirrorNode,
+    cellMinWidth: number,
+    decorations: Decoration[],
+    editor: Editor,
+    getPos: () => number,
+  ) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.decorations = decorations;
+    this.editor = editor;
+    this.getPos = getPos;
+    this.hoveredCell = null;
+    this.map = TableMap.get(node);
+
+    if (editor.isEditable) {
+      this.rowsControl = h(
+        "div",
+        { className: "rowsControl" },
+        h("div", {
+          itemType: "button",
+          className: "rowsControlDiv",
+          onClick: () => this.selectRow(),
+        }),
+      );
+
+      this.columnsControl = h(
+        "div",
+        { className: "columnsControl" },
+        h("div", {
+          itemType: "button",
+          className: "columnsControlDiv",
+          onClick: () => this.selectColumn(),
+        }),
+      );
+
+      this.controls = h(
+        "div",
+        { className: "tableControls", contentEditable: "false" },
+        this.rowsControl,
+        this.columnsControl,
+      );
+
+      this.columnsToolbox = createToolbox({
+        triggerButton: this.columnsControl.querySelector(".columnsControlDiv"),
+        items: columnsToolboxItems,
+        tippyOptions: {
+          ...defaultTippyOptions,
+          appendTo: this.controls,
+        },
+        onClickItem: (item) => {
+          item.action({
+            editor: this.editor,
+            triggerButton: this.columnsControl?.firstElementChild,
+            controlsContainer: this.controls,
+          });
+          this.columnsToolbox?.hide();
+        },
+      });
+
+      this.rowsToolbox = createToolbox({
+        triggerButton: this.rowsControl.firstElementChild,
+        items: rowsToolboxItems,
+        tippyOptions: {
+          ...defaultTippyOptions,
+          appendTo: this.controls,
+        },
+        onClickItem: (item) => {
+          item.action({
+            editor: this.editor,
+            triggerButton: this.rowsControl?.firstElementChild,
+            controlsContainer: this.controls,
+          });
+          this.rowsToolbox?.hide();
+        },
+      });
+    }
+
+    // Table
+
+    this.colgroup = h(
+      "colgroup",
+      null,
+      Array.from({ length: this.map.width }, () => 1).map(() => h("col")),
+    );
+    this.tbody = h("tbody");
+    this.table = h("table", null, this.colgroup, this.tbody);
+
+    this.root = h(
+      "div",
+      {
+        className: "tableWrapper controls--disabled",
+      },
+      this.controls,
+      this.table,
+    );
+
+    this.render();
+  }
+
+  update(node: ProseMirrorNode, decorations) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+
+    this.node = node;
+    this.decorations = decorations;
+    this.map = TableMap.get(this.node);
+
+    if (this.editor.isEditable) {
+      this.updateControls();
+    }
+
+    this.render();
+
+    return true;
+  }
+
+  render() {
+    if (this.colgroup.children.length !== this.map.width) {
+      const cols = Array.from({ length: this.map.width }, () => 1).map(() =>
+        h("col"),
+      );
+      this.colgroup.replaceChildren(...cols);
+    }
+
+    updateColumnsOnResize(
+      this.node,
+      this.colgroup,
+      this.table,
+      this.cellMinWidth,
+    );
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  updateControls() {
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(
+      this.decorations,
+    ).reduce(
+      (acc, curr) => {
+        if (curr.spec.hoveredCell !== undefined) {
+          acc["hoveredCell"] = curr.spec.hoveredCell;
+        }
+
+        if (curr.spec.hoveredTable !== undefined) {
+          acc["hoveredTable"] = curr.spec.hoveredTable;
+        }
+        return acc;
+      },
+      {} as Record<string, HTMLElement>,
+    ) as any;
+
+    if (table === undefined || cell === undefined) {
+      return this.root.classList.add("controls--disabled");
+    }
+
+    this.root.classList.remove("controls--disabled");
+    this.hoveredCell = cell;
+
+    const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
+
+    const tableRect = this.table.getBoundingClientRect();
+    const cellRect = cellDom.getBoundingClientRect();
+
+    this.columnsControl.style.left = `${
+      cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft
+    }px`;
+    this.columnsControl.style.width = `${cellRect.width}px`;
+
+    this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+    this.rowsControl.style.height = `${cellRect.height}px`;
+  }
+
+  selectColumn() {
+    if (!this.hoveredCell) return;
+
+    const colIndex = this.map.colCount(
+      this.hoveredCell.pos - (this.getPos() + 1),
+    );
+    const anchorCellPos = this.hoveredCell.pos;
+    const headCellPos =
+      this.map.map[colIndex + this.map.width * (this.map.height - 1)] +
+      (this.getPos() + 1);
+
+    const cellSelection = CellSelection.create(
+      this.editor.view.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
+    this.editor.view.dispatch(
+      // @ts-ignore
+      this.editor.state.tr.setSelection(cellSelection),
+    );
+  }
+
+  selectRow() {
+    if (!this.hoveredCell) return;
+
+    const anchorCellPos = this.hoveredCell.pos;
+    const anchorCellIndex = this.map.map.indexOf(
+      anchorCellPos - (this.getPos() + 1),
+    );
+    const headCellPos =
+      this.map.map[anchorCellIndex + (this.map.width - 1)] +
+      (this.getPos() + 1);
+
+    const cellSelection = CellSelection.create(
+      this.editor.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
+    this.editor.view.dispatch(
+      // @ts-ignore
+      this.editor.view.state.tr.setSelection(cellSelection),
+    );
+  }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts
new file mode 100644
index 000000000..8571fdfba
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@@ -0,0 +1,312 @@
+import { TextSelection } from "@tiptap/pm/state";
+
+import {
+  callOrReturn,
+  getExtensionField,
+  mergeAttributes,
+  Node,
+  ParentConfig,
+} from "@tiptap/core";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  CellSelection,
+  columnResizing,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  fixTables,
+  goToNextCell,
+  mergeCells,
+  setCellAttr,
+  splitCell,
+  tableEditing,
+  toggleHeader,
+  toggleHeaderCell,
+} from "@tiptap/prosemirror-tables";
+
+import { tableControls } from "./table-controls";
+import { TableView } from "./table-view";
+import { createTable } from "./utilities/create-table";
+import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected";
+
+export interface TableOptions {
+  HTMLAttributes: Record<string, any>;
+  resizable: boolean;
+  handleWidth: number;
+  cellMinWidth: number;
+  lastColumnResizable: boolean;
+  allowTableNodeSelection: boolean;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    table: {
+      insertTable: (options?: {
+        rows?: number;
+        cols?: number;
+        withHeaderRow?: boolean;
+      }) => ReturnType;
+      addColumnBefore: () => ReturnType;
+      addColumnAfter: () => ReturnType;
+      deleteColumn: () => ReturnType;
+      addRowBefore: () => ReturnType;
+      addRowAfter: () => ReturnType;
+      deleteRow: () => ReturnType;
+      deleteTable: () => ReturnType;
+      mergeCells: () => ReturnType;
+      splitCell: () => ReturnType;
+      toggleHeaderColumn: () => ReturnType;
+      toggleHeaderRow: () => ReturnType;
+      toggleHeaderCell: () => ReturnType;
+      mergeOrSplit: () => ReturnType;
+      setCellAttribute: (name: string, value: any) => ReturnType;
+      goToNextCell: () => ReturnType;
+      goToPreviousCell: () => ReturnType;
+      fixTables: () => ReturnType;
+      setCellSelection: (position: {
+        anchorCell: number;
+        headCell?: number;
+      }) => ReturnType;
+    };
+  }
+
+  interface NodeConfig<Options, Storage> {
+    tableRole?:
+      | string
+      | ((this: {
+          name: string;
+          options: Options;
+          storage: Storage;
+          parent: ParentConfig<NodeConfig<Options>>["tableRole"];
+        }) => string);
+  }
+}
+
+export default Node.create({
+  name: "table",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      resizable: true,
+      handleWidth: 5,
+      cellMinWidth: 100,
+      lastColumnResizable: true,
+      allowTableNodeSelection: true,
+    };
+  },
+
+  content: "tableRow+",
+
+  tableRole: "table",
+
+  isolating: true,
+
+  group: "block",
+
+  allowGapCursor: false,
+
+  parseHTML() {
+    return [{ tag: "table" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "table",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      ["tbody", 0],
+    ];
+  },
+
+  addCommands() {
+    return {
+      insertTable:
+        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+        ({ tr, dispatch, editor }) => {
+          const node = createTable(editor.schema, rows, cols, withHeaderRow);
+
+          if (dispatch) {
+            const offset = tr.selection.anchor + 1;
+
+            tr.replaceSelectionWith(node)
+              .scrollIntoView()
+              .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+          }
+
+          return true;
+        },
+      addColumnBefore:
+        () =>
+        ({ state, dispatch }) =>
+          addColumnBefore(state, dispatch),
+      addColumnAfter:
+        () =>
+        ({ state, dispatch }) =>
+          addColumnAfter(state, dispatch),
+      deleteColumn:
+        () =>
+        ({ state, dispatch }) =>
+          deleteColumn(state, dispatch),
+      addRowBefore:
+        () =>
+        ({ state, dispatch }) =>
+          addRowBefore(state, dispatch),
+      addRowAfter:
+        () =>
+        ({ state, dispatch }) =>
+          addRowAfter(state, dispatch),
+      deleteRow:
+        () =>
+        ({ state, dispatch }) =>
+          deleteRow(state, dispatch),
+      deleteTable:
+        () =>
+        ({ state, dispatch }) =>
+          deleteTable(state, dispatch),
+      mergeCells:
+        () =>
+        ({ state, dispatch }) =>
+          mergeCells(state, dispatch),
+      splitCell:
+        () =>
+        ({ state, dispatch }) =>
+          splitCell(state, dispatch),
+      toggleHeaderColumn:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeader("column")(state, dispatch),
+      toggleHeaderRow:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeader("row")(state, dispatch),
+      toggleHeaderCell:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeaderCell(state, dispatch),
+      mergeOrSplit:
+        () =>
+        ({ state, dispatch }) => {
+          if (mergeCells(state, dispatch)) {
+            return true;
+          }
+
+          return splitCell(state, dispatch);
+        },
+      setCellAttribute:
+        (name, value) =>
+        ({ state, dispatch }) =>
+          setCellAttr(name, value)(state, dispatch),
+      goToNextCell:
+        () =>
+        ({ state, dispatch }) =>
+          goToNextCell(1)(state, dispatch),
+      goToPreviousCell:
+        () =>
+        ({ state, dispatch }) =>
+          goToNextCell(-1)(state, dispatch),
+      fixTables:
+        () =>
+        ({ state, dispatch }) => {
+          if (dispatch) {
+            fixTables(state);
+          }
+
+          return true;
+        },
+      setCellSelection:
+        (position) =>
+        ({ tr, dispatch }) => {
+          if (dispatch) {
+            const selection = CellSelection.create(
+              tr.doc,
+              position.anchorCell,
+              position.headCell,
+            );
+
+            // @ts-ignore
+            tr.setSelection(selection);
+          }
+
+          return true;
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        if (this.editor.commands.goToNextCell()) {
+          return true;
+        }
+
+        if (!this.editor.can().addRowAfter()) {
+          return false;
+        }
+
+        return this.editor.chain().addRowAfter().goToNextCell().run();
+      },
+      "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+      Backspace: deleteTableWhenAllCellsSelected,
+      "Mod-Backspace": deleteTableWhenAllCellsSelected,
+      Delete: deleteTableWhenAllCellsSelected,
+      "Mod-Delete": deleteTableWhenAllCellsSelected,
+    };
+  },
+
+  addNodeView() {
+    return ({ editor, getPos, node, decorations }) => {
+      const { cellMinWidth } = this.options;
+
+      return new TableView(
+        node,
+        cellMinWidth,
+        decorations,
+        editor,
+        getPos as () => number,
+      );
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+
+    const plugins = [
+      tableEditing({
+        allowTableNodeSelection: this.options.allowTableNodeSelection,
+      }),
+      tableControls(),
+    ];
+
+    if (isResizable) {
+      plugins.unshift(
+        columnResizing({
+          handleWidth: this.options.handleWidth,
+          cellMinWidth: this.options.cellMinWidth,
+          // View: TableView,
+
+          // @ts-ignore
+          lastColumnResizable: this.options.lastColumnResizable,
+        }),
+      );
+    }
+
+    return plugins;
+  },
+
+  extendNodeSchema(extension) {
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage,
+    };
+
+    return {
+      tableRole: callOrReturn(
+        getExtensionField(extension, "tableRole", context),
+      ),
+    };
+  },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
new file mode 100644
index 000000000..7811341e0
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
@@ -0,0 +1,12 @@
+import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
+
+export function createCell(
+  cellType: NodeType,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+): ProsemirrorNode | null | undefined {
+  if (cellContent) {
+    return cellType.createChecked(null, cellContent);
+  }
+
+  return cellType.createAndFill();
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
new file mode 100644
index 000000000..5805ecf86
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
@@ -0,0 +1,45 @@
+import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
+
+import { createCell } from "./create-cell";
+import { getTableNodeTypes } from "./get-table-node-types";
+
+export function createTable(
+  schema: Schema,
+  rowsCount: number,
+  colsCount: number,
+  withHeaderRow: boolean,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+): ProsemirrorNode {
+  const types = getTableNodeTypes(schema);
+  const headerCells: ProsemirrorNode[] = [];
+  const cells: ProsemirrorNode[] = [];
+
+  for (let index = 0; index < colsCount; index += 1) {
+    const cell = createCell(types.cell, cellContent);
+
+    if (cell) {
+      cells.push(cell);
+    }
+
+    if (withHeaderRow) {
+      const headerCell = createCell(types.header_cell, cellContent);
+
+      if (headerCell) {
+        headerCells.push(headerCell);
+      }
+    }
+  }
+
+  const rows: ProsemirrorNode[] = [];
+
+  for (let index = 0; index < rowsCount; index += 1) {
+    rows.push(
+      types.row.createChecked(
+        null,
+        withHeaderRow && index === 0 ? headerCells : cells,
+      ),
+    );
+  }
+
+  return types.table.createChecked(null, rows);
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
new file mode 100644
index 000000000..7fed53705
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
@@ -0,0 +1,42 @@
+import {
+  findParentNodeClosestToPos,
+  KeyboardShortcutCommand,
+} from "@tiptap/core";
+
+import { isCellSelection } from "./is-cell-selection";
+
+export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
+  editor,
+}) => {
+  const { selection } = editor.state;
+
+  if (!isCellSelection(selection)) {
+    return false;
+  }
+
+  let cellCount = 0;
+  const table = findParentNodeClosestToPos(
+    selection.ranges[0].$from,
+    (node) => node.type.name === "table",
+  );
+
+  table?.node.descendants((node) => {
+    if (node.type.name === "table") {
+      return false;
+    }
+
+    if (["tableCell", "tableHeader"].includes(node.type.name)) {
+      cellCount += 1;
+    }
+  });
+
+  const allCellsSelected = cellCount === selection.ranges.length;
+
+  if (!allCellsSelected) {
+    return false;
+  }
+
+  editor.commands.deleteTable();
+
+  return true;
+};
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
new file mode 100644
index 000000000..28c322a1f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
@@ -0,0 +1,21 @@
+import { NodeType, Schema } from "prosemirror-model";
+
+export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
+  if (schema.cached.tableNodeTypes) {
+    return schema.cached.tableNodeTypes;
+  }
+
+  const roles: { [key: string]: NodeType } = {};
+
+  Object.keys(schema.nodes).forEach((type) => {
+    const nodeType = schema.nodes[type];
+
+    if (nodeType.spec.tableRole) {
+      roles[nodeType.spec.tableRole] = nodeType;
+    }
+  });
+
+  schema.cached.tableNodeTypes = roles;
+
+  return roles;
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
new file mode 100644
index 000000000..28917a299
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
@@ -0,0 +1,5 @@
+import { CellSelection } from "@tiptap/prosemirror-tables";
+
+export function isCellSelection(value: unknown): value is CellSelection {
+  return value instanceof CellSelection;
+}
diff --git a/packages/editor/core/src/ui/hooks/useEditor.tsx b/packages/editor/core/src/ui/hooks/useEditor.tsx
new file mode 100644
index 000000000..258da8652
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@@ -0,0 +1,97 @@
+import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
+import {
+  useImperativeHandle,
+  useRef,
+  MutableRefObject,
+  useEffect,
+} from "react";
+import { DeleteImage } from "../../types/delete-image";
+import { CoreEditorProps } from "../props";
+import { CoreEditorExtensions } from "../extensions";
+import { EditorProps } from "@tiptap/pm/view";
+import { getTrimmedHTML } from "../../lib/utils";
+import { UploadImage } from "../../types/upload-image";
+import { useInitializedContent } from "./useInitializedContent";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+interface CustomEditorProps {
+  uploadFile: UploadImage;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  value: string;
+  deleteFile: DeleteImage;
+  debouncedUpdatesEnabled?: boolean;
+  onChange?: (json: any, html: string) => void;
+  extensions?: any;
+  editorProps?: EditorProps;
+  forwardedRef?: any;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+  cancelUploadImage?: () => any;
+}
+
+export const useEditor = ({
+  uploadFile,
+  deleteFile,
+  cancelUploadImage,
+  editorProps = {},
+  value,
+  extensions = [],
+  onChange,
+  setIsSubmitting,
+  forwardedRef,
+  setShouldShowAlert,
+  mentionHighlights,
+  mentionSuggestions,
+}: CustomEditorProps) => {
+  const editor = useCustomEditor(
+    {
+      editorProps: {
+        ...CoreEditorProps(uploadFile, setIsSubmitting),
+        ...editorProps,
+      },
+      extensions: [
+        ...CoreEditorExtensions(
+          {
+            mentionSuggestions: mentionSuggestions ?? [],
+            mentionHighlights: mentionHighlights ?? [],
+          },
+          deleteFile,
+          cancelUploadImage,
+        ),
+        ...extensions,
+      ],
+      content:
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      onUpdate: async ({ editor }) => {
+        // for instant feedback loop
+        setIsSubmitting?.("submitting");
+        setShouldShowAlert?.(true);
+        onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
+      },
+    },
+    [],
+  );
+
+  useInitializedContent(editor, value);
+
+  const editorRef: MutableRefObject<Editor | null> = useRef(null);
+  editorRef.current = editor;
+
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      editorRef.current?.commands.clearContent();
+    },
+    setEditorValue: (content: string) => {
+      editorRef.current?.commands.setContent(content);
+    },
+  }));
+
+  if (!editor) {
+    return null;
+  }
+
+  return editor;
+};
diff --git a/packages/editor/core/src/ui/hooks/useInitializedContent.tsx b/packages/editor/core/src/ui/hooks/useInitializedContent.tsx
new file mode 100644
index 000000000..8e2ce1717
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useInitializedContent.tsx
@@ -0,0 +1,19 @@
+import { Editor } from "@tiptap/react";
+import { useEffect, useRef } from "react";
+
+export const useInitializedContent = (editor: Editor | null, value: string) => {
+  const hasInitializedContent = useRef(false);
+
+  useEffect(() => {
+    if (editor) {
+      const cleanedValue =
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>";
+      if (cleanedValue !== "<p></p>" && !hasInitializedContent.current) {
+        editor.commands.setContent(cleanedValue);
+        hasInitializedContent.current = true;
+      } else if (cleanedValue === "<p></p>" && hasInitializedContent.current) {
+        hasInitializedContent.current = false;
+      }
+    }
+  }, [value, editor]);
+};
diff --git a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
new file mode 100644
index 000000000..75ebddd3c
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
@@ -0,0 +1,72 @@
+import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
+import {
+  useImperativeHandle,
+  useRef,
+  MutableRefObject,
+  useEffect,
+} from "react";
+import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
+import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
+import { EditorProps } from "@tiptap/pm/view";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+interface CustomReadOnlyEditorProps {
+  value: string;
+  forwardedRef?: any;
+  extensions?: any;
+  editorProps?: EditorProps;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+}
+
+export const useReadOnlyEditor = ({
+  value,
+  forwardedRef,
+  extensions = [],
+  editorProps = {},
+  mentionHighlights,
+  mentionSuggestions,
+}: CustomReadOnlyEditorProps) => {
+  const editor = useCustomEditor({
+    editable: false,
+    content:
+      typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+    editorProps: {
+      ...CoreReadOnlyEditorProps,
+      ...editorProps,
+    },
+    extensions: [
+      ...CoreReadOnlyEditorExtensions({
+        mentionSuggestions: mentionSuggestions ?? [],
+        mentionHighlights: mentionHighlights ?? [],
+      }),
+      ...extensions,
+    ],
+  });
+
+  const hasIntiliazedContent = useRef(false);
+  useEffect(() => {
+    if (editor && !value && !hasIntiliazedContent.current) {
+      editor.commands.setContent(value);
+      hasIntiliazedContent.current = true;
+    }
+  }, [value]);
+
+  const editorRef: MutableRefObject<Editor | null> = useRef(null);
+  editorRef.current = editor;
+
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      editorRef.current?.commands.clearContent();
+    },
+    setEditorValue: (content: string) => {
+      editorRef.current?.commands.setContent(content);
+    },
+  }));
+
+  if (!editor) {
+    return null;
+  }
+
+  return editor;
+};
diff --git a/packages/editor/core/src/ui/index.tsx b/packages/editor/core/src/ui/index.tsx
new file mode 100644
index 000000000..a314a2650
--- /dev/null
+++ b/packages/editor/core/src/ui/index.tsx
@@ -0,0 +1,103 @@
+"use client";
+import * as React from "react";
+import { Extension } from "@tiptap/react";
+import { UploadImage } from "../types/upload-image";
+import { DeleteImage } from "../types/delete-image";
+import { getEditorClassNames } from "../lib/utils";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor } from "./hooks/useEditor";
+import { EditorContainer } from "../ui/components/editor-container";
+import { EditorContentWrapper } from "../ui/components/editor-content";
+import { IMentionSuggestion } from "../types/mention-suggestion";
+
+interface ICoreEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  editable?: boolean;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  accessValue: string;
+  onAccessChange: (accessKey: string) => void;
+  commentAccess: {
+    icon: string;
+    key: string;
+    label: "Private" | "Public";
+  }[];
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+  extensions?: Extension[];
+  editorProps?: EditorProps;
+}
+
+interface EditorCoreProps extends ICoreEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const CoreEditor = ({
+  onChange,
+  debouncedUpdatesEnabled,
+  editable,
+  setIsSubmitting,
+  setShouldShowAlert,
+  editorContentCustomClassNames,
+  value,
+  uploadFile,
+  deleteFile,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  forwardedRef,
+}: EditorCoreProps) => {
+  const editor = useEditor({
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    deleteFile,
+    forwardedRef,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>(
+  (props, ref) => <CoreEditor {...props} forwardedRef={ref} />,
+);
+
+CoreEditorWithRef.displayName = "CoreEditorWithRef";
+
+export { CoreEditor, CoreEditorWithRef };
diff --git a/packages/editor/core/src/ui/mentions/MentionList.tsx b/packages/editor/core/src/ui/mentions/MentionList.tsx
new file mode 100644
index 000000000..48aebaa11
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/MentionList.tsx
@@ -0,0 +1,120 @@
+import { Editor } from "@tiptap/react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+interface MentionListProps {
+  items: IMentionSuggestion[];
+  command: (item: {
+    id: string;
+    label: string;
+    target: string;
+    redirect_uri: string;
+  }) => void;
+  editor: Editor;
+}
+
+// eslint-disable-next-line react/display-name
+const MentionList = forwardRef((props: MentionListProps, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = (index: number) => {
+    const item = props.items[index];
+
+    if (item) {
+      props.command({
+        id: item.id,
+        label: item.title,
+        target: "users",
+        redirect_uri: item.redirect_uri,
+      });
+    }
+  };
+
+  const upHandler = () => {
+    setSelectedIndex(
+      (selectedIndex + props.items.length - 1) % props.items.length,
+    );
+  };
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [props.items]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (event.key === "ArrowUp") {
+        upHandler();
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        downHandler();
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        enterHandler();
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return props.items && props.items.length !== 0 ? (
+    <div className="mentions absolute max-h-40 bg-custom-background-100 rounded-md shadow-custom-shadow-sm text-custom-text-300 text-sm overflow-y-auto w-48 p-1 space-y-0.5">
+      {props.items.length ? (
+        props.items.map((item, index) => (
+          <div
+            key={item.id}
+            className={`flex items-center gap-2 rounded p-1 hover:bg-custom-background-80 cursor-pointer ${
+              index === selectedIndex ? "bg-custom-background-80" : ""
+            }`}
+            onClick={() => selectItem(index)}
+          >
+            <div className="flex-shrink-0 h-4 w-4 grid place-items-center overflow-hidden">
+              {item.avatar && item.avatar.trim() !== "" ? (
+                <img
+                  src={item.avatar}
+                  className="h-full w-full object-cover rounded-sm"
+                  alt={item.title}
+                />
+              ) : (
+                <div className="h-full w-full grid place-items-center text-xs capitalize text-white rounded-sm bg-gray-700">
+                  {item.title[0]}
+                </div>
+              )}
+            </div>
+            <div className="flex-grow space-y-1 truncate">
+              <p className="text-sm font-medium truncate">{item.title}</p>
+              {/* <p className="text-xs text-gray-400">{item.subtitle}</p> */}
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="item">No result</div>
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+});
+
+MentionList.displayName = "MentionList";
+
+export default MentionList;
diff --git a/packages/editor/core/src/ui/mentions/custom.tsx b/packages/editor/core/src/ui/mentions/custom.tsx
new file mode 100644
index 000000000..dc4ab5aad
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/custom.tsx
@@ -0,0 +1,57 @@
+import { Mention, MentionOptions } from "@tiptap/extension-mention";
+import { mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import mentionNodeView from "./mentionNodeView";
+import { IMentionHighlight } from "../../types/mention-suggestion";
+export interface CustomMentionOptions extends MentionOptions {
+  mentionHighlights: IMentionHighlight[];
+  readonly?: boolean;
+}
+
+export const CustomMention = Mention.extend<CustomMentionOptions>({
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+      },
+      label: {
+        default: null,
+      },
+      target: {
+        default: null,
+      },
+      self: {
+        default: false,
+      },
+      redirect_uri: {
+        default: "/",
+      },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(mentionNodeView);
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "mention-component",
+        getAttrs: (node: string | HTMLElement) => {
+          if (typeof node === "string") {
+            return null;
+          }
+          return {
+            id: node.getAttribute("data-mention-id") || "",
+            target: node.getAttribute("data-mention-target") || "",
+            label: node.innerText.slice(1) || "",
+            redirect_uri: node.getAttribute("redirect_uri"),
+          };
+        },
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["mention-component", mergeAttributes(HTMLAttributes)];
+  },
+});
diff --git a/packages/editor/core/src/ui/mentions/index.tsx b/packages/editor/core/src/ui/mentions/index.tsx
new file mode 100644
index 000000000..42ec92554
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/index.tsx
@@ -0,0 +1,22 @@
+// @ts-nocheck
+
+import suggestion from "./suggestion";
+import { CustomMention } from "./custom";
+import {
+  IMentionHighlight,
+  IMentionSuggestion,
+} from "../../types/mention-suggestion";
+
+export const Mentions = (
+  mentionSuggestions: IMentionSuggestion[],
+  mentionHighlights: IMentionHighlight[],
+  readonly,
+) =>
+  CustomMention.configure({
+    HTMLAttributes: {
+      class: "mention",
+    },
+    readonly: readonly,
+    mentionHighlights: mentionHighlights,
+    suggestion: suggestion(mentionSuggestions),
+  });
diff --git a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx
new file mode 100644
index 000000000..331c701e2
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable react/display-name */
+// @ts-nocheck
+import { NodeViewWrapper } from "@tiptap/react";
+import { cn } from "../../lib/utils";
+import { useRouter } from "next/router";
+import { IMentionHighlight } from "../../types/mention-suggestion";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (props) => {
+  const router = useRouter();
+  const highlights = props.extension.options
+    .mentionHighlights as IMentionHighlight[];
+
+  const handleClick = () => {
+    if (!props.extension.options.readonly) {
+      router.push(props.node.attrs.redirect_uri);
+    }
+  };
+
+  return (
+    <NodeViewWrapper className="w-fit inline mention-component">
+      <span
+        className={cn(
+          "px-1 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 rounded font-medium mention",
+          {
+            "text-yellow-500 bg-yellow-500/20": highlights
+              ? highlights.includes(props.node.attrs.id)
+              : false,
+            "cursor-pointer": !props.extension.options.readonly,
+            // "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
+          },
+        )}
+        onClick={handleClick}
+        data-mention-target={props.node.attrs.target}
+        data-mention-id={props.node.attrs.id}
+      >
+        @{props.node.attrs.label}
+      </span>
+    </NodeViewWrapper>
+  );
+};
diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts
new file mode 100644
index 000000000..ce09cb092
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -0,0 +1,63 @@
+import { ReactRenderer } from "@tiptap/react";
+import { Editor } from "@tiptap/core";
+import tippy from "tippy.js";
+
+import MentionList from "./MentionList";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+const Suggestion = (suggestions: IMentionSuggestion[]) => ({
+  items: ({ query }: { query: string }) =>
+    suggestions
+      .filter((suggestion) =>
+        suggestion.title.toLowerCase().startsWith(query.toLowerCase()),
+      )
+      .slice(0, 5),
+  render: () => {
+    let reactRenderer: ReactRenderer | null = null;
+    let popup: any | null = null;
+
+    return {
+      onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+        reactRenderer = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor,
+        });
+        // @ts-ignore
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.querySelector("#editor-container"),
+          content: reactRenderer.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "bottom-start",
+        });
+      },
+
+      onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+        reactRenderer?.updateProps(props);
+
+        popup &&
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          });
+      },
+      onKeyDown: (props: { event: KeyboardEvent }) => {
+        if (props.event.key === "Escape") {
+          popup?.[0].hide();
+
+          return true;
+        }
+
+        // @ts-ignore
+        return reactRenderer?.ref?.onKeyDown(props);
+      },
+      onExit: () => {
+        popup?.[0].destroy();
+        reactRenderer?.destroy();
+      },
+    };
+  },
+});
+
+export default Suggestion;
diff --git a/packages/editor/core/src/ui/menus/menu-items/index.tsx b/packages/editor/core/src/ui/menus/menu-items/index.tsx
new file mode 100644
index 000000000..8a2651d1e
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx
@@ -0,0 +1,145 @@
+import {
+  BoldIcon,
+  Heading1,
+  CheckSquare,
+  Heading2,
+  Heading3,
+  QuoteIcon,
+  ImageIcon,
+  TableIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikethroughIcon,
+  CodeIcon,
+} from "lucide-react";
+import { Editor } from "@tiptap/react";
+import { UploadImage } from "../../../types/upload-image";
+import {
+  insertImageCommand,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBold,
+  toggleBulletList,
+  toggleCode,
+  toggleHeadingOne,
+  toggleHeadingThree,
+  toggleHeadingTwo,
+  toggleItalic,
+  toggleOrderedList,
+  toggleStrike,
+  toggleTaskList,
+  toggleUnderline,
+} from "../../../lib/editor-commands";
+
+export interface EditorMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({
+  name: "H1",
+  isActive: () => editor.isActive("heading", { level: 1 }),
+  command: () => toggleHeadingOne(editor),
+  icon: Heading1,
+});
+
+export const HeadingTwoItem = (editor: Editor): EditorMenuItem => ({
+  name: "H2",
+  isActive: () => editor.isActive("heading", { level: 2 }),
+  command: () => toggleHeadingTwo(editor),
+  icon: Heading2,
+});
+
+export const HeadingThreeItem = (editor: Editor): EditorMenuItem => ({
+  name: "H3",
+  isActive: () => editor.isActive("heading", { level: 3 }),
+  command: () => toggleHeadingThree(editor),
+  icon: Heading3,
+});
+
+export const BoldItem = (editor: Editor): EditorMenuItem => ({
+  name: "bold",
+  isActive: () => editor?.isActive("bold"),
+  command: () => toggleBold(editor),
+  icon: BoldIcon,
+});
+
+export const ItalicItem = (editor: Editor): EditorMenuItem => ({
+  name: "italic",
+  isActive: () => editor?.isActive("italic"),
+  command: () => toggleItalic(editor),
+  icon: ItalicIcon,
+});
+
+export const UnderLineItem = (editor: Editor): EditorMenuItem => ({
+  name: "underline",
+  isActive: () => editor?.isActive("underline"),
+  command: () => toggleUnderline(editor),
+  icon: UnderlineIcon,
+});
+
+export const StrikeThroughItem = (editor: Editor): EditorMenuItem => ({
+  name: "strike",
+  isActive: () => editor?.isActive("strike"),
+  command: () => toggleStrike(editor),
+  icon: StrikethroughIcon,
+});
+
+export const CodeItem = (editor: Editor): EditorMenuItem => ({
+  name: "code",
+  isActive: () => editor?.isActive("code"),
+  command: () => toggleCode(editor),
+  icon: CodeIcon,
+});
+
+export const BulletListItem = (editor: Editor): EditorMenuItem => ({
+  name: "bullet-list",
+  isActive: () => editor?.isActive("bulletList"),
+  command: () => toggleBulletList(editor),
+  icon: ListIcon,
+});
+
+export const TodoListItem = (editor: Editor): EditorMenuItem => ({
+  name: "To-do List",
+  isActive: () => editor.isActive("taskItem"),
+  command: () => toggleTaskList(editor),
+  icon: CheckSquare,
+});
+
+export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
+  name: "ordered-list",
+  isActive: () => editor?.isActive("orderedList"),
+  command: () => toggleOrderedList(editor),
+  icon: ListOrderedIcon,
+});
+
+export const QuoteItem = (editor: Editor): EditorMenuItem => ({
+  name: "quote",
+  isActive: () => editor?.isActive("quote"),
+  command: () => toggleBlockquote(editor),
+  icon: QuoteIcon,
+});
+
+export const TableItem = (editor: Editor): EditorMenuItem => ({
+  name: "table",
+  isActive: () => editor?.isActive("table"),
+  command: () => insertTableCommand(editor),
+  icon: TableIcon,
+});
+
+export const ImageItem = (
+  editor: Editor,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+): EditorMenuItem => ({
+  name: "image",
+  isActive: () => editor?.isActive("image"),
+  command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
+  icon: ImageIcon,
+});
diff --git a/web/components/tiptap/plugins/delete-image.tsx b/packages/editor/core/src/ui/plugins/delete-image.tsx
similarity index 76%
rename from web/components/tiptap/plugins/delete-image.tsx
rename to packages/editor/core/src/ui/plugins/delete-image.tsx
index fdf515ccc..48ec244fc 100644
--- a/web/components/tiptap/plugins/delete-image.tsx
+++ b/packages/editor/core/src/ui/plugins/delete-image.tsx
@@ -1,6 +1,6 @@
 import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
 import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import fileService from "services/file.service";
+import { DeleteImage } from "../../types/delete-image";
 
 const deleteKey = new PluginKey("delete-image");
 const IMAGE_NODE_TYPE = "image";
@@ -12,11 +12,15 @@ interface ImageNode extends ProseMirrorNode {
   };
 }
 
-const TrackImageDeletionPlugin = (): Plugin =>
+const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
   new Plugin({
     key: deleteKey,
-    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
-      const newImageSources = new Set();
+    appendTransaction: (
+      transactions: readonly Transaction[],
+      oldState: EditorState,
+      newState: EditorState,
+    ) => {
+      const newImageSources = new Set<string>();
       newState.doc.descendants((node) => {
         if (node.type.name === IMAGE_NODE_TYPE) {
           newImageSources.add(node.attrs.src);
@@ -45,7 +49,7 @@ const TrackImageDeletionPlugin = (): Plugin =>
 
         removedImages.forEach(async (node) => {
           const src = node.attrs.src;
-          await onNodeDeleted(src);
+          await onNodeDeleted(src, deleteImage);
         });
       });
 
@@ -55,10 +59,13 @@ const TrackImageDeletionPlugin = (): Plugin =>
 
 export default TrackImageDeletionPlugin;
 
-async function onNodeDeleted(src: string): Promise<void> {
+async function onNodeDeleted(
+  src: string,
+  deleteImage: DeleteImage,
+): Promise<void> {
   try {
     const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-    const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
+    const resStatus = await deleteImage(assetUrlWithWorkspaceId);
     if (resStatus === 204) {
       console.log("Image deleted successfully");
     }
diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx
new file mode 100644
index 000000000..256460073
--- /dev/null
+++ b/packages/editor/core/src/ui/plugins/upload-image.tsx
@@ -0,0 +1,188 @@
+import { UploadImage } from "../../types/upload-image";
+import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
+
+const uploadKey = new PluginKey("upload-image");
+
+const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
+  new Plugin({
+    key: uploadKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, set) {
+        set = set.map(tr.mapping, tr.doc);
+        // See if the transaction adds or removes any placeholders
+        const action = tr.getMeta(uploadKey);
+        if (action && action.add) {
+          const { id, pos, src } = action.add;
+
+          const placeholder = document.createElement("div");
+          placeholder.setAttribute("class", "img-placeholder");
+          const image = document.createElement("img");
+          image.setAttribute(
+            "class",
+            "opacity-10 rounded-lg border border-custom-border-300",
+          );
+          image.src = src;
+          placeholder.appendChild(image);
+
+          // Create cancel button
+          const cancelButton = document.createElement("button");
+          cancelButton.style.position = "absolute";
+          cancelButton.style.right = "3px";
+          cancelButton.style.top = "3px";
+          cancelButton.setAttribute("class", "opacity-90 rounded-lg");
+
+          cancelButton.onclick = () => {
+            cancelUploadImage?.();
+          };
+
+          // Create an SVG element from the SVG string
+          const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-circle"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
+          const parser = new DOMParser();
+          const svgElement = parser.parseFromString(
+            svgString,
+            "image/svg+xml",
+          ).documentElement;
+
+          cancelButton.appendChild(svgElement);
+          placeholder.appendChild(cancelButton);
+          const deco = Decoration.widget(pos + 1, placeholder, {
+            id,
+          });
+          set = set.add(tr.doc, [deco]);
+        } else if (action && action.remove) {
+          set = set.remove(
+            set.find(
+              undefined,
+              undefined,
+              (spec) => spec.id == action.remove.id,
+            ),
+          );
+        }
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+
+export default UploadImagesPlugin;
+
+function findPlaceholder(state: EditorState, id: {}) {
+  const decos = uploadKey.getState(state);
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: number | undefined }) => spec.id == id,
+  );
+  return found.length ? found[0].from : null;
+}
+
+const removePlaceholder = (view: EditorView, id: {}) => {
+  const removePlaceholderTr = view.state.tr.setMeta(uploadKey, {
+    remove: { id },
+  });
+  view.dispatch(removePlaceholderTr);
+};
+
+export async function startImageUpload(
+  file: File,
+  view: EditorView,
+  pos: number,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+) {
+  if (!file) {
+    alert("No file selected. Please select a file to upload.");
+    return;
+  }
+
+  if (!file.type.includes("image/")) {
+    alert("Invalid file type. Please select an image file.");
+    return;
+  }
+
+  if (file.size > 5 * 1024 * 1024) {
+    alert("File size too large. Please select a file smaller than 5MB.");
+    return;
+  }
+
+  const id = {};
+
+  const tr = view.state.tr;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    tr.setMeta(uploadKey, {
+      add: {
+        id,
+        pos,
+        src: reader.result,
+      },
+    });
+    view.dispatch(tr);
+  };
+
+  // Handle FileReader errors
+  reader.onerror = (error) => {
+    console.error("FileReader error: ", error);
+    removePlaceholder(view, id);
+    return;
+  };
+
+  setIsSubmitting?.("submitting");
+
+  try {
+    const src = await UploadImageHandler(file, uploadFile);
+    const { schema } = view.state;
+    pos = findPlaceholder(view.state, id);
+
+    if (pos == null) return;
+    const imageSrc = typeof src === "object" ? reader.result : src;
+
+    const node = schema.nodes.image.create({ src: imageSrc });
+    const transaction = view.state.tr
+      .replaceWith(pos, pos, node)
+      .setMeta(uploadKey, { remove: { id } });
+    view.dispatch(transaction);
+  } catch (error) {
+    console.error("Upload error: ", error);
+    removePlaceholder(view, id);
+  }
+}
+
+const UploadImageHandler = (
+  file: File,
+  uploadFile: UploadImage,
+): Promise<string> => {
+  try {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const imageUrl = await uploadFile(file);
+
+        const image = new Image();
+        image.src = imageUrl;
+        image.onload = () => {
+          resolve(imageUrl);
+        };
+      } catch (error) {
+        if (error instanceof Error) {
+          console.log(error.message);
+        }
+        reject(error);
+      }
+    });
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
diff --git a/space/components/tiptap/props.tsx b/packages/editor/core/src/ui/props.tsx
similarity index 70%
rename from space/components/tiptap/props.tsx
rename to packages/editor/core/src/ui/props.tsx
index 8233e3ab4..865e0d2c7 100644
--- a/space/components/tiptap/props.tsx
+++ b/packages/editor/core/src/ui/props.tsx
@@ -1,10 +1,13 @@
 import { EditorProps } from "@tiptap/pm/view";
+import { findTableAncestor } from "../lib/utils";
 import { startImageUpload } from "./plugins/upload-image";
-import { findTableAncestor } from "./table-menu";
+import { UploadImage } from "../types/upload-image";
 
-export function TiptapEditorProps(
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+export function CoreEditorProps(
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ): EditorProps {
   return {
     attributes: {
@@ -31,11 +34,15 @@ export function TiptapEditorProps(
           }
         }
       }
-      if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+      if (
+        event.clipboardData &&
+        event.clipboardData.files &&
+        event.clipboardData.files[0]
+      ) {
         event.preventDefault();
         const file = event.clipboardData.files[0];
         const pos = view.state.selection.from;
-        startImageUpload(file, view, pos, workspaceSlug, setIsSubmitting);
+        startImageUpload(file, view, pos, uploadFile, setIsSubmitting);
         return true;
       }
       return false;
@@ -50,16 +57,26 @@ export function TiptapEditorProps(
           }
         }
       }
-      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      if (
+        !moved &&
+        event.dataTransfer &&
+        event.dataTransfer.files &&
+        event.dataTransfer.files[0]
+      ) {
         event.preventDefault();
         const file = event.dataTransfer.files[0];
         const coordinates = view.posAtCoords({
           left: event.clientX,
           top: event.clientY,
         });
-        // here we deduct 1 from the pos or else the image will create an extra node
         if (coordinates) {
-          startImageUpload(file, view, coordinates.pos - 1, workspaceSlug, setIsSubmitting);
+          startImageUpload(
+            file,
+            view,
+            coordinates.pos - 1,
+            uploadFile,
+            setIsSubmitting,
+          );
         }
         return true;
       }
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
new file mode 100644
index 000000000..b8fc9bb95
--- /dev/null
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -0,0 +1,102 @@
+import StarterKit from "@tiptap/starter-kit";
+import TiptapLink from "@tiptap/extension-link";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import Gapcursor from "@tiptap/extension-gapcursor";
+
+import TableHeader from "../extensions/table/table-header/table-header";
+import Table from "../extensions/table/table";
+import TableCell from "../extensions/table/table-cell/table-cell";
+import TableRow from "../extensions/table/table-row/table-row";
+
+import ReadOnlyImageExtension from "../extensions/image/read-only-image";
+import { isValidHttpUrl } from "../../lib/utils";
+import { Mentions } from "../mentions";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+export const CoreReadOnlyEditorExtensions = (mentionConfig: {
+  mentionSuggestions: IMentionSuggestion[];
+  mentionHighlights: string[];
+}) => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside leading-3 -mt-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside leading-3 -mt-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal -mb-2",
+      },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: "border-l-4 border-custom-border-300",
+      },
+    },
+    code: {
+      HTMLAttributes: {
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
+      },
+    },
+    codeBlock: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "rgba(var(--color-text-100))",
+      width: 2,
+    },
+    gapcursor: false,
+  }),
+  Gapcursor,
+  TiptapLink.configure({
+    protocols: ["http", "https"],
+    validate: (url) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  ReadOnlyImageExtension.configure({
+    HTMLAttributes: {
+      class: "rounded-lg border border-custom-border-300",
+    },
+  }),
+  TiptapUnderline,
+  TextStyle,
+  Color,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex items-start my-4",
+    },
+    nested: true,
+  }),
+  Markdown.configure({
+    html: true,
+    transformCopiedText: true,
+  }),
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    true,
+  ),
+];
diff --git a/packages/editor/core/src/ui/read-only/props.tsx b/packages/editor/core/src/ui/read-only/props.tsx
new file mode 100644
index 000000000..79f9fcb0d
--- /dev/null
+++ b/packages/editor/core/src/ui/read-only/props.tsx
@@ -0,0 +1,7 @@
+import { EditorProps } from "@tiptap/pm/view";
+
+export const CoreReadOnlyEditorProps: EditorProps = {
+  attributes: {
+    class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
+  },
+};
diff --git a/packages/editor/core/tailwind.config.js b/packages/editor/core/tailwind.config.js
new file mode 100644
index 000000000..f32063158
--- /dev/null
+++ b/packages/editor/core/tailwind.config.js
@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};
diff --git a/packages/editor/core/tsconfig.json b/packages/editor/core/tsconfig.json
new file mode 100644
index 000000000..57d0e9a74
--- /dev/null
+++ b/packages/editor/core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/core/tsup.config.ts b/packages/editor/core/tsup.config.ts
new file mode 100644
index 000000000..5e89e04af
--- /dev/null
+++ b/packages/editor/core/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: false,
+  external: ["react"],
+  injectStyle: true,
+  ...options,
+}));
diff --git a/packages/editor/lite-text-editor/Readme.md b/packages/editor/lite-text-editor/Readme.md
new file mode 100644
index 000000000..1f10f5ff4
--- /dev/null
+++ b/packages/editor/lite-text-editor/Readme.md
@@ -0,0 +1,97 @@
+# @plane/lite-text-editor
+
+## Description
+
+The `@plane/lite-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Custom control over Enter key, etc.
+
+## Key Features
+
+- **Exported Components**: There are two components exported from the Lite text editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+
+  `LiteTextEditor` & `LiteTextEditorWithRef`
+
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Lite editor types (with and without Ref)
+  `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
+
+## LiteTextEditor
+
+| Prop                            | Type                                                             | Description                                                                                                                                                             |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile`                    | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+| `deleteFile`                    | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+| `value`                         | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+| `onEnterKeyPress`               | `(e) => void`                                                    | The event that happens on Enter key press                                                                                                                               |
+| `debouncedUpdatesEnabled`       | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange`                      | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+| `setIsSubmitting`               | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+| `setShouldShowAlert`            | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert incase of content not being "saved".                                                                                     |
+| `noBorder`                      | `boolean`                                                        | If set to true, the editor will not have a border.                                                                                                                      |
+| `borderOnFocus`                 | `boolean`                                                        | If set to true, the editor will show a border when it is focused.                                                                                                       |
+| `customClassName`               | `string`                                                         | This is a custom CSS class that can be applied to the editor.                                                                                                           |
+| `editorContentCustomClassNames` | `string`                                                         | This is a custom CSS class that can be applied to the editor content.                                                                                                   |
+
+### Usage
+
+1. Here is an example of how to use the `RichTextEditor` component
+
+```tsx
+<LiteTextEditor
+  onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+  uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+  deleteFile={fileService.deleteImage}
+  value={value}
+  debouncedUpdatesEnabled={false}
+  customClassName="min-h-[50px] p-3 shadow-sm"
+  onChange={(comment_json: Object, comment_html: string) => {
+    onChange(comment_html);
+  }}
+/>
+```
+
+2. Example of how to use the `LiteTextEditorWithRef` component
+
+```tsx
+const editorRef = useRef<any>(null);
+
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
+
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
+
+return (
+  <LiteTextEditorWithRef
+    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+    uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+    deleteFile={fileService.deleteImage}
+    ref={editorRef}
+    value={value}
+    debouncedUpdatesEnabled={false}
+    customClassName="min-h-[50px] p-3 shadow-sm"
+    onChange={(comment_json: Object, comment_html: string) => {
+      onChange(comment_html);
+    }}
+  />
+);
+```
+
+## LiteReadOnlyEditor
+
+| Prop                            | Type          | Description                                                           |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value`                         | `html string` | The initial content of the editor.                                    |
+| `noBorder`                      | `boolean`     | If set to true, the editor will not have a border.                    |
+| `borderOnFocus`                 | `boolean`     | If set to true, the editor will show a border when it is focused.     |
+| `customClassName`               | `string`      | This is a custom CSS class that can be applied to the editor.         |
+| `editorContentCustomClassNames` | `string`      | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+Here is an example of how to use the `RichReadOnlyEditor` component
+
+```tsx
+<LiteReadOnlyEditor
+  value={comment.comment_html}
+  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+/>
+```
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
new file mode 100644
index 000000000..52f27fb29
--- /dev/null
+++ b/packages/editor/lite-text-editor/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@plane/lite-text-editor",
+  "version": "0.0.1",
+  "description": "Package that powers Plane's Comment Editor",
+  "private": true,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@plane/editor-core": "*",
+    "@plane/ui": "*",
+    "@tiptap/extension-list-item": "^2.1.11",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^0.1.0",
+    "lowlight": "^2.9.0",
+    "lucide-react": "^0.244.0",
+    "react-markdown": "^8.0.7",
+    "tailwind-merge": "^1.14.0",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.2",
+    "use-debounce": "^9.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}
diff --git a/packages/editor/lite-text-editor/postcss.config.js b/packages/editor/lite-text-editor/postcss.config.js
new file mode 100644
index 000000000..07aa434b2
--- /dev/null
+++ b/packages/editor/lite-text-editor/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts
new file mode 100644
index 000000000..ba916e666
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/index.ts
@@ -0,0 +1,3 @@
+export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
+export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
+export type { IMentionSuggestion, IMentionHighlight } from "./ui";
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
new file mode 100644
index 000000000..129efa4ee
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
@@ -0,0 +1,25 @@
+import { Extension } from "@tiptap/core";
+
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
+  Extension.create({
+    name: "enterKey",
+
+    addKeyboardShortcuts() {
+      return {
+        Enter: () => {
+          if (onEnterKeyPress) {
+            onEnterKeyPress();
+          }
+          return true;
+        },
+        "Shift-Enter": ({ editor }) =>
+          editor.commands.first(({ commands }) => [
+            () => commands.newlineInCode(),
+            () => commands.splitListItem("listItem"),
+            () => commands.createParagraphNear(),
+            () => commands.liftEmptyBlock(),
+            () => commands.splitBlock(),
+          ]),
+      };
+    },
+  });
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
new file mode 100644
index 000000000..4531e9516
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
@@ -0,0 +1,5 @@
+import { EnterKeyExtension } from "./enter-key-extension";
+
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
+  // EnterKeyExtension(onEnterKeyPress),
+];
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
new file mode 100644
index 000000000..e7decbcac
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -0,0 +1,137 @@
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useEditor,
+} from "@plane/editor-core";
+import { FixedMenu } from "./menus/fixed-menu";
+import { LiteTextEditorExtensions } from "./extensions";
+
+export type UploadImage = (file: File) => Promise<string>;
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
+export type IMentionSuggestion = {
+  id: string;
+  type: string;
+  avatar: string;
+  title: string;
+  subtitle: string;
+  redirect_uri: string;
+};
+
+export type IMentionHighlight = string;
+
+interface ILiteTextEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  commentAccessSpecifier?: {
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
+    commentAccess: {
+      icon: any;
+      key: string;
+      label: "Private" | "Public";
+    }[];
+  };
+  onEnterKeyPress?: (e?: any) => void;
+  cancelUploadImage?: () => any;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+  submitButton?: React.ReactNode;
+}
+
+interface LiteTextEditorProps extends ILiteTextEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const LiteTextEditor = (props: LiteTextEditorProps) => {
+  const {
+    onChange,
+    cancelUploadImage,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    editorContentCustomClassNames,
+    value,
+    uploadFile,
+    deleteFile,
+    noBorder,
+    borderOnFocus,
+    customClassName,
+    forwardedRef,
+    commentAccessSpecifier,
+    onEnterKeyPress,
+    mentionHighlights,
+    mentionSuggestions,
+    submitButton,
+  } = props;
+
+  const editor = useEditor({
+    onChange,
+    cancelUploadImage,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    deleteFile,
+    forwardedRef,
+    extensions: LiteTextEditorExtensions(onEnterKeyPress),
+    mentionHighlights,
+    mentionSuggestions,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+        <div className="w-full mt-4">
+          <FixedMenu
+            editor={editor}
+            uploadFile={uploadFile}
+            setIsSubmitting={setIsSubmitting}
+            commentAccessSpecifier={commentAccessSpecifier}
+            submitButton={submitButton}
+          />
+        </div>
+      </div>
+    </EditorContainer>
+  );
+};
+
+const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
+  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />,
+);
+
+LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
+
+export { LiteTextEditor, LiteTextEditorWithRef };
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
new file mode 100644
index 000000000..60878f9bf
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span
+    className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}
+  >
+    {iconName}
+  </span>
+);
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
new file mode 100644
index 000000000..a4fb0479c
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -0,0 +1,218 @@
+import { Editor } from "@tiptap/react";
+import { BoldIcon } from "lucide-react";
+
+import {
+  BoldItem,
+  BulletListItem,
+  cn,
+  CodeItem,
+  ImageItem,
+  ItalicItem,
+  NumberedListItem,
+  QuoteItem,
+  StrikeThroughItem,
+  TableItem,
+  UnderLineItem,
+} from "@plane/editor-core";
+import { Tooltip } from "@plane/ui";
+import { UploadImage } from "../../";
+
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+type EditorBubbleMenuProps = {
+  editor: Editor;
+  commentAccessSpecifier?: {
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
+    commentAccess:
+      | {
+          icon: any;
+          key: string;
+          label: "Private" | "Public";
+        }[]
+      | undefined;
+  };
+  uploadFile: UploadImage;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  submitButton: React.ReactNode;
+};
+
+export const FixedMenu = (props: EditorBubbleMenuProps) => {
+  const basicMarkItems: BubbleMenuItem[] = [
+    BoldItem(props.editor),
+    ItalicItem(props.editor),
+    UnderLineItem(props.editor),
+    StrikeThroughItem(props.editor),
+  ];
+
+  const listItems: BubbleMenuItem[] = [
+    BulletListItem(props.editor),
+    NumberedListItem(props.editor),
+  ];
+
+  const userActionItems: BubbleMenuItem[] = [
+    QuoteItem(props.editor),
+    CodeItem(props.editor),
+  ];
+
+  const complexItems: BubbleMenuItem[] = [
+    TableItem(props.editor),
+    ImageItem(props.editor, props.uploadFile, props.setIsSubmitting),
+  ];
+
+  const handleAccessChange = (accessKey: string) => {
+    props.commentAccessSpecifier?.onAccessChange(accessKey);
+  };
+
+  return (
+    <div className="flex items-stretch gap-1.5 w-full h-9 overflow-x-scroll">
+      {props.commentAccessSpecifier && (
+        <div className="flex-shrink-0 flex items-stretch gap-0.5 border-[0.5px] border-custom-border-200 rounded p-1">
+          {props?.commentAccessSpecifier.commentAccess?.map((access) => (
+            <Tooltip key={access.key} tooltipContent={access.label}>
+              <button
+                type="button"
+                onClick={() => handleAccessChange(access.key)}
+                className={`aspect-square grid place-items-center p-1 rounded-sm hover:bg-custom-background-90 ${
+                  props.commentAccessSpecifier?.accessValue === access.key
+                    ? "bg-custom-background-90"
+                    : ""
+                }`}
+              >
+                <access.icon
+                  className={`w-3.5 h-3.5 ${
+                    props.commentAccessSpecifier?.accessValue === access.key
+                      ? "text-custom-text-100"
+                      : "text-custom-text-400"
+                  }`}
+                  strokeWidth={2}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
+      <div className="flex items-stretch justify-between gap-2 w-full border-[0.5px] border-custom-border-200 bg-custom-background-90 rounded p-1">
+        <div className="flex items-stretch">
+          <div className="flex items-stretch gap-0.5 pr-2.5 border-r border-custom-border-200">
+            {basicMarkItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {listItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {userActionItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 pl-2.5">
+            {complexItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+        </div>
+        <div className="sticky right-1">{props.submitButton}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
new file mode 100644
index 000000000..a3de061ae
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
+
+interface ICoreReadOnlyEditor {
+  value: string;
+  editorContentCustomClassNames?: string;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  mentionHighlights: string[];
+}
+
+interface EditorCoreProps extends ICoreReadOnlyEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const LiteReadOnlyEditor = ({
+  editorContentCustomClassNames,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  value,
+  forwardedRef,
+  mentionHighlights,
+}: EditorCoreProps) => {
+  const editor = useReadOnlyEditor({
+    value,
+    forwardedRef,
+    mentionHighlights,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const LiteReadOnlyEditorWithRef = React.forwardRef<
+  EditorHandle,
+  ICoreReadOnlyEditor
+>((props, ref) => <LiteReadOnlyEditor {...props} forwardedRef={ref} />);
+
+LiteReadOnlyEditorWithRef.displayName = "LiteReadOnlyEditorWithRef";
+
+export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef };
diff --git a/packages/editor/lite-text-editor/src/ui/tooltip.tsx b/packages/editor/lite-text-editor/src/ui/tooltip.tsx
new file mode 100644
index 000000000..a2f2414e5
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/tooltip.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+// next-themes
+import { useTheme } from "next-themes";
+// tooltip2
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?:
+    | "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";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+};
+
+export const Tooltip: React.FC<Props> = ({
+  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/editor/lite-text-editor/tailwind.config.js b/packages/editor/lite-text-editor/tailwind.config.js
new file mode 100644
index 000000000..f32063158
--- /dev/null
+++ b/packages/editor/lite-text-editor/tailwind.config.js
@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};
diff --git a/packages/editor/lite-text-editor/tsconfig.json b/packages/editor/lite-text-editor/tsconfig.json
new file mode 100644
index 000000000..57d0e9a74
--- /dev/null
+++ b/packages/editor/lite-text-editor/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/lite-text-editor/tsup.config.ts b/packages/editor/lite-text-editor/tsup.config.ts
new file mode 100644
index 000000000..5e89e04af
--- /dev/null
+++ b/packages/editor/lite-text-editor/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: false,
+  external: ["react"],
+  injectStyle: true,
+  ...options,
+}));
diff --git a/packages/editor/rich-text-editor/Readme.md b/packages/editor/rich-text-editor/Readme.md
new file mode 100644
index 000000000..44ed9ba5e
--- /dev/null
+++ b/packages/editor/rich-text-editor/Readme.md
@@ -0,0 +1,103 @@
+# @plane/rich-text-editor
+
+## Description
+
+The `@plane/rich-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Slash Commands and many more.
+
+## Key Features
+
+- **Exported Components**: There are two components exported from the Rich text editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+
+  `RichTextEditor` & `RichTextEditorWithRef`
+
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Rich editor types (with and without Ref)
+  `RichReadOnlyEditor` &`RichReadOnlyEditorWithRef`
+
+## RichTextEditor
+
+| Prop                            | Type                                                             | Description                                                                                                                                                             |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile`                    | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+| `deleteFile`                    | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+| `value`                         | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+| `debouncedUpdatesEnabled`       | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange`                      | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+| `setIsSubmitting`               | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+| `setShouldShowAlert`            | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert incase of content not being "saved".                                                                                     |
+| `noBorder`                      | `boolean`                                                        | If set to true, the editor will not have a border.                                                                                                                      |
+| `borderOnFocus`                 | `boolean`                                                        | If set to true, the editor will show a border when it is focused.                                                                                                       |
+| `customClassName`               | `string`                                                         | This is a custom CSS class that can be applied to the editor.                                                                                                           |
+| `editorContentCustomClassNames` | `string`                                                         | This is a custom CSS class that can be applied to the editor content.                                                                                                   |
+
+### Usage
+
+1. Here is an example of how to use the `RichTextEditor` component
+
+```tsx
+<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);
+    // custom stuff you want to do
+  }}
+/>
+```
+
+2. Example of how to use the `RichTextEditorWithRef` component
+
+```tsx
+const editorRef = useRef<any>(null);
+
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
+
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
+
+return (
+  <RichTextEditorWithRef
+    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+    deleteFile={fileService.deleteImage}
+    ref={editorRef}
+    debouncedUpdatesEnabled={false}
+    value={value}
+    customClassName="min-h-[150px]"
+    onChange={(description: Object, description_html: string) => {
+      onChange(description_html);
+      // custom stuff you want to do
+    }}
+  />
+);
+```
+
+## RichReadOnlyEditor
+
+| Prop                            | Type          | Description                                                           |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value`                         | `html string` | The initial content of the editor.                                    |
+| `noBorder`                      | `boolean`     | If set to true, the editor will not have a border.                    |
+| `borderOnFocus`                 | `boolean`     | If set to true, the editor will show a border when it is focused.     |
+| `customClassName`               | `string`      | This is a custom CSS class that can be applied to the editor.         |
+| `editorContentCustomClassNames` | `string`      | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+Here is an example of how to use the `RichReadOnlyEditor` component
+
+```tsx
+<RichReadOnlyEditor
+  value={issueDetails.description_html}
+  customClassName="p-3 min-h-[50px] shadow-sm"
+/>
+```
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
new file mode 100644
index 000000000..db793261c
--- /dev/null
+++ b/packages/editor/rich-text-editor/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@plane/rich-text-editor",
+  "version": "0.0.1",
+  "description": "Rich Text Editor that powers Plane",
+  "private": true,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.1.11",
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@plane/editor-core": "*",
+    "@tiptap/extension-code-block-lowlight": "^2.1.11",
+    "@tiptap/extension-horizontal-rule": "^2.1.11",
+    "@tiptap/extension-placeholder": "^2.1.11",
+    "@tiptap/suggestion": "^2.1.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "highlight.js": "^11.8.0",
+    "lowlight": "^3.0.0",
+    "lucide-react": "^0.244.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "react": "^18.2.0",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}
diff --git a/packages/editor/rich-text-editor/postcss.config.js b/packages/editor/rich-text-editor/postcss.config.js
new file mode 100644
index 000000000..07aa434b2
--- /dev/null
+++ b/packages/editor/rich-text-editor/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts
new file mode 100644
index 000000000..9ea7f9a39
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/index.ts
@@ -0,0 +1,5 @@
+import "./styles/github-dark.css";
+
+export { RichTextEditor, RichTextEditorWithRef } from "./ui";
+export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
+export type { IMentionSuggestion, IMentionHighlight } from "./ui";
diff --git a/packages/editor/rich-text-editor/src/styles/github-dark.css b/packages/editor/rich-text-editor/src/styles/github-dark.css
new file mode 100644
index 000000000..20a7f4e66
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/styles/github-dark.css
@@ -0,0 +1,2 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
+.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
new file mode 100644
index 000000000..a28982da3
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@@ -0,0 +1,61 @@
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Placeholder from "@tiptap/extension-placeholder";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { common, createLowlight } from "lowlight";
+import { InputRule } from "@tiptap/core";
+
+import ts from "highlight.js/lib/languages/typescript";
+
+import SlashCommand from "./slash-command";
+import { UploadImage } from "../";
+
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+export const RichTextEditorExtensions = (
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+) => [
+  HorizontalRule.extend({
+    addInputRules() {
+      return [
+        new InputRule({
+          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+          handler: ({ state, range, commands }) => {
+            commands.splitBlock();
+
+            const attributes = {};
+            const { tr } = state;
+            const start = range.from;
+            const end = range.to;
+            // @ts-ignore
+            tr.replaceWith(start - 1, end, this.type.create(attributes));
+          },
+        }),
+      ];
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: "mb-6 border-t border-custom-border-300",
+    },
+  }),
+  SlashCommand(uploadFile, setIsSubmitting),
+  CodeBlockLowlight.configure({
+    lowlight,
+  }),
+  Placeholder.configure({
+    placeholder: ({ node }) => {
+      if (node.type.name === "heading") {
+        return `Heading ${node.attrs.level}`;
+      }
+      if (node.type.name === "image" || node.type.name === "table") {
+        return "";
+      }
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
+];
diff --git a/space/components/tiptap/slash-command/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
similarity index 79%
rename from space/components/tiptap/slash-command/index.tsx
rename to packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
index 46bf5ea5a..bab13304a 100644
--- a/space/components/tiptap/slash-command/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
@@ -1,4 +1,11 @@
-import React, { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+  useRef,
+  useLayoutEffect,
+} from "react";
 import { Editor, Range, Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
@@ -17,8 +24,19 @@ import {
   ImageIcon,
   Table,
 } from "lucide-react";
-import { startImageUpload } from "../plugins/upload-image";
-import { cn } from "../utils";
+import { UploadImage } from "../";
+import {
+  cn,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleOrderedList,
+  toggleTaskList,
+  insertImageCommand,
+  toggleHeadingOne,
+  toggleHeadingTwo,
+  toggleHeadingThree,
+} from "@plane/editor-core";
 
 interface CommandItemProps {
   title: string;
@@ -37,7 +55,15 @@ const Command = Extension.create({
     return {
       suggestion: {
         char: "/",
-        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: any;
+        }) => {
           props.command({ editor, range });
         },
       },
@@ -58,8 +84,10 @@ const Command = Extension.create({
 
 const getSuggestionItems =
   (
-    workspaceSlug: string,
-    setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+    uploadFile: UploadImage,
+    setIsSubmitting?: (
+      isSubmitting: "submitting" | "submitted" | "saved",
+    ) => void,
   ) =>
   ({ query }: { query: string }) =>
     [
@@ -69,7 +97,12 @@ const getSuggestionItems =
         searchTerms: ["p", "paragraph"],
         icon: <Text size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .toggleNode("paragraph", "paragraph")
+            .run();
         },
       },
       {
@@ -78,7 +111,7 @@ const getSuggestionItems =
         searchTerms: ["title", "big", "large"],
         icon: <Heading1 size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+          toggleHeadingOne(editor, range);
         },
       },
       {
@@ -87,7 +120,7 @@ const getSuggestionItems =
         searchTerms: ["subtitle", "medium"],
         icon: <Heading2 size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+          toggleHeadingTwo(editor, range);
         },
       },
       {
@@ -96,7 +129,7 @@ const getSuggestionItems =
         searchTerms: ["subtitle", "small"],
         icon: <Heading3 size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+          toggleHeadingThree(editor, range);
         },
       },
       {
@@ -105,7 +138,7 @@ const getSuggestionItems =
         searchTerms: ["todo", "task", "list", "check", "checkbox"],
         icon: <CheckSquare size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleTaskList().run();
+          toggleTaskList(editor, range);
         },
       },
       {
@@ -114,7 +147,7 @@ const getSuggestionItems =
         searchTerms: ["unordered", "point"],
         icon: <List size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleBulletList().run();
+          toggleBulletList(editor, range);
         },
       },
       {
@@ -132,12 +165,7 @@ const getSuggestionItems =
         searchTerms: ["table", "cell", "db", "data", "tabular"],
         icon: <Table size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-            .run();
+          insertTableCommand(editor, range);
         },
       },
       {
@@ -146,7 +174,7 @@ const getSuggestionItems =
         searchTerms: ["ordered"],
         icon: <ListOrdered size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+          toggleOrderedList(editor, range);
         },
       },
       {
@@ -155,13 +183,7 @@ const getSuggestionItems =
         searchTerms: ["blockquote"],
         icon: <TextQuote size={18} />,
         command: ({ editor, range }: CommandProps) =>
-          editor
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .toggleNode("paragraph", "paragraph")
-            .toggleBlockquote()
-            .run(),
+          toggleBlockquote(editor, range),
       },
       {
         title: "Code",
@@ -177,19 +199,7 @@ const getSuggestionItems =
         searchTerms: ["photo", "picture", "media"],
         icon: <ImageIcon size={18} />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).run();
-          // upload image
-          const input = document.createElement("input");
-          input.type = "file";
-          input.accept = "image/*";
-          input.onchange = async () => {
-            if (input.files?.length) {
-              const file = input.files[0];
-              const pos = editor.view.state.selection.from;
-              startImageUpload(file, editor.view, pos, workspaceSlug, setIsSubmitting);
-            }
-          };
-          input.click();
+          insertImageCommand(editor, uploadFile, setIsSubmitting, range);
         },
       },
     ].filter((item) => {
@@ -198,7 +208,8 @@ const getSuggestionItems =
         return (
           item.title.toLowerCase().includes(search) ||
           item.description.toLowerCase().includes(search) ||
-          (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)))
+          (item.searchTerms &&
+            item.searchTerms.some((term: string) => term.includes(search)))
         );
       }
       return true;
@@ -236,7 +247,7 @@ const CommandList = ({
         command(item);
       }
     },
-    [command, items]
+    [command, items],
   );
 
   useEffect(() => {
@@ -289,11 +300,17 @@ const CommandList = ({
         <button
           className={cn(
             `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
-            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
+            {
+              "bg-custom-primary-100/5  text-custom-text-100":
+                index === selectedIndex,
+            },
           )}
           key={index}
           onClick={() => selectItem(index)}
         >
+          <div className="flex h-10 w-10 items-center justify-center rounded-md border border-custom-border-300 bg-custom-background-100">
+            {item.icon}
+          </div>
           <div>
             <p className="font-medium">{item.title}</p>
             <p className="text-xs text-custom-text-300">{item.description}</p>
@@ -312,13 +329,14 @@ const renderItems = () => {
     onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
       component = new ReactRenderer(CommandList, {
         props,
+        // @ts-ignore
         editor: props.editor,
       });
 
       // @ts-ignore
       popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
-        appendTo: () => document.querySelector("#tiptap-container"),
+        appendTo: () => document.querySelector("#editor-container"),
         content: component.element,
         showOnCreate: true,
         interactive: true,
@@ -352,12 +370,14 @@ const renderItems = () => {
 };
 
 export const SlashCommand = (
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) =>
   Command.configure({
     suggestion: {
-      items: getSuggestionItems(workspaceSlug, setIsSubmitting),
+      items: getSuggestionItems(uploadFile, setIsSubmitting),
       render: renderItems,
     },
   });
diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx
new file mode 100644
index 000000000..2e98a72aa
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@@ -0,0 +1,114 @@
+"use client";
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useEditor,
+} from "@plane/editor-core";
+import { EditorBubbleMenu } from "./menus/bubble-menu";
+import { RichTextEditorExtensions } from "./extensions";
+
+export type UploadImage = (file: File) => Promise<string>;
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
+
+export type IMentionSuggestion = {
+  id: string;
+  type: string;
+  avatar: string;
+  title: string;
+  subtitle: string;
+  redirect_uri: string;
+};
+
+export type IMentionHighlight = string;
+
+interface IRichTextEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  cancelUploadImage?: () => any;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+}
+
+interface RichTextEditorProps extends IRichTextEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const RichTextEditor = ({
+  onChange,
+  debouncedUpdatesEnabled,
+  setIsSubmitting,
+  setShouldShowAlert,
+  editorContentCustomClassNames,
+  value,
+  uploadFile,
+  deleteFile,
+  noBorder,
+  cancelUploadImage,
+  borderOnFocus,
+  customClassName,
+  forwardedRef,
+  mentionHighlights,
+  mentionSuggestions,
+}: RichTextEditorProps) => {
+  const editor = useEditor({
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    cancelUploadImage,
+    deleteFile,
+    forwardedRef,
+    extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting),
+    mentionHighlights,
+    mentionSuggestions,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      {editor && <EditorBubbleMenu editor={editor} />}
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const RichTextEditorWithRef = React.forwardRef<EditorHandle, IRichTextEditor>(
+  (props, ref) => <RichTextEditor {...props} forwardedRef={ref} />,
+);
+
+RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
+
+export { RichTextEditor, RichTextEditorWithRef };
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
new file mode 100644
index 000000000..f9d830599
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
@@ -0,0 +1,158 @@
+import { BubbleMenu, BubbleMenuProps, isNodeSelection } from "@tiptap/react";
+import { FC, useEffect, useState } from "react";
+import { BoldIcon } from "lucide-react";
+
+import { NodeSelector } from "./node-selector";
+import { LinkSelector } from "./link-selector";
+import {
+  BoldItem,
+  cn,
+  CodeItem,
+  isCellSelection,
+  ItalicItem,
+  StrikeThroughItem,
+  UnderLineItem,
+} from "@plane/editor-core";
+
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
+
+export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
+  const items: BubbleMenuItem[] = [
+    BoldItem(props.editor),
+    ItalicItem(props.editor),
+    UnderLineItem(props.editor),
+    StrikeThroughItem(props.editor),
+    CodeItem(props.editor),
+  ];
+
+  const bubbleMenuProps: EditorBubbleMenuProps = {
+    ...props,
+    shouldShow: ({ view, state, editor }) => {
+      const { selection } = state;
+
+      const { empty } = selection;
+      const hasEditorFocus = view.hasFocus();
+
+      // if (typeof window !== "undefined") {
+      //   const selection: any = window?.getSelection();
+      //   if (selection.rangeCount !== 0) {
+      //     const range = selection.getRangeAt(0);
+      //     if (findTableAncestor(range.startContainer)) {
+      //       console.log("table");
+      //       return false;
+      //     }
+      //   }
+      // }
+
+      if (
+        !hasEditorFocus ||
+        empty ||
+        !editor.isEditable ||
+        editor.isActive("image") ||
+        isNodeSelection(selection) ||
+        isCellSelection(selection) ||
+        isSelecting
+      ) {
+        return false;
+      }
+      return true;
+    },
+    tippyOptions: {
+      moveTransition: "transform 0.15s ease-out",
+      onHidden: () => {
+        setIsNodeSelectorOpen(false);
+        setIsLinkSelectorOpen(false);
+      },
+    },
+  };
+
+  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
+  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+
+  const [isSelecting, setIsSelecting] = useState(false);
+  useEffect(() => {
+    function handleMouseDown() {
+      function handleMouseMove() {
+        if (!props.editor.state.selection.empty) {
+          setIsSelecting(true);
+          document.removeEventListener("mousemove", handleMouseMove);
+        }
+      }
+
+      function handleMouseUp() {
+        setIsSelecting(false);
+
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      }
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
+  return (
+    <BubbleMenu
+      {...bubbleMenuProps}
+      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+    >
+      {isSelecting ? null : (
+        <>
+          {!props.editor.isActive("table") && (
+            <NodeSelector
+              editor={props.editor!}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+                setIsLinkSelectorOpen(false);
+              }}
+            />
+          )}
+          <LinkSelector
+            editor={props.editor!!}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+              setIsNodeSelectorOpen(false);
+            }}
+          />
+          <div className="flex">
+            {items.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+                  {
+                    "text-custom-text-100 bg-custom-primary-100/5":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-4 w-4", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                />
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </BubbleMenu>
+  );
+};
diff --git a/web/components/tiptap/bubble-menu/link-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
similarity index 86%
rename from web/components/tiptap/bubble-menu/link-selector.tsx
rename to packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
index 559521db6..f8f1f17bb 100644
--- a/web/components/tiptap/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@@ -1,22 +1,38 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
-import { cn } from "../utils";
-import isValidHttpUrl from "./utils/link-validator";
+import {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import {
+  cn,
+  isValidHttpUrl,
+  setLinkEditor,
+  unsetLinkEditor,
+} from "@plane/editor-core";
+
 interface LinkSelectorProps {
   editor: Editor;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+export const LinkSelector: FC<LinkSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onLinkSubmit = useCallback(() => {
     const input = inputRef.current;
     const url = input?.value;
     if (url && isValidHttpUrl(url)) {
-      editor.chain().focus().setLink({ href: url }).run();
+      setLinkEditor(editor, url);
       setIsOpen(false);
     }
   }, [editor, inputRef, setIsOpen]);
@@ -31,7 +47,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
         type="button"
         className={cn(
           "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
-          { "bg-custom-background-100": isOpen }
+          { "bg-custom-background-100": isOpen },
         )}
         onClick={() => {
           setIsOpen(!isOpen);
@@ -68,7 +84,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
               type="button"
               className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
               onClick={() => {
-                editor.chain().focus().unsetLink().run();
+                unsetLinkEditor(editor);
                 setIsOpen(false);
               }}
             >
diff --git a/space/components/tiptap/bubble-menu/node-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
similarity index 52%
rename from space/components/tiptap/bubble-menu/node-selector.tsx
rename to packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
index 34d40ec06..965e7a42e 100644
--- a/space/components/tiptap/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@@ -1,20 +1,19 @@
-import { Editor } from "@tiptap/core";
 import {
-  Check,
-  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  TextQuote,
-  ListOrdered,
-  TextIcon,
-  Code,
-  CheckSquare,
-} from "lucide-react";
+  BulletListItem,
+  cn,
+  CodeItem,
+  HeadingOneItem,
+  HeadingThreeItem,
+  HeadingTwoItem,
+  NumberedListItem,
+  QuoteItem,
+  TodoListItem,
+} from "@plane/editor-core";
+import { Editor } from "@tiptap/react";
+import { Check, ChevronDown, TextIcon } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";
 
 import { BubbleMenuItem } from ".";
-import { cn } from "../utils";
 
 interface NodeSelectorProps {
   editor: Editor;
@@ -22,66 +21,30 @@ interface NodeSelectorProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+export const NodeSelector: FC<NodeSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
   const items: BubbleMenuItem[] = [
     {
       name: "Text",
       icon: TextIcon,
-      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
       isActive: () =>
         editor.isActive("paragraph") &&
         !editor.isActive("bulletList") &&
         !editor.isActive("orderedList"),
     },
-    {
-      name: "H1",
-      icon: Heading1,
-      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
-    },
-    {
-      name: "H2",
-      icon: Heading2,
-      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
-    },
-    {
-      name: "H3",
-      icon: Heading3,
-      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
-    },
-    {
-      name: "To-do List",
-      icon: CheckSquare,
-      command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskItem"),
-    },
-    {
-      name: "Bullet List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      name: "Numbered List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
-    },
-    {
-      name: "Quote",
-      icon: TextQuote,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-      isActive: () => editor.isActive("blockquote"),
-    },
-    {
-      name: "Code",
-      icon: Code,
-      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
-    },
+    HeadingOneItem(editor),
+    HeadingTwoItem(editor),
+    HeadingThreeItem(editor),
+    TodoListItem(editor),
+    BulletListItem(editor),
+    NumberedListItem(editor),
+    QuoteItem(editor),
+    CodeItem(editor),
   ];
 
   const activeItem = items.filter((item) => item.isActive()).pop() ?? {
@@ -111,7 +74,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
               }}
               className={cn(
                 "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
-                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+                {
+                  "bg-custom-primary-100/5 text-custom-text-100":
+                    activeItem.name === item.name,
+                },
               )}
             >
               <div className="flex items-center space-x-2">
diff --git a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
new file mode 100644
index 000000000..f6ccdddf5
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@@ -0,0 +1,70 @@
+"use client";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
+import * as React from "react";
+
+interface IRichTextReadOnlyEditor {
+  value: string;
+  editorContentCustomClassNames?: string;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  mentionHighlights?: string[];
+}
+
+interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const RichReadOnlyEditor = ({
+  editorContentCustomClassNames,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  value,
+  forwardedRef,
+  mentionHighlights,
+}: RichTextReadOnlyEditorProps) => {
+  const editor = useReadOnlyEditor({
+    value,
+    forwardedRef,
+    mentionHighlights,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const RichReadOnlyEditorWithRef = React.forwardRef<
+  EditorHandle,
+  IRichTextReadOnlyEditor
+>((props, ref) => <RichReadOnlyEditor {...props} forwardedRef={ref} />);
+
+RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef";
+
+export { RichReadOnlyEditor, RichReadOnlyEditorWithRef };
diff --git a/packages/editor/rich-text-editor/tailwind.config.js b/packages/editor/rich-text-editor/tailwind.config.js
new file mode 100644
index 000000000..f32063158
--- /dev/null
+++ b/packages/editor/rich-text-editor/tailwind.config.js
@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};
diff --git a/packages/editor/rich-text-editor/tsconfig.json b/packages/editor/rich-text-editor/tsconfig.json
new file mode 100644
index 000000000..57d0e9a74
--- /dev/null
+++ b/packages/editor/rich-text-editor/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/rich-text-editor/tsup.config.ts b/packages/editor/rich-text-editor/tsup.config.ts
new file mode 100644
index 000000000..5e89e04af
--- /dev/null
+++ b/packages/editor/rich-text-editor/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: false,
+  external: ["react"],
+  injectStyle: true,
+  ...options,
+}));
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 12a7ab8c8..11e970d0e 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,5 +1,6 @@
 {
   "name": "eslint-config-custom",
+  "private": true,
   "version": "0.13.2",
   "main": "index.js",
   "license": "MIT",
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
index 6edaa0ec4..286dfc3b6 100644
--- a/packages/tailwind-config-custom/package.json
+++ b/packages/tailwind-config-custom/package.json
@@ -3,8 +3,14 @@
   "version": "0.13.2",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
+  "private": true,
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10",
-    "tailwindcss-animate": "^1.0.7"
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "tailwindcss": "^3.2.7",
+    "tailwindcss-animate": "^1.0.6"
   }
 }
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 061168c4f..5aef561e9 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -1,14 +1,20 @@
 const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
-  content: [
-    "./components/**/*.tsx",
-    "./constants/**/*.{js,ts,jsx,tsx}",
-    "./layouts/**/*.tsx",
-    "./pages/**/*.tsx",
-    "./ui/**/*.tsx",
-  ],
+  content: {
+    relative: true,
+    files: [
+      "./components/**/*.tsx",
+      "./constants/**/*.{js,ts,jsx,tsx}",
+      "./layouts/**/*.tsx",
+      "./pages/**/*.tsx",
+      "./ui/**/*.tsx",
+      "../packages/ui/**/*.{js,ts,jsx,tsx}",
+      "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
+    ],
+  },
   theme: {
     extend: {
       boxShadow: {
@@ -168,7 +174,7 @@ module.exports = {
               DEFAULT: convertToRGB("--color-sidebar-border-200"),
             },
           },
-          backdrop: "#131313",
+          backdrop: "rgba(0, 0, 0, 0.25)",
         },
       },
       keyframes: {
@@ -180,6 +186,10 @@ module.exports = {
           "0%": { right: "-20rem" },
           "100%": { right: "0" },
         },
+        "bar-loader": {
+          from: { left: "-100%" },
+          to: { left: "100%" },
+        },
       },
       typography: ({ theme }) => ({
         brand: {
@@ -203,6 +213,146 @@ module.exports = {
           },
         },
       }),
+      screens: {
+        "3xl": "1792px",
+      },
+      // scale down font sizes to 90% of default
+      fontSize: {
+        xs: "0.675rem",
+        sm: "0.7875rem",
+        base: "0.9rem",
+        lg: "1.0125rem",
+        xl: "1.125rem",
+        "2xl": "1.35rem",
+        "3xl": "1.6875rem",
+        "4xl": "2.25rem",
+        "5xl": "2.7rem",
+        "6xl": "3.375rem",
+        "7xl": "4.05rem",
+        "8xl": "5.4rem",
+        "9xl": "7.2rem",
+      },
+      // scale down spacing to 90% of default
+      padding: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      margin: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      space: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      gap: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
     },
     fontFamily: {
       custom: ["Inter", "sans-serif"],
diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
index d72a9f3a2..2825abe07 100644
--- a/packages/tsconfig/base.json
+++ b/packages/tsconfig/base.json
@@ -16,5 +16,7 @@
     "skipLibCheck": true,
     "strict": true
   },
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json
index bdd954367..211c87d8d 100644
--- a/packages/tsconfig/react-library.json
+++ b/packages/tsconfig/react-library.json
@@ -3,9 +3,10 @@
   "display": "React Library",
   "extends": "./base.json",
   "compilerOptions": {
-    "jsx": "react",
-    "lib": ["ES2015"],
+    "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..72413eb7c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,23 +1,44 @@
 {
-  "name": "ui",
-  "version": "0.13.2",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "name": "@plane/ui",
+  "description": "UI components shared across multiple apps internally",
+  "private": true,
+  "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.ts --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.ts --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/react-color": "^3.0.9",
+    "@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": "*",
+    "tsconfig": "*",
+    "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",
+    "@popperjs/core": "^2.11.8",
+    "react-color": "^2.19.3",
+    "react-popper": "^2.3.0"
   }
 }
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
new file mode 100644
index 000000000..25a3c76fc
--- /dev/null
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+// ui
+import { Tooltip } from "../tooltip";
+// types
+import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
+
+type Props = {
+  /**
+   * The children of the avatar group.
+   * These should ideally should be `Avatar` components
+   */
+  children: React.ReactNode;
+  /**
+   * The maximum number of avatars to display.
+   * If the number of children exceeds this value, the additional avatars will be replaced by a count of the remaining avatars.
+   * @default 2
+   */
+  max?: number;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+};
+
+export const AvatarGroup: React.FC<Props> = (props) => {
+  const { children, max = 2, showTooltip = true, size = "md" } = props;
+
+  // calculate total length of avatars inside the group
+  const totalAvatars = React.Children.toArray(children).length;
+
+  // if avatars are equal to max + 1, then we need to show the last avatar as well, if avatars are more than max + 1, then we need to show the count of the remaining avatars
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+
+  // slice the children to the maximum number of avatars
+  const avatars = React.Children.toArray(children).slice(0, maxAvatarsToRender);
+
+  // assign the necessary props from the AvatarGroup component to the Avatar components
+  const avatarsWithUpdatedProps = avatars.map((avatar) => {
+    const updatedProps: Partial<Props> = {
+      showTooltip,
+      size,
+    };
+
+    return React.cloneElement(avatar as React.ReactElement, updatedProps);
+  });
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <div className={`flex ${sizeInfo.spacing}`}>
+      {avatarsWithUpdatedProps.map((avatar, index) => (
+        <div
+          key={index}
+          className="ring-1 ring-custom-background-100 rounded-full"
+        >
+          {avatar}
+        </div>
+      ))}
+      {maxAvatarsToRender < totalAvatars && (
+        <Tooltip
+          tooltipContent={`${totalAvatars} total`}
+          disabled={!showTooltip}
+        >
+          <div
+            className={`${
+              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
+            } ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
+            style={
+              isAValidNumber(size)
+                ? {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                  }
+                : {}
+            }
+          >
+            +{totalAvatars - max}
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
new file mode 100644
index 000000000..431d693c9
--- /dev/null
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+// ui
+import { Tooltip } from "../tooltip";
+
+export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+
+type Props = {
+  /**
+   * The name of the avatar which will be displayed on the tooltip
+   */
+  name?: string;
+  /**
+   * The background color if the avatar image fails to load
+   */
+  fallbackBackgroundColor?: string;
+  /**
+   * The text to display if the avatar image fails to load
+   */
+  fallbackText?: string;
+  /**
+   * The text color if the avatar image fails to load
+   */
+  fallbackTextColor?: string;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+  /**
+   * The shape of the avatar
+   * Possible values: "circle", "square"
+   * @default "circle"
+   */
+  shape?: "circle" | "square";
+  /**
+   * The source of the avatar image
+   */
+  src?: string;
+  /**
+   * The custom CSS class name to apply to the component
+   */
+  className?: string;
+};
+
+/**
+ * Get the size details based on the size prop
+ * @param size The size of the avatar
+ * @returns The size details
+ */
+export const getSizeInfo = (size: TAvatarSize) => {
+  switch (size) {
+    case "sm":
+      return {
+        avatarSize: "h-4 w-4",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+    case "md":
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+    case "base":
+      return {
+        avatarSize: "h-6 w-6",
+        fontSize: "text-sm",
+        spacing: "-space-x-1.5",
+      };
+    case "lg":
+      return {
+        avatarSize: "h-7 w-7",
+        fontSize: "text-sm",
+        spacing: "-space-x-1.5",
+      };
+    default:
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+  }
+};
+
+/**
+ * Get the border radius based on the shape prop
+ * @param shape The shape of the avatar
+ * @returns The border radius
+ */
+export const getBorderRadius = (shape: "circle" | "square") => {
+  switch (shape) {
+    case "circle":
+      return "rounded-full";
+    case "square":
+      return "rounded";
+    default:
+      return "rounded-full";
+  }
+};
+
+/**
+ * Check if the value is a valid number
+ * @param value The value to check
+ * @returns Whether the value is a valid number or not
+ */
+export const isAValidNumber = (value: any) => {
+  return typeof value === "number" && !isNaN(value);
+};
+
+export const Avatar: React.FC<Props> = (props) => {
+  const {
+    name,
+    fallbackBackgroundColor,
+    fallbackText,
+    fallbackTextColor,
+    showTooltip = true,
+    size = "md",
+    shape = "circle",
+    src,
+    className = "",
+  } = props;
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <Tooltip
+      tooltipContent={fallbackText ?? name ?? "?"}
+      disabled={!showTooltip}
+    >
+      <div
+        className={`${
+          !isAValidNumber(size) ? sizeInfo.avatarSize : ""
+        } overflow-hidden grid place-items-center ${getBorderRadius(shape)}`}
+        style={
+          isAValidNumber(size)
+            ? {
+                height: `${size}px`,
+                width: `${size}px`,
+              }
+            : {}
+        }
+      >
+        {src ? (
+          <img
+            src={src}
+            className={`h-full w-full ${getBorderRadius(shape)} ${className}`}
+            alt={name}
+          />
+        ) : (
+          <div
+            className={`${
+              sizeInfo.fontSize
+            } grid place-items-center h-full w-full ${getBorderRadius(
+              shape,
+            )} ${className}`}
+            style={{
+              backgroundColor:
+                fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+              color: fallbackTextColor ?? "#ffffff",
+            }}
+          >
+            {name ? name[0].toUpperCase() : fallbackText ?? "?"}
+          </div>
+        )}
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/packages/ui/src/avatar/index.ts b/packages/ui/src/avatar/index.ts
new file mode 100644
index 000000000..3ccfbeca0
--- /dev/null
+++ b/packages/ui/src/avatar/index.ts
@@ -0,0 +1,2 @@
+export * from "./avatar-group";
+export * from "./avatar";
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 000000000..94f317825
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+
+// icons
+import { ChevronRight } from "lucide-react";
+// components
+import { Tooltip } from "../tooltip";
+
+type BreadcrumbsProps = {
+  children: any;
+};
+
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
+  <div className="flex items-center space-x-2">
+    {React.Children.map(children, (child, index) => (
+      <div key={index} className="flex items-center flex-wrap gap-2.5">
+        {child}
+        {index !== React.Children.count(children) - 1 && (
+          <ChevronRight
+            className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+type Props = {
+  type?: "text" | "component";
+  component?: React.ReactNode;
+  label?: string;
+  icon?: React.ReactNode;
+  link?: string;
+};
+const BreadcrumbItem: React.FC<Props> = (props) => {
+  const { type = "text", component, label, icon, link } = props;
+  return (
+    <>
+      {type != "text" ? (
+        <div className="flex items-center space-x-2">{component}</div>
+      ) : (
+        <Tooltip tooltipContent={label} position="bottom">
+          <li className="flex items-center space-x-2">
+            <div className="flex items-center flex-wrap gap-2.5">
+              {link ? (
+                <a
+                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+                  href={link}
+                >
+                  {icon && (
+                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center !text-[1rem]">
+                      {icon}
+                    </div>
+                  )}
+                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
+                    {label}
+                  </div>
+                </a>
+              ) : (
+                <div className="flex items-center gap-1 text-sm font-medium text-custom-text-100 cursor-default">
+                  {icon && (
+                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center">
+                      {icon}
+                    </div>
+                  )}
+                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
+                    {label}
+                  </div>
+                </div>
+              )}
+            </div>
+          </li>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
+export { Breadcrumbs, BreadcrumbItem };
diff --git a/packages/ui/src/breadcrumbs/index.ts b/packages/ui/src/breadcrumbs/index.ts
new file mode 100644
index 000000000..669f55757
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from "./breadcrumbs";
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
new file mode 100644
index 000000000..d7377bcf8
--- /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, { strokeWidth: 2 })}
+          </div>
+        )}
+        {children}
+        {appendIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(appendIcon, { strokeWidth: 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..48b1fc94a
--- /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.ts b/packages/ui/src/button/index.ts
new file mode 100644
index 000000000..f1a2d03d4
--- /dev/null
+++ b/packages/ui/src/button/index.ts
@@ -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/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
new file mode 100644
index 000000000..0e8d50064
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -0,0 +1,152 @@
+import * as React from "react";
+
+// react-poppper
+import { usePopper } from "react-popper";
+// headless ui
+import { Menu } from "@headlessui/react";
+// type
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
+// icons
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+const CustomMenu = (props: ICustomMenuDropdownProps) => {
+  const {
+    buttonClassName = "",
+    customButtonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    verticalEllipsis = false,
+    width = "auto",
+    menuButtonOnClick,
+  } = props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={menuButtonOnClick}
+                className={customButtonClassName}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    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"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal
+                      className={`h-3.5 w-3.5 ${
+                        verticalEllipsis ? "rotate-90" : ""
+                      }`}
+                    />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    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"
+                    } ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items className="fixed z-10">
+            <div
+              className={`overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                maxHeight === "lg"
+                  ? "max-h-60"
+                  : maxHeight === "md"
+                  ? "max-h-48"
+                  : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                  ? "max-h-28"
+                  : ""
+              } ${
+                width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+              } ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              {children}
+            </div>
+          </Menu.Items>
+        </>
+      )}
+    </Menu>
+  );
+};
+
+const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+  const { children, onClick, className = "" } = props;
+  return (
+    <Menu.Item as="div">
+      {({ active, close }) => (
+        <button
+          type="button"
+          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+            active ? "bg-custom-background-80" : ""
+          } ${className}`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )}
+    </Menu.Item>
+  );
+};
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
new file mode 100644
index 000000000..0fb4c67cf
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -0,0 +1,204 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { ICustomSearchSelectProps } from "./helper";
+
+export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    className = "",
+    customButton,
+    placement,
+    disabled = false,
+    footerOption,
+    input = false,
+    label,
+    maxHeight = "md",
+    multiple = false,
+    noChevron = false,
+    onChange,
+    options,
+    onOpen,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) =>
+          option.query.toLowerCase().includes(query.toLowerCase()),
+        );
+
+  const comboboxProps: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox
+      as="div"
+      className={`relative flex-shrink-0 text-left ${className}`}
+      {...comboboxProps}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open && onOpen) onOpen();
+
+        return (
+          <>
+            {customButton ? (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  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"
+                  }  ${customButtonClassName}`}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
+            ) : (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
+                    input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
+                  } ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  } ${buttonClassName}`}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                  )}
+                </button>
+              </Combobox.Button>
+            )}
+            <Combobox.Options as={React.Fragment}>
+              <div
+                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+                } ${optionsClassName}`}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <Search className="h-3 w-3 text-custom-text-200" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Type to search..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div
+                  className={`mt-2 space-y-1 ${
+                    maxHeight === "lg"
+                      ? "max-h-60"
+                      : maxHeight === "md"
+                      ? "max-h-48"
+                      : maxHeight === "rg"
+                      ? "max-h-36"
+                      : maxHeight === "sm"
+                      ? "max-h-28"
+                      : ""
+                  } overflow-y-scroll`}
+                >
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option
+                          key={option.value}
+                          value={option.value}
+                          className={({ active, selected }) =>
+                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                              active || selected
+                                ? "bg-custom-background-80"
+                                : ""
+                            } ${
+                              selected
+                                ? "text-custom-text-100"
+                                : "text-custom-text-200"
+                            }`
+                          }
+                        >
+                          {({ active, selected }) => (
+                            <>
+                              {option.content}
+                              {multiple ? (
+                                <div
+                                  className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
+                                    active || selected
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  }`}
+                                >
+                                  <Check
+                                    className={`h-3 w-3 ${
+                                      selected ? "opacity-100" : "opacity-0"
+                                    }`}
+                                  />
+                                </div>
+                              ) : (
+                                <Check
+                                  className={`h-3 w-3 ${
+                                    selected ? "opacity-100" : "opacity-0"
+                                  }`}
+                                />
+                              )}
+                            </>
+                          )}
+                        </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>
+                {footerOption}
+              </div>
+            </Combobox.Options>
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
new file mode 100644
index 000000000..b62ff2cb3
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown } from "lucide-react";
+// types
+import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
+
+const CustomSelect = (props: ICustomSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    input = false,
+    label,
+    maxHeight = "md",
+    noChevron = false,
+    onChange,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className={`relative flex-shrink-0 text-left ${className}`}
+      disabled={disabled}
+    >
+      <>
+        {customButton ? (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              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"
+              }  ${customButtonClassName}`}
+            >
+              {customButton}
+            </button>
+          </Listbox.Button>
+        ) : (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
+                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
+              } ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {label}
+              {!noChevron && !disabled && (
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+              )}
+            </button>
+          </Listbox.Button>
+        )}
+      </>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+            maxHeight === "lg"
+              ? "max-h-60"
+              : maxHeight === "md"
+              ? "max-h-48"
+              : maxHeight === "rg"
+              ? "max-h-36"
+              : maxHeight === "sm"
+              ? "max-h-28"
+              : ""
+          } ${
+            width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+          } ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="space-y-1 p-2">{children}</div>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
+
+const Option = (props: ICustomSelectItemProps) => {
+  const { children, value, className } = props;
+  return (
+    <Listbox.Option
+      value={value}
+      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"
+        } ${className}`
+      }
+    >
+      {({ selected }) => (
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">{children}</div>
+          {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+        </div>
+      )}
+    </Listbox.Option>
+  );
+};
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
new file mode 100644
index 000000000..eac53b6e6
--- /dev/null
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -0,0 +1,70 @@
+// FIXME: fix this!!!
+import { Placement } from "@blueprintjs/popover2";
+
+export interface IDropdownProps {
+  customButtonClassName?: string;
+  buttonClassName?: string;
+  className?: string;
+  customButton?: JSX.Element;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | JSX.Element;
+  maxHeight?: "sm" | "rg" | "md" | "lg";
+  noChevron?: boolean;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  width?: "auto" | string;
+  placement?: Placement;
+}
+
+export interface ICustomMenuDropdownProps extends IDropdownProps {
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (...args: any) => void;
+}
+
+export interface ICustomSelectProps extends IDropdownProps {
+  children: React.ReactNode;
+  value: any;
+  onChange: any;
+}
+
+interface CustomSearchSelectProps {
+  footerOption?: JSX.Element;
+  onChange: any;
+  options:
+    | {
+        value: any;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+}
+
+interface SingleValueProps {
+  multiple?: false;
+  value: any;
+}
+
+interface MultipleValuesProps {
+  multiple?: true;
+  value: any[] | null;
+}
+
+export type ICustomSearchSelectProps = IDropdownProps &
+  CustomSearchSelectProps &
+  (SingleValueProps | MultipleValuesProps);
+
+export interface ICustomMenuItemProps {
+  children: React.ReactNode;
+  onClick?: (args?: any) => void;
+  className?: string;
+}
+
+export interface ICustomSelectItemProps {
+  children: React.ReactNode;
+  value: any;
+  className?: string;
+}
diff --git a/packages/ui/src/dropdowns/index.ts b/packages/ui/src/dropdowns/index.ts
new file mode 100644
index 000000000..0ad9cbb22
--- /dev/null
+++ b/packages/ui/src/dropdowns/index.ts
@@ -0,0 +1,3 @@
+export * from "./custom-menu";
+export * from "./custom-select";
+export * from "./custom-search-select";
diff --git a/packages/ui/src/form-fields/index.ts b/packages/ui/src/form-fields/index.ts
new file mode 100644
index 000000000..9cac73428
--- /dev/null
+++ b/packages/ui/src/form-fields/index.ts
@@ -0,0 +1,3 @@
+export * from "./input";
+export * from "./textarea";
+export * from "./input-color-picker";
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
new file mode 100644
index 000000000..0a91a8838
--- /dev/null
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { ColorResult, SketchPicker } from "react-color";
+// components
+import { Input } from "./input";
+import { usePopper } from "react-popper";
+import { Button } from "../button";
+
+export interface InputColorPickerProps {
+  hasError: boolean;
+  value: string | undefined;
+  onChange: (value: string) => void;
+  name: string;
+  className?: string;
+  style?: React.CSSProperties;
+  placeholder: string;
+}
+
+export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
+  const { value, hasError, onChange, name, className, style, placeholder } =
+    props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
+  const handleColorChange = (newColor: ColorResult) => {
+    const { hex } = newColor;
+    onChange(hex);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        id={name}
+        name={name}
+        type="text"
+        value={value}
+        onChange={handleInputChange}
+        hasError={hasError}
+        placeholder={placeholder}
+        className={`border-[0.5px] border-custom-border-200 ${className}`}
+        style={style}
+      />
+
+      <Popover
+        as="div"
+        className="absolute top-1/2 -translate-y-1/2 right-1 z-10"
+      >
+        {({ open }) => {
+          if (open) {
+          }
+          return (
+            <>
+              <Popover.Button as={React.Fragment}>
+                <Button
+                  ref={setReferenceElement}
+                  variant="neutral-primary"
+                  size="sm"
+                  className="border-none !bg-transparent"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    className="lucide lucide-palette"
+                  >
+                    <circle cx="13.5" cy="6.5" r=".5" />
+                    <circle cx="17.5" cy="10.5" r=".5" />
+                    <circle cx="8.5" cy="7.5" r=".5" />
+                    <circle cx="6.5" cy="12.5" r=".5" />
+                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+                  </svg>
+                </Button>
+              </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="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    <SketchPicker color={value} onChange={handleColorChange} />
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          );
+        }}
+      </Popover>
+    </div>
+  );
+};
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
new file mode 100644
index 000000000..501af5c7d
--- /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-[0.5px] 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..8490326b8
--- /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-[0.5px] 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/icons/admin-profile-icon.tsx b/packages/ui/src/icons/admin-profile-icon.tsx
new file mode 100644
index 000000000..5adf3d1c5
--- /dev/null
+++ b/packages/ui/src/icons/admin-profile-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AdminProfileIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 14C13.6569 14 15 12.6569 15 11C15 9.34315 13.6569 8 12 8C10.3431 8 9 9.34315 9 11C9 12.6569 10.3431 14 12 14Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/archive-icon.tsx b/packages/ui/src/icons/archive-icon.tsx
new file mode 100644
index 000000000..a3ce6ebca
--- /dev/null
+++ b/packages/ui/src/icons/archive-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ArchiveIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M15 18L12 21L9 18" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 21L12 12" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocked-icon.tsx b/packages/ui/src/icons/blocked-icon.tsx
new file mode 100644
index 000000000..b3f9226a9
--- /dev/null
+++ b/packages/ui/src/icons/blocked-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockedIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+      fill="#F76659"
+    />
+    <path
+      d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+      fill="#F76659"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocker-icon.tsx b/packages/ui/src/icons/blocker-icon.tsx
new file mode 100644
index 000000000..d554f3784
--- /dev/null
+++ b/packages/ui/src/icons/blocker-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockerIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+      fill="#F7AE59"
+    />
+    <path
+      d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+      fill="#F7AE59"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-after-icon.tsx b/packages/ui/src/icons/calendar-after-icon.tsx
new file mode 100644
index 000000000..7321c1054
--- /dev/null
+++ b/packages/ui/src/icons/calendar-after-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarAfterIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_3309_70901)">
+      <path
+        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70901">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-before-icon.tsx b/packages/ui/src/icons/calendar-before-icon.tsx
new file mode 100644
index 000000000..5b6b6d72c
--- /dev/null
+++ b/packages/ui/src/icons/calendar-before-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_3309_70907)">
+      <path
+        d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+      <g clipPath="url(#clip1_3309_70907)">
+        <path
+          d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
+          fill="rgb(var(--color-text-200))"
+          stroke="rgb(var(--color-text-200))"
+          strokeWidth="0.5"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70907">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_3309_70907">
+        <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/center-panel-icon.tsx b/packages/ui/src/icons/center-panel-icon.tsx
new file mode 100644
index 000000000..321b61b88
--- /dev/null
+++ b/packages/ui/src/icons/center-panel-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CenterPanelIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/copy-icon.tsx b/packages/ui/src/icons/copy-icon.tsx
new file mode 100644
index 000000000..02f8e2ba1
--- /dev/null
+++ b/packages/ui/src/icons/copy-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CopyIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M20 8H10C8.89543 8 8 8.89543 8 10V20C8 21.1046 8.89543 22 10 22H20C21.1046 22 22 21.1046 22 20V10C22 8.89543 21.1046 8 20 8Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4 16C2.9 16 2 15.1 2 14V4C2 2.9 2.9 2 4 2H14C15.1 2 16 2.9 16 4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/create-icon.tsx b/packages/ui/src/icons/create-icon.tsx
new file mode 100644
index 000000000..d13d5ca5f
--- /dev/null
+++ b/packages/ui/src/icons/create-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CreateIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M16 5H22" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M19 2V8" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
new file mode 100644
index 000000000..53ea05906
--- /dev/null
+++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 16 16"
+    className={`${className} stroke-1`}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <circle
+      cx="8.33333"
+      cy="8.33333"
+      r="5.33333"
+      stroke="currentColor"
+      stroke-linecap="round"
+    />
+    <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/contrast-icon.tsx b/packages/ui/src/icons/cycle/contrast-icon.tsx
new file mode 100644
index 000000000..7b51fd1e7
--- /dev/null
+++ b/packages/ui/src/icons/cycle/contrast-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ContrastIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/cycle-group-icon.tsx b/packages/ui/src/icons/cycle/cycle-group-icon.tsx
new file mode 100644
index 000000000..731d90702
--- /dev/null
+++ b/packages/ui/src/icons/cycle/cycle-group-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ContrastIcon } from "./contrast-icon";
+import { CircleDotFullIcon } from "./circle-dot-full-icon";
+import { CircleDotDashed, Circle } from "lucide-react";
+
+import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";
+
+const iconComponents = {
+  current: ContrastIcon,
+  upcoming: CircleDotDashed,
+  completed: CircleDotFullIcon,
+  draft: Circle,
+};
+
+export const CycleGroupIcon: React.FC<ICycleGroupIcon> = ({
+  className = "",
+  color,
+  cycleGroup,
+  height = "12px",
+  width = "12px",
+}) => {
+  const CycleIconComponent = iconComponents[cycleGroup] || ContrastIcon;
+
+  return (
+    <CycleIconComponent
+      height={height}
+      width={width}
+      color={color ?? CYCLE_GROUP_COLORS[cycleGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+};
diff --git a/packages/ui/src/icons/cycle/double-circle-icon.tsx b/packages/ui/src/icons/cycle/double-circle-icon.tsx
new file mode 100644
index 000000000..a191b71a6
--- /dev/null
+++ b/packages/ui/src/icons/cycle/double-circle-icon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const DoubleCircleIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <circle cx="12" cy="12" r="9" />
+    <circle cx="12" cy="12" r="5.625" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/helper.tsx b/packages/ui/src/icons/cycle/helper.tsx
new file mode 100644
index 000000000..ec91cc2c2
--- /dev/null
+++ b/packages/ui/src/icons/cycle/helper.tsx
@@ -0,0 +1,18 @@
+export interface ICycleGroupIcon {
+  className?: string;
+  color?: string;
+  cycleGroup: TCycleGroups;
+  height?: string;
+  width?: string;
+}
+
+export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";
+
+export const CYCLE_GROUP_COLORS: {
+  [key in TCycleGroups]: string;
+} = {
+  current: "#F59E0B",
+  upcoming: "#3F76FF",
+  completed: "#16A34A",
+  draft: "#525252",
+};
diff --git a/packages/ui/src/icons/cycle/index.ts b/packages/ui/src/icons/cycle/index.ts
new file mode 100644
index 000000000..e74c8ff8c
--- /dev/null
+++ b/packages/ui/src/icons/cycle/index.ts
@@ -0,0 +1,5 @@
+export * from "./double-circle-icon";
+export * from "./circle-dot-full-icon";
+export * from "./contrast-icon";
+export * from "./circle-dot-full-icon";
+export * from "./cycle-group-icon";
diff --git a/packages/ui/src/icons/dice-icon.tsx b/packages/ui/src/icons/dice-icon.tsx
new file mode 100644
index 000000000..7ab154cbe
--- /dev/null
+++ b/packages/ui/src/icons/dice-icon.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DiceIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/discord-icon.tsx b/packages/ui/src/icons/discord-icon.tsx
new file mode 100644
index 000000000..6903b46d0
--- /dev/null
+++ b/packages/ui/src/icons/discord-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DiscordIcon: React.FC<ISvgIcons> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_229)">
+      <path
+        fill={color ? color : "rgb(var(--color-text-200))"}
+        d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_229">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/external-link-icon.tsx b/packages/ui/src/icons/external-link-icon.tsx
new file mode 100644
index 000000000..612e6af1e
--- /dev/null
+++ b/packages/ui/src/icons/external-link-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ExternalLinkIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-[1.5]`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M15 3H21V9" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M10 14L21 3" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/full-screen-panel-icon.tsx b/packages/ui/src/icons/full-screen-panel-icon.tsx
new file mode 100644
index 000000000..da21aca1f
--- /dev/null
+++ b/packages/ui/src/icons/full-screen-panel-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const FullScreenPanelIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/github-icon.tsx b/packages/ui/src/icons/github-icon.tsx
new file mode 100644
index 000000000..b979e75b0
--- /dev/null
+++ b/packages/ui/src/icons/github-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const GithubIcon: React.FC<ISvgIcons> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_232)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+        fill={color ? color : "rgb(var(--color-text-200))"}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_232">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
new file mode 100644
index 000000000..4cb4e30f7
--- /dev/null
+++ b/packages/ui/src/icons/index.ts
@@ -0,0 +1,27 @@
+export * from "./user-group-icon";
+export * from "./dice-icon";
+export * from "./layers-icon";
+export * from "./photo-filter-icon";
+export * from "./archive-icon";
+export * from "./admin-profile-icon";
+export * from "./create-icon";
+export * from "./subscribe-icon";
+export * from "./external-link-icon";
+export * from "./copy-icon";
+export * from "./layer-stack";
+export * from "./side-panel-icon";
+export * from "./center-panel-icon";
+export * from "./full-screen-panel-icon";
+export * from "./priority-icon";
+export * from "./state";
+export * from "./blocked-icon";
+export * from "./blocker-icon";
+export * from "./related-icon";
+export * from "./module";
+export * from "./cycle";
+export * from "./github-icon";
+export * from "./discord-icon";
+export * from "./transfer-icon";
+export * from "./running-icon";
+export * from "./calendar-before-icon";
+export * from "./calendar-after-icon";
diff --git a/packages/ui/src/icons/layer-stack.tsx b/packages/ui/src/icons/layer-stack.tsx
new file mode 100644
index 000000000..eaf8a1d3e
--- /dev/null
+++ b/packages/ui/src/icons/layer-stack.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LayerStackIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/layers-icon.tsx b/packages/ui/src/icons/layers-icon.tsx
new file mode 100644
index 000000000..d0ec6ebc1
--- /dev/null
+++ b/packages/ui/src/icons/layers-icon.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LayersIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_7258_81938)">
+      <path
+        d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_7258_81938">
+        <rect
+          width="24"
+          height="24"
+          fill="white"
+          transform="translate(24) rotate(90)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/backlog.tsx b/packages/ui/src/icons/module/backlog.tsx
new file mode 100644
index 000000000..22d87cd28
--- /dev/null
+++ b/packages/ui/src/icons/module/backlog.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleBacklogIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/cancelled.tsx b/packages/ui/src/icons/module/cancelled.tsx
new file mode 100644
index 000000000..97103bb66
--- /dev/null
+++ b/packages/ui/src/icons/module/cancelled.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill="#ef4444"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/completed.tsx b/packages/ui/src/icons/module/completed.tsx
new file mode 100644
index 000000000..d70e459f3
--- /dev/null
+++ b/packages/ui/src/icons/module/completed.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill="#16a34a"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/in-progress.tsx b/packages/ui/src/icons/module/in-progress.tsx
new file mode 100644
index 000000000..2fdcdbe69
--- /dev/null
+++ b/packages/ui/src/icons/module/in-progress.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleInProgressIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/index.ts b/packages/ui/src/icons/module/index.ts
new file mode 100644
index 000000000..e82014b2f
--- /dev/null
+++ b/packages/ui/src/icons/module/index.ts
@@ -0,0 +1,7 @@
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./in-progress";
+export * from "./module-status-icon";
+export * from "./paused";
+export * from "./planned";
diff --git a/packages/ui/src/icons/module/module-status-icon.tsx b/packages/ui/src/icons/module/module-status-icon.tsx
new file mode 100644
index 000000000..5fcb65de4
--- /dev/null
+++ b/packages/ui/src/icons/module/module-status-icon.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { ModuleBacklogIcon } from "./backlog";
+import { ModuleCancelledIcon } from "./cancelled";
+import { ModuleCompletedIcon } from "./completed";
+import { ModuleInProgressIcon } from "./in-progress";
+import { ModulePausedIcon } from "./paused";
+import { ModulePlannedIcon } from "./planned";
+
+export type TModuleStatus =
+  | "backlog"
+  | "planned"
+  | "in-progress"
+  | "paused"
+  | "completed"
+  | "cancelled";
+
+type Props = {
+  status: TModuleStatus;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const ModuleStatusIcon: React.FC<Props> = ({
+  status,
+  className,
+  height = "12px",
+  width = "12px",
+}) => {
+  if (status === "backlog")
+    return (
+      <ModuleBacklogIcon className={className} height={height} width={width} />
+    );
+  else if (status === "cancelled")
+    return (
+      <ModuleCancelledIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "completed")
+    return (
+      <ModuleCompletedIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "in-progress")
+    return (
+      <ModuleInProgressIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "paused")
+    return (
+      <ModulePausedIcon className={className} height={height} width={width} />
+    );
+  else
+    return (
+      <ModulePlannedIcon className={className} height={height} width={width} />
+    );
+};
diff --git a/packages/ui/src/icons/module/paused.tsx b/packages/ui/src/icons/module/paused.tsx
new file mode 100644
index 000000000..eedc8ca8a
--- /dev/null
+++ b/packages/ui/src/icons/module/paused.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModulePausedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100275)">
+      <path
+        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+        fill="#525252"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100275">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/planned.tsx b/packages/ui/src/icons/module/planned.tsx
new file mode 100644
index 000000000..2ac67774b
--- /dev/null
+++ b/packages/ui/src/icons/module/planned.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModulePlannedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
+      fill="#3f76ff"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/photo-filter-icon.tsx b/packages/ui/src/icons/photo-filter-icon.tsx
new file mode 100644
index 000000000..473248b86
--- /dev/null
+++ b/packages/ui/src/icons/photo-filter-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const PhotoFilterIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
new file mode 100644
index 000000000..2c2e012e9
--- /dev/null
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+// icons
+import {
+  AlertCircle,
+  Ban,
+  SignalHigh,
+  SignalLow,
+  SignalMedium,
+} from "lucide-react";
+
+// types
+import { IPriorityIcon } from "./type";
+
+export const PriorityIcon: React.FC<IPriorityIcon> = ({
+  priority,
+  className = "",
+}) => {
+  if (!className || className === "") className = "h-3.5 w-3.5";
+
+  // Convert to lowercase for string comparison
+  const lowercasePriority = priority?.toLowerCase();
+
+  return (
+    <>
+      {lowercasePriority === "urgent" ? (
+        <AlertCircle className={`text-red-500 ${className}`} />
+      ) : lowercasePriority === "high" ? (
+        <SignalHigh className={`text-orange-500 ${className}`} />
+      ) : lowercasePriority === "medium" ? (
+        <SignalMedium className={`text-yellow-500 ${className}`} />
+      ) : lowercasePriority === "low" ? (
+        <SignalLow className={`text-green-500 ${className}`} />
+      ) : (
+        <Ban className={`text-custom-text-200 ${className}`} />
+      )}
+    </>
+  );
+};
diff --git a/packages/ui/src/icons/related-icon.tsx b/packages/ui/src/icons/related-icon.tsx
new file mode 100644
index 000000000..2507fe1e8
--- /dev/null
+++ b/packages/ui/src/icons/related-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RelatedIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.125 19.25L9 16.125L12.125 13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/running-icon.tsx b/packages/ui/src/icons/running-icon.tsx
new file mode 100644
index 000000000..9908fc17f
--- /dev/null
+++ b/packages/ui/src/icons/running-icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RunningIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/side-panel-icon.tsx b/packages/ui/src/icons/side-panel-icon.tsx
new file mode 100644
index 000000000..8185da768
--- /dev/null
+++ b/packages/ui/src/icons/side-panel-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const SidePanelIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/backlog-group-icon.tsx b/packages/ui/src/icons/state/backlog-group-icon.tsx
new file mode 100644
index 000000000..fce4f0024
--- /dev/null
+++ b/packages/ui/src/icons/state/backlog-group-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const BacklogGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/cancelled-group-icon.tsx b/packages/ui/src/icons/state/cancelled-group-icon.tsx
new file mode 100644
index 000000000..c18a2570a
--- /dev/null
+++ b/packages/ui/src/icons/state/cancelled-group-icon.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CancelledGroupIcon: React.FC<ISvgIcons> = ({
+  className = "",
+  color = "#ef4444",
+  height = "20",
+  width = "20",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/completed-group-icon.tsx b/packages/ui/src/icons/state/completed-group-icon.tsx
new file mode 100644
index 000000000..b53292687
--- /dev/null
+++ b/packages/ui/src/icons/state/completed-group-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CompletedGroupIcon: React.FC<ISvgIcons> = ({
+  className = "",
+  color = "#16a34a",
+  height = "20",
+  width = "20",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/helper.tsx b/packages/ui/src/icons/state/helper.tsx
new file mode 100644
index 000000000..469644067
--- /dev/null
+++ b/packages/ui/src/icons/state/helper.tsx
@@ -0,0 +1,24 @@
+export interface IStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TStateGroups;
+  height?: string;
+  width?: string;
+}
+
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
+
+export const STATE_GROUP_COLORS: {
+  [key in TStateGroups]: string;
+} = {
+  backlog: "#d9d9d9",
+  unstarted: "#3f76ff",
+  started: "#f59e0b",
+  completed: "#16a34a",
+  cancelled: "#dc2626",
+};
diff --git a/packages/ui/src/icons/state/index.ts b/packages/ui/src/icons/state/index.ts
new file mode 100644
index 000000000..0e5fdadd6
--- /dev/null
+++ b/packages/ui/src/icons/state/index.ts
@@ -0,0 +1,6 @@
+export * from "./backlog-group-icon";
+export * from "./cancelled-group-icon";
+export * from "./completed-group-icon";
+export * from "./started-group-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-group-icon";
diff --git a/packages/ui/src/icons/state/started-group-icon.tsx b/packages/ui/src/icons/state/started-group-icon.tsx
new file mode 100644
index 000000000..77f1d1609
--- /dev/null
+++ b/packages/ui/src/icons/state/started-group-icon.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const StartedGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/state-group-icon.tsx b/packages/ui/src/icons/state/state-group-icon.tsx
new file mode 100644
index 000000000..e771fff5e
--- /dev/null
+++ b/packages/ui/src/icons/state/state-group-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { BacklogGroupIcon } from "./backlog-group-icon";
+import { CancelledGroupIcon } from "./cancelled-group-icon";
+import { CompletedGroupIcon } from "./completed-group-icon";
+import { StartedGroupIcon } from "./started-group-icon";
+import { UnstartedGroupIcon } from "./unstarted-group-icon";
+import { IStateGroupIcon, STATE_GROUP_COLORS } from "./helper";
+
+const iconComponents = {
+  backlog: BacklogGroupIcon,
+  cancelled: CancelledGroupIcon,
+  completed: CompletedGroupIcon,
+  started: StartedGroupIcon,
+  unstarted: UnstartedGroupIcon,
+};
+
+export const StateGroupIcon: React.FC<IStateGroupIcon> = ({
+  className = "",
+  color,
+  stateGroup,
+  height = "12px",
+  width = "12px",
+}) => {
+  const StateIconComponent = iconComponents[stateGroup] || UnstartedGroupIcon;
+
+  return (
+    <StateIconComponent
+      height={height}
+      width={width}
+      color={color ?? STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+};
diff --git a/packages/ui/src/icons/state/unstarted-group-icon.tsx b/packages/ui/src/icons/state/unstarted-group-icon.tsx
new file mode 100644
index 000000000..5c62b1f12
--- /dev/null
+++ b/packages/ui/src/icons/state/unstarted-group-icon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const UnstartedGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#3a3a3a",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="7.4" stroke={color} strokeWidth="1.2" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/subscribe-icon.tsx b/packages/ui/src/icons/subscribe-icon.tsx
new file mode 100644
index 000000000..a4ea8713a
--- /dev/null
+++ b/packages/ui/src/icons/subscribe-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const SubscribeIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15 5.1C15 4.54305 15.2107 4.0089 15.5858 3.61508C15.9609 3.22125 16.4696 3 17 3C17.5304 3 18.0391 3.22125 18.4142 3.61508C18.7893 4.0089 19 4.54305 19 5.1C19 7.55 20 8.25 20 8.25H14C14 8.25 15 7.55 15 5.1Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.25 11C16.3238 11 16.4324 11 16.5643 11C16.6963 11 16.8467 11 17 11C17.1533 11 17.3037 11 17.4357 11C17.5676 11 17.6762 11 17.75 11"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/transfer-icon.tsx b/packages/ui/src/icons/transfer-icon.tsx
new file mode 100644
index 000000000..93f5b0002
--- /dev/null
+++ b/packages/ui/src/icons/transfer-icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const TransferIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/type.d.ts b/packages/ui/src/icons/type.d.ts
new file mode 100644
index 000000000..0261ab163
--- /dev/null
+++ b/packages/ui/src/icons/type.d.ts
@@ -0,0 +1,10 @@
+export interface ISvgIcons extends React.SVGAttributes<SVGElement> {
+  className?: string | undefined;
+}
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+export interface IPriorityIcon {
+  priority: TIssuePriorities | null;
+  className?: string;
+}
diff --git a/packages/ui/src/icons/user-group-icon.tsx b/packages/ui/src/icons/user-group-icon.tsx
new file mode 100644
index 000000000..bc0c54537
--- /dev/null
+++ b/packages/ui/src/icons/user-group-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const UserGroupIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 000000000..1d75c9271
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,10 @@
+export * from "./avatar";
+export * from "./breadcrumbs";
+export * from "./button";
+export * from "./dropdowns";
+export * from "./form-fields";
+export * from "./icons";
+export * from "./progress";
+export * from "./spinners";
+export * from "./tooltip";
+export * from "./loader";
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/circular-progress-indicator.tsx b/packages/ui/src/progress/circular-progress-indicator.tsx
new file mode 100644
index 000000000..7386e6632
--- /dev/null
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@@ -0,0 +1,102 @@
+import React, { Children } from "react";
+
+interface ICircularProgressIndicator {
+  size: number;
+  percentage: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  children?: React.ReactNode;
+}
+
+export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
+  props,
+) => {
+  const { size = 40, percentage = 25, strokeWidth = 6, children } = props;
+
+  const sqSize = size;
+  const radius = (size - strokeWidth) / 2;
+  const viewBox = `0 0 ${sqSize} ${sqSize}`;
+  const dashArray = radius * Math.PI * 2;
+  const dashOffset = dashArray - (dashArray * percentage) / 100;
+  return (
+    <div className="relative">
+      <svg width={size} height={size} viewBox={viewBox} fill="none">
+        <circle
+          className="fill-none stroke-custom-background-80"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={`${strokeWidth}px`}
+          style={{ filter: "url(#filter0_bi_377_19141)" }}
+        />
+        <defs>
+          <filter
+            id="filter0_bi_377_19141"
+            x="-3.57544"
+            y="-3.57422"
+            width="45.2227"
+            height="45.2227"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
+            <feComposite
+              in2="SourceAlpha"
+              operator="in"
+              result="effect1_backgroundBlur_377_19141"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_backgroundBlur_377_19141"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dx="1" dy="1" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect2_innerShadow_377_19141"
+            />
+          </filter>
+        </defs>
+        <circle
+          className="stroke-custom-primary-100 fill-none "
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={`${strokeWidth}px`}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          style={{
+            strokeDasharray: dashArray,
+            strokeDashoffset: dashOffset,
+          }}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <div
+        className="absolute"
+        style={{
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/progress/index.ts b/packages/ui/src/progress/index.ts
new file mode 100644
index 000000000..56d28cee7
--- /dev/null
+++ b/packages/ui/src/progress/index.ts
@@ -0,0 +1,4 @@
+export * from "./radial-progress";
+export * from "./progress-bar";
+export * from "./linear-progress-indicator";
+export * from "./circular-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..e7e952295
--- /dev/null
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+export interface ISpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export const Spinner: React.FC<ISpinner> = ({
+  height = "32px",
+  width = "32px",
+  className = "",
+  ...rest
+}) => (
+  <div role="status">
+    <svg
+      aria-hidden="true"
+      height={height}
+      width={width}
+      className={`mr-2 animate-spin fill-blue-600 text-custom-text-200 ${className}`}
+      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.ts b/packages/ui/src/tooltip/index.ts
new file mode 100644
index 000000000..3c61782ae
--- /dev/null
+++ b/packages/ui/src/tooltip/index.ts
@@ -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..96bf45aa3
--- /dev/null
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+// 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,
+}) => (
+  <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 bg-custom-background-100 text-custom-text-200 break-words overflow-hidden ${className}`}
+      >
+        {tooltipHeading && (
+          <h5 className="font-medium text-custom-text-100">{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/Dockerfile.dev b/space/Dockerfile.dev
new file mode 100644
index 000000000..d1128a588
--- /dev/null
+++ b/space/Dockerfile.dev
@@ -0,0 +1,11 @@
+FROM node:18-alpine
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+
+COPY . .
+RUN yarn global add turbo
+RUN yarn install
+EXPOSE 3000
+CMD ["yarn","dev", "--filter=space"]
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/space/components/accounts/onboarding-form.tsx b/space/components/accounts/onboarding-form.tsx
index 4cca97a64..c3cb972b2 100644
--- a/space/components/accounts/onboarding-form.tsx
+++ b/space/components/accounts/onboarding-form.tsx
@@ -1,14 +1,11 @@
 import { useEffect, Fragment } from "react";
 import { useRouter } from "next/router";
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// headless ui
+import { Controller, useForm } from "react-hook-form";
 import { Listbox, Transition } from "@headlessui/react";
-// icons
-import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronDown } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { USER_ROLES } from "constants/workspace";
 // hooks
@@ -57,18 +54,15 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
 
     const userService = new UserService();
 
-    await userService
-      .updateMe(payload)
-      .then((response) => {
-        userStore.setCurrentUser(response);
-        router.push(next_path?.toString() || "/");
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Details updated successfully.",
-        });
-      })
-      .catch((err) => {});
+    await userService.updateMe(payload).then((response) => {
+      userStore.setCurrentUser(response);
+      router.push(next_path?.toString() || "/");
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Details updated successfully.",
+      });
+    });
   };
 
   useEffect(() => {
@@ -132,7 +126,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                     className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
                   >
                     <span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
-                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
                   </Listbox.Button>
 
                   <Transition
@@ -163,7 +157,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                                 <div className="flex items-center gap-2">
                                   <span>{role.label}</span>
                                 </div>
-                                {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                                {selected && <Check className="h-3 w-3 flex-shrink-0" strokeWidth={2} />}
                               </div>
                             )}
                           </Listbox.Option>
diff --git a/space/components/accounts/sign-in.tsx b/space/components/accounts/sign-in.tsx
index 0c6810198..b55824e6c 100644
--- a/space/components/accounts/sign-in.tsx
+++ b/space/components/accounts/sign-in.tsx
@@ -116,7 +116,9 @@ export const SignInView = observer(() => {
           )}
 
           <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?.google_client_id && (
+              <GoogleLoginButton clientId={data.google_client_id} handleSignIn={handleGoogleSignIn} />
+            )}
           </div>
 
           <p className="pt-16 text-custom-text-200 text-sm text-center">
diff --git a/space/components/icons/index.ts b/space/components/icons/index.ts
deleted file mode 100644
index 28162f591..000000000
--- a/space/components/icons/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./state-group";
diff --git a/space/components/icons/state-group/backlog-state-icon.tsx b/space/components/icons/state-group/backlog-state-icon.tsx
deleted file mode 100644
index f2f62d24a..000000000
--- a/space/components/icons/state-group/backlog-state-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const BacklogStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["backlog"],
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
-  </svg>
-);
diff --git a/space/components/icons/state-group/cancelled-state-icon.tsx b/space/components/icons/state-group/cancelled-state-icon.tsx
deleted file mode 100644
index e244c191a..000000000
--- a/space/components/icons/state-group/cancelled-state-icon.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const CancelledStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["cancelled"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,32.44q9.54,9.75,19.09,19.48"
-        />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,51.92,51.73,32.44"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/space/components/icons/state-group/completed-state-icon.tsx b/space/components/icons/state-group/completed-state-icon.tsx
deleted file mode 100644
index 417ebbf3f..000000000
--- a/space/components/icons/state-group/completed-state-icon.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const CompletedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["completed"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M30.45,43.75l6.61,6.61L53.92,34"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/space/components/icons/state-group/index.ts b/space/components/icons/state-group/index.ts
deleted file mode 100644
index 6ede38df6..000000000
--- a/space/components/icons/state-group/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./backlog-state-icon";
-export * from "./cancelled-state-icon";
-export * from "./completed-state-icon";
-export * from "./started-state-icon";
-export * from "./state-group-icon";
-export * from "./unstarted-state-icon";
diff --git a/space/components/icons/state-group/started-state-icon.tsx b/space/components/icons/state-group/started-state-icon.tsx
deleted file mode 100644
index 4ebd1771f..000000000
--- a/space/components/icons/state-group/started-state-icon.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const StartedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["started"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.36 83.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/space/components/icons/state-group/state-group-icon.tsx b/space/components/icons/state-group/state-group-icon.tsx
deleted file mode 100644
index 1af523400..000000000
--- a/space/components/icons/state-group/state-group-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// icons
-import {
-  BacklogStateIcon,
-  CancelledStateIcon,
-  CompletedStateIcon,
-  StartedStateIcon,
-  UnstartedStateIcon,
-} from "components/icons";
-import { TIssueGroupKey } from "types/issue";
-
-type Props = {
-  stateGroup: TIssueGroupKey;
-  color: string;
-  className?: string;
-  height?: string;
-  width?: string;
-};
-
-export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
-  if (stateGroup === "backlog")
-    return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
-  else if (stateGroup === "cancelled")
-    return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
-  else if (stateGroup === "completed")
-    return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
-  else if (stateGroup === "started")
-    return <StartedStateIcon className={className} color={color} height={height} width={width} />;
-  else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
-};
diff --git a/space/components/icons/state-group/unstarted-state-icon.tsx b/space/components/icons/state-group/unstarted-state-icon.tsx
deleted file mode 100644
index f79bc00fc..000000000
--- a/space/components/icons/state-group/unstarted-state-icon.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const UnstartedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["unstarted"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/space/components/icons/types.d.ts b/space/components/icons/types.d.ts
deleted file mode 100644
index f82a18147..000000000
--- a/space/components/icons/types.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type Props = {
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-  className?: string;
-};
diff --git a/space/components/issues/board-views/block-state.tsx b/space/components/issues/board-views/block-state.tsx
index 16792c81b..2daba1226 100644
--- a/space/components/issues/board-views/block-state.tsx
+++ b/space/components/issues/board-views/block-state.tsx
@@ -1,3 +1,5 @@
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "constants/data";
 
@@ -8,7 +10,7 @@ export const IssueBlockState = ({ state }: any) => {
   return (
     <div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
       <div className="flex items-center w-full gap-1.5 text-custom-text-200">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>
       </div>
     </div>
diff --git a/space/components/issues/board-views/kanban/block.tsx b/space/components/issues/board-views/kanban/block.tsx
index b4de76f2b..b2effc4ad 100644
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -7,7 +7,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
 import { IssueBlockState } from "components/issues/board-views/block-state";
-import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
 // interfaces
 import { IIssue } from "types/issue";
@@ -37,7 +36,7 @@ export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
   };
 
   return (
-    <div className="py-3 px-4 h-[118px] flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-sm border-[0.5px] border-custom-border-200">
+    <div className="py-2 px-3 flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border-[0.5px] border-custom-border-200 space-y-2 text-sm">
       {/* id */}
       <div className="text-xs text-custom-text-300 break-words">
         {projectStore?.project?.identifier}-{issue?.sequence_id}
diff --git a/space/components/issues/board-views/kanban/header.tsx b/space/components/issues/board-views/kanban/header.tsx
index 5645e2b3b..8f2f28496 100644
--- a/space/components/issues/board-views/kanban/header.tsx
+++ b/space/components/issues/board-views/kanban/header.tsx
@@ -4,8 +4,8 @@ import { observer } from "mobx-react-lite";
 import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
-// icons
-import { StateGroupIcon } from "components/icons";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -18,11 +18,11 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="pb-2 px-2 flex items-center">
-      <div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
-        <StateGroupIcon stateGroup={state.group} color={state.color} />
+    <div className="pb-2 px-2 flex items-center gap-2">
+      <div className="w-3.5 h-3.5 flex justify-center items-center flex-shrink-0">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
-      <div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
+      <div className="font-semibold text-custom-text-200 capitalize mr-1 truncate">{state?.name}</div>
       <span className="text-custom-text-300 rounded-full flex-shrink-0">
         {store.issue.getCountOfIssuesByState(state.id)}
       </span>
diff --git a/space/components/issues/board-views/list/block.tsx b/space/components/issues/board-views/list/block.tsx
index bdf39b84f..57011d033 100644
--- a/space/components/issues/board-views/list/block.tsx
+++ b/space/components/issues/board-views/list/block.tsx
@@ -38,10 +38,10 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
   };
 
   return (
-    <div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
-      <div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">
+    <div className="flex items-center p-3 relative gap-10 bg-custom-background-100">
+      <div className="relative flex items-center gap-3 w-full flex-grow overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-sm text-custom-text-300">
+        <div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
           {projectStore?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
diff --git a/space/components/issues/board-views/list/header.tsx b/space/components/issues/board-views/list/header.tsx
index 83312e7b9..fc7e5ef61 100644
--- a/space/components/issues/board-views/list/header.tsx
+++ b/space/components/issues/board-views/list/header.tsx
@@ -2,8 +2,8 @@
 import { observer } from "mobx-react-lite";
 // interfaces
 import { IIssueState } from "types/issue";
-// icons
-import { StateGroupIcon } from "components/icons";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -18,12 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="px-6 py-2 flex items-center">
-      <div className="w-4 h-4 flex justify-center items-center">
-        <StateGroupIcon stateGroup={state.group} color={state.color} />
+    <div className="p-3 flex items-center gap-2">
+      <div className="w-3.5 h-3.5 flex justify-center items-center">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
-      <div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
-      <div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="font-medium capitalize mr-1">{state?.name}</div>
+      <div className="text-custom-text-200 text-sm font-medium">{store.issue.getCountOfIssuesByState(state.id)}</div>
     </div>
   );
 });
diff --git a/space/components/issues/board-views/list/index.tsx b/space/components/issues/board-views/list/index.tsx
index 1c6900dd9..d6b11d026 100644
--- a/space/components/issues/board-views/list/index.tsx
+++ b/space/components/issues/board-views/list/index.tsx
@@ -27,9 +27,7 @@ export const IssueListView = observer(() => {
                 ))}
               </div>
             ) : (
-              <div className="px-6 py-3.5 text-sm text-custom-text-200 bg-custom-background-100">
-                No Issues are available.
-              </div>
+              <div className="p-3 text-sm text-custom-text-400 bg-custom-background-100">No issues.</div>
             )}
           </div>
         ))}
diff --git a/space/components/issues/filters-render/state/filter-state-block.tsx b/space/components/issues/filters-render/state/filter-state-block.tsx
index 8445386a4..9b6447cb6 100644
--- a/space/components/issues/filters-render/state/filter-state-block.tsx
+++ b/space/components/issues/filters-render/state/filter-state-block.tsx
@@ -29,7 +29,7 @@ export const RenderIssueState = observer(({ state }: { state: IIssueState }) =>
   return (
     <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
       <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
-        <stateGroup.icon />
+        {/* <stateGroup.icon /> */}
       </div>
       <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
       <div
diff --git a/space/components/issues/navbar/issue-filter.tsx b/space/components/issues/navbar/issue-filter.tsx
index 852121a5e..83d5159d6 100644
--- a/space/components/issues/navbar/issue-filter.tsx
+++ b/space/components/issues/navbar/issue-filter.tsx
@@ -1,8 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-// mobx
+import { ChevronDown } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // components
@@ -45,7 +44,7 @@ export const NavbarIssueFilter = observer(() => {
       button={
         <>
           <span>Filters</span>
-          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+          <ChevronDown className="h-3 w-3" aria-hidden="true" />
         </>
       }
       items={[
@@ -78,7 +77,7 @@ export const NavbarIssueFilter = observer(() => {
             return {
               display: (
                 <span className="capitalize flex items-center gap-x-2">
-                  {stateGroup && <stateGroup.icon />}
+                  {/* {stateGroup && <stateGroup.icon />} */}
                   {state.name}
                 </span>
               ),
diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx
index 3ea4308d7..9878fd00a 100644
--- a/space/components/issues/peek-overview/comment/add-comment.tsx
+++ b/space/components/issues/peek-overview/comment/add-comment.tsx
@@ -7,11 +7,13 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { Comment } from "types/issue";
 // components
-import { TipTapEditor } from "components/tiptap";
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+// service
+import fileService from "services/file.service";
 
 const defaultValues: Partial<Comment> = {
   comment_html: "",
@@ -27,7 +29,6 @@ export const AddComment: React.FC<Props> = observer((props) => {
   const {
     handleSubmit,
     control,
-    setValue,
     watch,
     formState: { isSubmitting },
     reset,
@@ -69,35 +70,45 @@ export const AddComment: React.FC<Props> = observer((props) => {
           name="comment_html"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <TipTapEditor
-              workspaceSlug={workspace_slug as string}
+            <LiteTextEditorWithRef
+              onEnterKeyPress={(e) => {
+                userStore.requiredLogin(() => {
+                  handleSubmit(onSubmit)(e);
+                });
+              }}
+              cancelUploadImage={fileService.cancelUpload}
+              uploadFile={fileService.getUploadFileFunction(workspace_slug as string)}
+              deleteFile={fileService.deleteImage}
               ref={editorRef}
               value={
                 !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                   ? watch("comment_html")
                   : value
               }
-              customClassName="p-3 min-h-[50px] shadow-sm"
+              customClassName="p-2"
+              editorContentCustomClassNames="min-h-[35px]"
               debouncedUpdatesEnabled={false}
               onChange={(comment_json: Object, comment_html: string) => {
                 onChange(comment_html);
               }}
+              submitButton={
+                <Button
+                  disabled={isSubmitting || disabled}
+                  variant="primary"
+                  type="submit"
+                  className="!px-2.5 !py-1.5 !text-xs"
+                  onClick={(e) => {
+                    userStore.requiredLogin(() => {
+                      handleSubmit(onSubmit)(e);
+                    });
+                  }}
+                >
+                  {isSubmitting ? "Adding..." : "Comment"}
+                </Button>
+              }
             />
           )}
         />
-
-        <SecondaryButton
-          onClick={(e) => {
-            userStore.requiredLogin(() => {
-              handleSubmit(onSubmit)(e);
-            });
-          }}
-          type="submit"
-          disabled={isSubmitting || disabled}
-          className="mt-2"
-        >
-          {isSubmitting ? "Adding..." : "Comment"}
-        </SecondaryButton>
       </div>
     </div>
   );
diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index 0b4d2d5b0..ab09b2490 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -1,22 +1,21 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Menu, Transition } from "@headlessui/react";
-// lib
+import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { TipTapEditor } from "components/tiptap";
+import { LiteReadOnlyEditorWithRef, LiteTextEditorWithRef } from "@plane/lite-text-editor";
+
 import { CommentReactions } from "components/issues/peek-overview";
-// icons
-import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import { Comment } from "types/issue";
+// services
+import fileService from "services/file.service";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   workspaceSlug: string;
@@ -30,6 +29,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
   // states
   const [isEditing, setIsEditing] = useState(false);
 
+  const mentionsConfig = useEditorSuggestions();
+
   const editorRef = React.useRef<any>(null);
 
   const showEditorRef = React.useRef<any>(null);
@@ -78,7 +79,7 @@ export const CommentCard: React.FC<Props> = observer((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" />
+          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -100,8 +101,11 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 control={control}
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
-                  <TipTapEditor
-                    workspaceSlug={workspaceSlug as string}
+                  <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+                    cancelUploadImage={fileService.cancelUpload}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+                    deleteFile={fileService.deleteImage}
                     ref={editorRef}
                     value={value}
                     debouncedUpdatesEnabled={false}
@@ -119,24 +123,23 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 disabled={isSubmitting}
                 className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
               >
-                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
               </button>
               <button
                 type="button"
                 className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                 onClick={() => setIsEditing(false)}
               >
-                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
               </button>
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <TipTapEditor
-              workspaceSlug={workspaceSlug as string}
+            <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
               value={comment.comment_html}
-              editable={false}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={mentionsConfig.mentionHighlights}
             />
             <CommentReactions commentId={comment.id} projectId={comment.project} />
           </div>
@@ -150,7 +153,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             onClick={() => {}}
             className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
           >
-            <EllipsisVerticalIcon className="h-5 w-5 text-custom-text-200 duration-300" />
+            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
           </Menu.Button>
 
           <Transition
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 7a0b43b98..8608274f9 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -1,15 +1,11 @@
 import React from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-// headless ui
 import { Listbox, Transition } from "@headlessui/react";
+import { MoveRight } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
 import { Icon } from "components/ui";
-// icons
-import { East } from "@mui/icons-material";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // store
@@ -44,7 +40,7 @@ const peekModes: {
 ];
 
 export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
-  const { handleClose, issueDetails } = props;
+  const { handleClose } = props;
 
   const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
 
@@ -68,11 +64,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
         <div className="flex items-center gap-4">
           {issueDetailStore.peekMode === "side" && (
             <button type="button" onClick={handleClose}>
-              <East
-                sx={{
-                  fontSize: "14px",
-                }}
-              />
+              <MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
             </button>
           )}
           <Listbox
diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx
index 0b329568c..d84103388 100644
--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/space/components/issues/peek-overview/issue-details.tsx
@@ -1,16 +1,15 @@
 import { IssueReactions } from "components/issues/peek-overview";
-import { TipTapEditor } from "components/tiptap";
-import { useRouter } from "next/router";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types/issue";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   issueDetails: IIssue;
 };
 
 export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
-  const router = useRouter();
-  const { workspace_slug } = router.query;
+  const mentionConfig = useEditorSuggestions();
 
   return (
     <div className="space-y-2">
@@ -19,8 +18,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
       </h6>
       <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
       {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
-        <TipTapEditor
-          workspaceSlug={workspace_slug as string}
+        <RichReadOnlyEditor
           value={
             !issueDetails.description_html ||
             issueDetails.description_html === "" ||
@@ -30,8 +28,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
               : issueDetails.description_html
           }
           customClassName="p-3 min-h-[50px] shadow-sm"
-          debouncedUpdatesEnabled={false}
-          editable={false}
+          mentionHighlights={mentionConfig.mentionHighlights}
         />
       )}
       <IssueReactions />
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index f7ccab18f..54e9c4f6a 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -1,5 +1,7 @@
 // hooks
 import useToast from "hooks/use-toast";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // icons
 import { Icon } from "components/ui";
 // helpers
@@ -63,7 +65,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
             {stateGroup && (
               <div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
                 <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-                  <stateGroup.icon />
+                  <StateGroupIcon stateGroup={state.group} color={state.color} />
                   {addSpaceIfCamelCase(state?.name ?? "")}
                 </div>
               </div>
diff --git a/space/components/tiptap/bubble-menu/index.tsx b/space/components/tiptap/bubble-menu/index.tsx
deleted file mode 100644
index 217317ea1..000000000
--- a/space/components/tiptap/bubble-menu/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
-import { FC, useState } from "react";
-import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
-
-import { NodeSelector } from "./node-selector";
-import { LinkSelector } from "./link-selector";
-import { cn } from "../utils";
-
-export interface BubbleMenuItem {
-  name: string;
-  isActive: () => boolean;
-  command: () => void;
-  icon: typeof BoldIcon;
-}
-
-type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
-
-export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
-  const items: BubbleMenuItem[] = [
-    {
-      name: "bold",
-      isActive: () => props.editor?.isActive("bold"),
-      command: () => props.editor?.chain().focus().toggleBold().run(),
-      icon: BoldIcon,
-    },
-    {
-      name: "italic",
-      isActive: () => props.editor?.isActive("italic"),
-      command: () => props.editor?.chain().focus().toggleItalic().run(),
-      icon: ItalicIcon,
-    },
-    {
-      name: "underline",
-      isActive: () => props.editor?.isActive("underline"),
-      command: () => props.editor?.chain().focus().toggleUnderline().run(),
-      icon: UnderlineIcon,
-    },
-    {
-      name: "strike",
-      isActive: () => props.editor?.isActive("strike"),
-      command: () => props.editor?.chain().focus().toggleStrike().run(),
-      icon: StrikethroughIcon,
-    },
-    {
-      name: "code",
-      isActive: () => props.editor?.isActive("code"),
-      command: () => props.editor?.chain().focus().toggleCode().run(),
-      icon: CodeIcon,
-    },
-  ];
-
-  const bubbleMenuProps: EditorBubbleMenuProps = {
-    ...props,
-    shouldShow: ({ editor }) => {
-      if (!editor.isEditable) {
-        return false;
-      }
-      if (editor.isActive("image")) {
-        return false;
-      }
-      return editor.view.state.selection.content().size > 0;
-    },
-    tippyOptions: {
-      moveTransition: "transform 0.15s ease-out",
-      onHidden: () => {
-        setIsNodeSelectorOpen(false);
-        setIsLinkSelectorOpen(false);
-      },
-    },
-  };
-
-  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
-
-  return (
-    <BubbleMenu
-      {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
-    >
-      {!props.editor.isActive("table") && (
-        <NodeSelector
-          editor={props.editor!}
-          isOpen={isNodeSelectorOpen}
-          setIsOpen={() => {
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-            setIsLinkSelectorOpen(false);
-          }}
-        />
-      )}
-      <LinkSelector
-        editor={props.editor!!}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
-      <div className="flex">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-    </BubbleMenu>
-  );
-};
diff --git a/space/components/tiptap/bubble-menu/link-selector.tsx b/space/components/tiptap/bubble-menu/link-selector.tsx
deleted file mode 100644
index 559521db6..000000000
--- a/space/components/tiptap/bubble-menu/link-selector.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Editor } from "@tiptap/core";
-import { Check, Trash } from "lucide-react";
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
-import { cn } from "../utils";
-import isValidHttpUrl from "./utils/link-validator";
-interface LinkSelectorProps {
-  editor: Editor;
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const onLinkSubmit = useCallback(() => {
-    const input = inputRef.current;
-    const url = input?.value;
-    if (url && isValidHttpUrl(url)) {
-      editor.chain().focus().setLink({ href: url }).run();
-      setIsOpen(false);
-    }
-  }, [editor, inputRef, setIsOpen]);
-
-  useEffect(() => {
-    inputRef.current && inputRef.current?.focus();
-  });
-
-  return (
-    <div className="relative">
-      <button
-        type="button"
-        className={cn(
-          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
-          { "bg-custom-background-100": isOpen }
-        )}
-        onClick={() => {
-          setIsOpen(!isOpen);
-        }}
-      >
-        <p className="text-base">↗</p>
-        <p
-          className={cn("underline underline-offset-4", {
-            "text-custom-text-100": editor.isActive("link"),
-          })}
-        >
-          Link
-        </p>
-      </button>
-      {isOpen && (
-        <div
-          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              onLinkSubmit();
-            }
-          }}
-        >
-          <input
-            ref={inputRef}
-            type="url"
-            placeholder="Paste a link"
-            className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
-            defaultValue={editor.getAttributes("link").href || ""}
-          />
-          {editor.getAttributes("link").href ? (
-            <button
-              type="button"
-              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
-              onClick={() => {
-                editor.chain().focus().unsetLink().run();
-                setIsOpen(false);
-              }}
-            >
-              <Trash className="h-4 w-4" />
-            </button>
-          ) : (
-            <button
-              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
-              type="button"
-              onClick={() => {
-                onLinkSubmit();
-              }}
-            >
-              <Check className="h-4 w-4" />
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/space/components/tiptap/bubble-menu/utils/link-validator.tsx b/space/components/tiptap/bubble-menu/utils/link-validator.tsx
deleted file mode 100644
index 9af366c02..000000000
--- a/space/components/tiptap/bubble-menu/utils/link-validator.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function isValidHttpUrl(string: string): boolean {
-  let url;
-
-  try {
-    url = new URL(string);
-  } catch (_) {
-    return false;
-  }
-
-  return url.protocol === "http:" || url.protocol === "https:";
-}
diff --git a/space/components/tiptap/extensions/image-resize.tsx b/space/components/tiptap/extensions/image-resize.tsx
deleted file mode 100644
index 448b8811c..000000000
--- a/space/components/tiptap/extensions/image-resize.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Editor } from "@tiptap/react";
-import Moveable from "react-moveable";
-
-export const ImageResizer = ({ editor }: { editor: Editor }) => {
-  const updateMediaSize = () => {
-    const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
-    if (imageInfo) {
-      const selection = editor.state.selection;
-      editor.commands.setImage({
-        src: imageInfo.src,
-        width: Number(imageInfo.style.width.replace("px", "")),
-        height: Number(imageInfo.style.height.replace("px", "")),
-      } as any);
-      editor.commands.setNodeSelection(selection.from);
-    }
-  };
-
-  return (
-    <>
-      <Moveable
-        target={document.querySelector(".ProseMirror-selectednode") as any}
-        container={null}
-        origin={false}
-        edge={false}
-        throttleDrag={0}
-        keepRatio={true}
-        resizable={true}
-        throttleResize={0}
-        onResize={({ target, width, height, delta }: any) => {
-          delta[0] && (target!.style.width = `${width}px`);
-          delta[1] && (target!.style.height = `${height}px`);
-        }}
-        onResizeEnd={() => {
-          updateMediaSize();
-        }}
-        scalable={true}
-        renderDirections={["w", "e"]}
-        onScale={({ target, transform }: any) => {
-          target!.style.transform = transform;
-        }}
-      />
-    </>
-  );
-};
diff --git a/space/components/tiptap/extensions/index.tsx b/space/components/tiptap/extensions/index.tsx
deleted file mode 100644
index 8ad4e07b4..000000000
--- a/space/components/tiptap/extensions/index.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import StarterKit from "@tiptap/starter-kit";
-import HorizontalRule from "@tiptap/extension-horizontal-rule";
-import TiptapLink from "@tiptap/extension-link";
-import Placeholder from "@tiptap/extension-placeholder";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TextStyle from "@tiptap/extension-text-style";
-import { Color } from "@tiptap/extension-color";
-import TaskItem from "@tiptap/extension-task-item";
-import TaskList from "@tiptap/extension-task-list";
-import { Markdown } from "tiptap-markdown";
-import Highlight from "@tiptap/extension-highlight";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { lowlight } from "lowlight/lib/core";
-import SlashCommand from "../slash-command";
-import { InputRule } from "@tiptap/core";
-import Gapcursor from "@tiptap/extension-gapcursor";
-
-import ts from "highlight.js/lib/languages/typescript";
-
-import "highlight.js/styles/github-dark.css";
-import UpdatedImage from "./updated-image";
-import isValidHttpUrl from "../bubble-menu/utils/link-validator";
-import { CustomTableCell } from "./table/table-cell";
-import { Table } from "./table/table";
-import { TableHeader } from "./table/table-header";
-import { TableRow } from "@tiptap/extension-table-row";
-
-lowlight.registerLanguage("ts", ts);
-
-export const TiptapExtensions = (
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) => [
-    StarterKit.configure({
-      bulletList: {
-        HTMLAttributes: {
-          class: "list-disc list-outside leading-3 -mt-2",
-        },
-      },
-      orderedList: {
-        HTMLAttributes: {
-          class: "list-decimal list-outside leading-3 -mt-2",
-        },
-      },
-      listItem: {
-        HTMLAttributes: {
-          class: "leading-normal -mb-2",
-        },
-      },
-      blockquote: {
-        HTMLAttributes: {
-          class: "border-l-4 border-custom-border-300",
-        },
-      },
-      code: {
-        HTMLAttributes: {
-          class:
-            "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
-          spellcheck: "false",
-        },
-      },
-      codeBlock: false,
-      horizontalRule: false,
-      dropcursor: {
-        color: "rgba(var(--color-text-100))",
-        width: 2,
-      },
-      gapcursor: false,
-    }),
-    CodeBlockLowlight.configure({
-      lowlight,
-    }),
-    HorizontalRule.extend({
-      addInputRules() {
-        return [
-          new InputRule({
-            find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-            handler: ({ state, range, commands }) => {
-              commands.splitBlock();
-
-              const attributes = {};
-              const { tr } = state;
-              const start = range.from;
-              const end = range.to;
-              // @ts-ignore
-              tr.replaceWith(start - 1, end, this.type.create(attributes));
-            },
-          }),
-        ];
-      },
-    }).configure({
-      HTMLAttributes: {
-        class: "mb-6 border-t border-custom-border-300",
-      },
-    }),
-    Gapcursor,
-    TiptapLink.configure({
-      protocols: ["http", "https"],
-      validate: (url) => isValidHttpUrl(url),
-      HTMLAttributes: {
-        class:
-          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
-      },
-    }),
-    UpdatedImage.configure({
-      HTMLAttributes: {
-        class: "rounded-lg border border-custom-border-300",
-      },
-    }),
-    Placeholder.configure({
-      placeholder: ({ node }) => {
-        if (node.type.name === "heading") {
-          return `Heading ${node.attrs.level}`;
-        }
-        if (node.type.name === "image" || node.type.name === "table") {
-          return "";
-        }
-
-        return "Press '/' for commands...";
-      },
-      includeChildren: true,
-    }),
-    SlashCommand(workspaceSlug, setIsSubmitting),
-    TiptapUnderline,
-    TextStyle,
-    Color,
-    Highlight.configure({
-      multicolor: true,
-    }),
-    TaskList.configure({
-      HTMLAttributes: {
-        class: "not-prose pl-2",
-      },
-    }),
-    TaskItem.configure({
-      HTMLAttributes: {
-        class: "flex items-start my-4",
-      },
-      nested: true,
-    }),
-    Markdown.configure({
-      html: true,
-      transformCopiedText: true,
-    }),
-    Table,
-    TableHeader,
-    CustomTableCell,
-    TableRow,
-  ];
diff --git a/space/components/tiptap/extensions/table/table-cell.ts b/space/components/tiptap/extensions/table/table-cell.ts
deleted file mode 100644
index 643cb8c64..000000000
--- a/space/components/tiptap/extensions/table/table-cell.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TableCell } from "@tiptap/extension-table-cell";
-
-export const CustomTableCell = TableCell.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      isHeader: {
-        default: false,
-        parseHTML: (element) => {
-          isHeader: element.tagName === "TD";
-        },
-        renderHTML: (attributes) => {
-          tag: attributes.isHeader ? "th" : "td";
-        },
-      },
-    };
-  },
-  renderHTML({ HTMLAttributes }) {
-    if (HTMLAttributes.isHeader) {
-      return [
-        "th",
-        {
-          ...HTMLAttributes,
-          class: `relative ${HTMLAttributes.class}`,
-        },
-        ["span", { class: "absolute top-0 right-0" }],
-        0,
-      ];
-    }
-    return ["td", HTMLAttributes, 0];
-  },
-});
diff --git a/space/components/tiptap/extensions/table/table-header.ts b/space/components/tiptap/extensions/table/table-header.ts
deleted file mode 100644
index f23aa93ef..000000000
--- a/space/components/tiptap/extensions/table/table-header.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { TableHeader as BaseTableHeader } from "@tiptap/extension-table-header";
-
-const TableHeader = BaseTableHeader.extend({
-  content: "paragraph",
-});
-
-export { TableHeader };
diff --git a/space/components/tiptap/extensions/table/table.ts b/space/components/tiptap/extensions/table/table.ts
deleted file mode 100644
index 9b727bb51..000000000
--- a/space/components/tiptap/extensions/table/table.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Table as BaseTable } from "@tiptap/extension-table";
-
-const Table = BaseTable.configure({
-  resizable: true,
-  cellMinWidth: 100,
-  allowTableNodeSelection: true,
-});
-
-export { Table };
diff --git a/space/components/tiptap/extensions/updated-image.tsx b/space/components/tiptap/extensions/updated-image.tsx
deleted file mode 100644
index b62050953..000000000
--- a/space/components/tiptap/extensions/updated-image.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Image from "@tiptap/extension-image";
-import TrackImageDeletionPlugin from "../plugins/delete-image";
-import UploadImagesPlugin from "../plugins/upload-image";
-
-const UpdatedImage = Image.extend({
-  addProseMirrorPlugins() {
-    return [UploadImagesPlugin(), TrackImageDeletionPlugin()];
-  },
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: "35%",
-      },
-      height: {
-        default: null,
-      },
-    };
-  },
-});
-
-export default UpdatedImage;
diff --git a/space/components/tiptap/index.tsx b/space/components/tiptap/index.tsx
deleted file mode 100644
index 84f691c35..000000000
--- a/space/components/tiptap/index.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useImperativeHandle, useRef, forwardRef, useEffect } from "react";
-import { useEditor, EditorContent, Editor } from "@tiptap/react";
-import { useDebouncedCallback } from "use-debounce";
-// components
-import { EditorBubbleMenu } from "./bubble-menu";
-import { TiptapExtensions } from "./extensions";
-import { TiptapEditorProps } from "./props";
-import { ImageResizer } from "./extensions/image-resize";
-import { TableMenu } from "./table-menu";
-
-export interface ITipTapRichTextEditor {
-  value: string;
-  noBorder?: boolean;
-  borderOnFocus?: boolean;
-  customClassName?: string;
-  editorContentCustomClassNames?: string;
-  onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
-  setShouldShowAlert?: (showAlert: boolean) => void;
-  workspaceSlug: string;
-  editable?: boolean;
-  forwardedRef?: any;
-  debouncedUpdatesEnabled?: boolean;
-}
-
-const Tiptap = (props: ITipTapRichTextEditor) => {
-  const {
-    onChange,
-    debouncedUpdatesEnabled,
-    forwardedRef,
-    editable,
-    setIsSubmitting,
-    setShouldShowAlert,
-    editorContentCustomClassNames,
-    value,
-    noBorder,
-    workspaceSlug,
-    borderOnFocus,
-    customClassName,
-  } = props;
-
-  const editor = useEditor({
-    editable: editable ?? true,
-    editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
-    extensions: TiptapExtensions(workspaceSlug, setIsSubmitting),
-    content: value,
-    onUpdate: async ({ editor }) => {
-      // for instant feedback loop
-      setIsSubmitting?.("submitting");
-      setShouldShowAlert?.(true);
-      if (debouncedUpdatesEnabled) {
-        debouncedUpdates({ onChange, editor });
-      } else {
-        onChange?.(editor.getJSON(), editor.getHTML());
-      }
-    },
-  });
-
-  const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
-
-  useImperativeHandle(forwardedRef, () => ({
-    clearEditor: () => {
-      editorRef.current?.commands.clearContent();
-    },
-    setEditorValue: (content: string) => {
-      editorRef.current?.commands.setContent(content);
-    },
-  }));
-
-  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
-    setTimeout(async () => {
-      if (onChange) {
-        onChange(editor.getJSON(), editor.getHTML());
-      }
-    }, 500);
-  }, 1000);
-
-  const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? "" : "border border-custom-border-200"} ${
-    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-  } ${customClassName}`;
-
-  if (!editor) return null;
-  editorRef.current = editor;
-
-  return (
-    <div
-      id="tiptap-container"
-      onClick={() => {
-        editor?.chain().focus().run();
-      }}
-      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
-    >
-      {editor && <EditorBubbleMenu editor={editor} />}
-      <div className={`${editorContentCustomClassNames}`}>
-        <EditorContent editor={editor} />
-        <TableMenu editor={editor} />
-        {editor?.isActive("image") && <ImageResizer editor={editor} />}
-      </div>
-    </div>
-  );
-};
-
-const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
-  <Tiptap {...props} forwardedRef={ref} />
-));
-
-TipTapEditor.displayName = "TipTapEditor";
-
-export { TipTapEditor };
diff --git a/space/components/tiptap/plugins/delete-image.tsx b/space/components/tiptap/plugins/delete-image.tsx
deleted file mode 100644
index fdf515ccc..000000000
--- a/space/components/tiptap/plugins/delete-image.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import fileService from "services/file.service";
-
-const deleteKey = new PluginKey("delete-image");
-const IMAGE_NODE_TYPE = "image";
-
-interface ImageNode extends ProseMirrorNode {
-  attrs: {
-    src: string;
-    id: string;
-  };
-}
-
-const TrackImageDeletionPlugin = (): Plugin =>
-  new Plugin({
-    key: deleteKey,
-    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
-      const newImageSources = new Set();
-      newState.doc.descendants((node) => {
-        if (node.type.name === IMAGE_NODE_TYPE) {
-          newImageSources.add(node.attrs.src);
-        }
-      });
-
-      transactions.forEach((transaction) => {
-        if (!transaction.docChanged) return;
-
-        const removedImages: ImageNode[] = [];
-
-        oldState.doc.descendants((oldNode, oldPos) => {
-          if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
-          if (oldPos < 0 || oldPos > newState.doc.content.size) return;
-          if (!newState.doc.resolve(oldPos).parent) return;
-
-          const newNode = newState.doc.nodeAt(oldPos);
-
-          // Check if the node has been deleted or replaced
-          if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
-            if (!newImageSources.has(oldNode.attrs.src)) {
-              removedImages.push(oldNode as ImageNode);
-            }
-          }
-        });
-
-        removedImages.forEach(async (node) => {
-          const src = node.attrs.src;
-          await onNodeDeleted(src);
-        });
-      });
-
-      return null;
-    },
-  });
-
-export default TrackImageDeletionPlugin;
-
-async function onNodeDeleted(src: string): Promise<void> {
-  try {
-    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-    const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
-    if (resStatus === 204) {
-      console.log("Image deleted successfully");
-    }
-  } catch (error) {
-    console.error("Error deleting image: ", error);
-  }
-}
diff --git a/space/components/tiptap/plugins/upload-image.tsx b/space/components/tiptap/plugins/upload-image.tsx
deleted file mode 100644
index bc0acdc54..000000000
--- a/space/components/tiptap/plugins/upload-image.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
-import fileService from "services/file.service";
-
-const uploadKey = new PluginKey("upload-image");
-
-const UploadImagesPlugin = () =>
-  new Plugin({
-    key: uploadKey,
-    state: {
-      init() {
-        return DecorationSet.empty;
-      },
-      apply(tr, set) {
-        set = set.map(tr.mapping, tr.doc);
-        // See if the transaction adds or removes any placeholders
-        const action = tr.getMeta(uploadKey);
-        if (action && action.add) {
-          const { id, pos, src } = action.add;
-
-          const placeholder = document.createElement("div");
-          placeholder.setAttribute("class", "img-placeholder");
-          const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
-          image.src = src;
-          placeholder.appendChild(image);
-          const deco = Decoration.widget(pos + 1, placeholder, {
-            id,
-          });
-          set = set.add(tr.doc, [deco]);
-        } else if (action && action.remove) {
-          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
-        }
-        return set;
-      },
-    },
-    props: {
-      decorations(state) {
-        return this.getState(state);
-      },
-    },
-  });
-
-export default UploadImagesPlugin;
-
-function findPlaceholder(state: EditorState, id: {}) {
-  const decos = uploadKey.getState(state);
-  const found = decos.find(
-    undefined,
-    undefined,
-    (spec: { id: number | undefined }) => spec.id == id
-  );
-  return found.length ? found[0].from : null;
-}
-
-export async function startImageUpload(
-  file: File,
-  view: EditorView,
-  pos: number,
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) {
-  if (!file.type.includes("image/")) {
-    return;
-  }
-
-  const id = {};
-
-  const tr = view.state.tr;
-  if (!tr.selection.empty) tr.deleteSelection();
-
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.onload = () => {
-    tr.setMeta(uploadKey, {
-      add: {
-        id,
-        pos,
-        src: reader.result,
-      },
-    });
-    view.dispatch(tr);
-  };
-
-  if (!workspaceSlug) {
-    return;
-  }
-  setIsSubmitting?.("submitting");
-  const src = await UploadImageHandler(file, workspaceSlug);
-  const { schema } = view.state;
-  pos = findPlaceholder(view.state, id);
-
-  if (pos == null) return;
-  const imageSrc = typeof src === "object" ? reader.result : src;
-
-  const node = schema.nodes.image.create({ src: imageSrc });
-  const transaction = view.state.tr
-    .replaceWith(pos, pos, node)
-    .setMeta(uploadKey, { remove: { id } });
-  view.dispatch(transaction);
-}
-
-const UploadImageHandler = (file: File, workspaceSlug: string): Promise<string> => {
-  if (!workspaceSlug) {
-    return Promise.reject("Workspace slug is missing");
-  }
-  try {
-    const formData = new FormData();
-    formData.append("asset", file);
-    formData.append("attributes", JSON.stringify({}));
-
-    return new Promise(async (resolve, reject) => {
-      const imageUrl = await fileService
-        .uploadFile(workspaceSlug, formData)
-        .then((response) => response.asset);
-
-      const image = new Image();
-      image.src = imageUrl;
-      image.onload = () => {
-        resolve(imageUrl);
-      };
-    });
-  } catch (error) {
-    console.log(error);
-    return Promise.reject(error);
-  }
-};
diff --git a/space/components/tiptap/table-menu/InsertBottomTableIcon.tsx b/space/components/tiptap/table-menu/InsertBottomTableIcon.tsx
deleted file mode 100644
index 0e42ba648..000000000
--- a/space/components/tiptap/table-menu/InsertBottomTableIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const InsertBottomTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-
-export default InsertBottomTableIcon;
diff --git a/space/components/tiptap/table-menu/InsertLeftTableIcon.tsx b/space/components/tiptap/table-menu/InsertLeftTableIcon.tsx
deleted file mode 100644
index 1fd75fe87..000000000
--- a/space/components/tiptap/table-menu/InsertLeftTableIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const InsertLeftTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-export default InsertLeftTableIcon;
diff --git a/space/components/tiptap/table-menu/InsertRightTableIcon.tsx b/space/components/tiptap/table-menu/InsertRightTableIcon.tsx
deleted file mode 100644
index 1a6570969..000000000
--- a/space/components/tiptap/table-menu/InsertRightTableIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const InsertRightTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-
-export default InsertRightTableIcon;
diff --git a/space/components/tiptap/table-menu/InsertTopTableIcon.tsx b/space/components/tiptap/table-menu/InsertTopTableIcon.tsx
deleted file mode 100644
index 8f04f4f61..000000000
--- a/space/components/tiptap/table-menu/InsertTopTableIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const InsertTopTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-export default InsertTopTableIcon;
diff --git a/space/components/tiptap/table-menu/index.tsx b/space/components/tiptap/table-menu/index.tsx
deleted file mode 100644
index 94f9c0f8d..000000000
--- a/space/components/tiptap/table-menu/index.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useState, useEffect } from "react";
-import { Rows, Columns, ToggleRight } from "lucide-react";
-import { cn } from "../utils";
-import { Tooltip } from "components/ui";
-import InsertLeftTableIcon from "./InsertLeftTableIcon";
-import InsertRightTableIcon from "./InsertRightTableIcon";
-import InsertTopTableIcon from "./InsertTopTableIcon";
-import InsertBottomTableIcon from "./InsertBottomTableIcon";
-
-interface TableMenuItem {
-  command: () => void;
-  icon: any;
-  key: string;
-  name: string;
-}
-
-export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
-  while (node !== null && node.nodeName !== "TABLE") {
-    node = node.parentNode;
-  }
-  return node as HTMLTableElement;
-};
-
-export const TableMenu = ({ editor }: { editor: any }) => {
-  const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
-  const isOpen = editor?.isActive("table");
-
-  const items: TableMenuItem[] = [
-    {
-      command: () => editor.chain().focus().addColumnBefore().run(),
-      icon: InsertLeftTableIcon,
-      key: "insert-column-left",
-      name: "Insert 1 column left",
-    },
-    {
-      command: () => editor.chain().focus().addColumnAfter().run(),
-      icon: InsertRightTableIcon,
-      key: "insert-column-right",
-      name: "Insert 1 column right",
-    },
-    {
-      command: () => editor.chain().focus().addRowBefore().run(),
-      icon: InsertTopTableIcon,
-      key: "insert-row-above",
-      name: "Insert 1 row above",
-    },
-    {
-      command: () => editor.chain().focus().addRowAfter().run(),
-      icon: InsertBottomTableIcon,
-      key: "insert-row-below",
-      name: "Insert 1 row below",
-    },
-    {
-      command: () => editor.chain().focus().deleteColumn().run(),
-      icon: Columns,
-      key: "delete-column",
-      name: "Delete column",
-    },
-    {
-      command: () => editor.chain().focus().deleteRow().run(),
-      icon: Rows,
-      key: "delete-row",
-      name: "Delete row",
-    },
-    {
-      command: () => editor.chain().focus().toggleHeaderRow().run(),
-      icon: ToggleRight,
-      key: "toggle-header-row",
-      name: "Toggle header row",
-    },
-  ];
-
-  useEffect(() => {
-    if (!window) return;
-
-    const handleWindowClick = () => {
-      const selection: any = window?.getSelection();
-
-      if (selection.rangeCount !== 0) {
-        const range = selection.getRangeAt(0);
-        const tableNode = findTableAncestor(range.startContainer);
-
-        let parent = tableNode?.parentElement;
-
-        if (tableNode) {
-          const tableRect = tableNode.getBoundingClientRect();
-          const tableCenter = tableRect.left + tableRect.width / 2;
-          const menuWidth = 45;
-          const menuLeft = tableCenter - menuWidth / 2;
-          const tableBottom = tableRect.bottom;
-
-          setTableLocation({ bottom: tableBottom, left: menuLeft });
-
-          while (parent) {
-            if (!parent.classList.contains("disable-scroll"))
-              parent.classList.add("disable-scroll");
-            parent = parent.parentElement;
-          }
-        } else {
-          const scrollDisabledContainers = document.querySelectorAll(".disable-scroll");
-
-          scrollDisabledContainers.forEach((container) => {
-            container.classList.remove("disable-scroll");
-          });
-        }
-      }
-    };
-
-    window.addEventListener("click", handleWindowClick);
-
-    return () => {
-      window.removeEventListener("click", handleWindowClick);
-    };
-  }, [tableLocation, editor]);
-
-  return (
-    <section
-      className={`fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
-        isOpen ? "block" : "hidden"
-      }`}
-      style={{
-        bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
-        left: `${tableLocation.left}px`,
-      }}
-    >
-      {items.map((item, index) => (
-        <Tooltip key={index} tooltipContent={item.name}>
-          <button
-            onClick={item.command}
-            className="p-1.5 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-background-80 active:bg-custom-background-80 rounded"
-            title={item.name}
-          >
-            <item.icon
-              className={cn("h-4 w-4 text-lg", {
-                "text-red-600": item.key.includes("delete"),
-              })}
-            />
-          </button>
-        </Tooltip>
-      ))}
-    </section>
-  );
-};
diff --git a/space/components/tiptap/utils.ts b/space/components/tiptap/utils.ts
deleted file mode 100644
index a5ef19350..000000000
--- a/space/components/tiptap/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/space/components/ui/dropdown.tsx b/space/components/ui/dropdown.tsx
index d1791de00..6ef6b773f 100644
--- a/space/components/ui/dropdown.tsx
+++ b/space/components/ui/dropdown.tsx
@@ -1,16 +1,9 @@
-"use client";
-
 import { Fragment, useState, useRef } from "react";
-
-// next
 import Link from "next/link";
-
-// headless
 import { Popover, Transition } from "@headlessui/react";
-import { ChevronLeftIcon, CheckIcon } from "@heroicons/react/20/solid";
-
 // hooks
 import useOutSideClick from "hooks/use-outside-click";
+import { Check, ChevronLeft } from "lucide-react";
 
 type ItemOptionType = {
   display: React.ReactNode;
@@ -94,10 +87,10 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
             isSelected ? "bg-custom-background-80" : ""
           }`}
         >
-          {children && <ChevronLeftIcon className="h-5 w-5 transition-transform transform" />}
+          {children && <ChevronLeft className="h-4 w-4 transition-transform transform" strokeWidth={2} />}
           {!children && <span />}
           <span className="truncate text-xs">{display}</span>
-          <CheckIcon className={`h-3.5 w-3.5 opacity-0 ${isSelected ? "opacity-100" : ""}`} />
+          <Check className={`h-3 w-3 opacity-0 ${isSelected ? "opacity-100" : ""}`} strokeWidth={2} />
         </button>
       )}
 
diff --git a/space/components/ui/toast-alert.tsx b/space/components/ui/toast-alert.tsx
index 5d0c0123c..fe7a3448e 100644
--- a/space/components/ui/toast-alert.tsx
+++ b/space/components/ui/toast-alert.tsx
@@ -1,12 +1,6 @@
 import React from "react";
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
 // hooks
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
 // icons
 
@@ -26,7 +20,7 @@ const ToastAlerts = () => {
               onClick={() => removeAlert(alert.id)}
             >
               <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              <X className="h-5 w-5" aria-hidden="true" />
             </button>
           </div>
           <div
@@ -43,13 +37,13 @@ const ToastAlerts = () => {
             <div className="flex items-center gap-x-3">
               <div className="flex-shrink-0">
                 {alert.type === "success" ? (
-                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                  <CheckCircle className="h-8 w-8" aria-hidden="true" />
                 ) : alert.type === "error" ? (
-                  <XCircleIcon className="h-8 w-8" />
+                  <XCircle className="h-8 w-8" />
                 ) : alert.type === "warning" ? (
-                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                  <AlertTriangle className="h-8 w-8" aria-hidden="true" />
                 ) : (
-                  <InformationCircleIcon className="h-8 w-8" />
+                  <Info className="h-8 w-8" />
                 )}
               </div>
               <div>
diff --git a/space/constants/data.ts b/space/constants/data.ts
index 29d411342..bb9030696 100644
--- a/space/constants/data.ts
+++ b/space/constants/data.ts
@@ -1,6 +1,5 @@
 // interfaces
 import {
-  IIssueBoardViews,
   // priority
   TIssuePriorityKey,
   // state groups
@@ -8,14 +7,6 @@ import {
   IIssuePriorityFilters,
   IIssueGroup,
 } from "types/issue";
-// icons
-import {
-  BacklogStateIcon,
-  UnstartedStateIcon,
-  StartedStateIcon,
-  CompletedStateIcon,
-  CancelledStateIcon,
-} from "components/icons";
 
 // all issue views
 export const issueViews: any = {
@@ -92,35 +83,30 @@ export const issueGroups: IIssueGroup[] = [
     title: "Backlog",
     color: "#d9d9d9",
     className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
-    icon: BacklogStateIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
     className: `text-[#3f76ff] bg-[#3f76ff]/10`,
-    icon: UnstartedStateIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
     className: `text-[#f59e0b] bg-[#f59e0b]/10`,
-    icon: StartedStateIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
     className: `text-[#16a34a] bg-[#16a34a]/10`,
-    icon: CompletedStateIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
     className: `text-[#dc2626] bg-[#dc2626]/10`,
-    icon: CancelledStateIcon,
   },
 ];
 
diff --git a/space/hooks/use-editor-suggestions.tsx b/space/hooks/use-editor-suggestions.tsx
new file mode 100644
index 000000000..0659121b7
--- /dev/null
+++ b/space/hooks/use-editor-suggestions.tsx
@@ -0,0 +1,13 @@
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const useEditorSuggestions = () => {
+  const { mentionsStore }: RootStore = useMobxStore();
+
+  return {
+    // mentionSuggestions: mentionsStore.mentionSuggestions,
+    mentionHighlights: mentionsStore.mentionHighlights,
+  };
+};
+
+export default useEditorSuggestions;
diff --git a/space/next.config.js b/space/next.config.js
index bd3749f10..7e9865784 100644
--- a/space/next.config.js
+++ b/space/next.config.js
@@ -8,6 +8,9 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, "../"),
   },
+  images: {
+    unoptimized: true,
+  },
   output: "standalone",
 };
 
diff --git a/space/package.json b/space/package.json
index b539fbb65..5f3f60dc9 100644
--- a/space/package.json
+++ b/space/package.json
@@ -3,10 +3,12 @@
   "version": "0.13.2",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 4000",
+    "dev": "turbo run develop",
+    "develop": "next dev -p 4000",
     "build": "next build",
     "start": "next start -p 4000",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",
@@ -14,29 +16,10 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.12",
-    "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
-    "@tiptap/extension-code-block-lowlight": "^2.0.4",
-    "@tiptap/extension-color": "^2.0.4",
-    "@tiptap/extension-gapcursor": "^2.1.7",
-    "@tiptap/extension-highlight": "^2.0.4",
-    "@tiptap/extension-horizontal-rule": "^2.0.4",
-    "@tiptap/extension-image": "^2.0.4",
-    "@tiptap/extension-link": "^2.0.4",
-    "@tiptap/extension-placeholder": "^2.0.4",
-    "@tiptap/extension-table": "^2.1.6",
-    "@tiptap/extension-table-cell": "^2.1.6",
-    "@tiptap/extension-table-header": "^2.1.6",
-    "@tiptap/extension-table-row": "^2.1.6",
-    "@tiptap/extension-task-item": "^2.0.4",
-    "@tiptap/extension-task-list": "^2.0.4",
-    "@tiptap/extension-text-style": "^2.0.4",
-    "@tiptap/extension-underline": "^2.0.4",
-    "@tiptap/pm": "^2.0.4",
-    "@tiptap/react": "^2.0.4",
-    "@tiptap/starter-kit": "^2.0.4",
-    "@tiptap/suggestion": "^2.0.4",
+    "@plane/ui": "*",
+    "@plane/lite-text-editor": "*",
+    "@plane/rich-text-editor": "*",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",
     "js-cookie": "^3.0.1",
@@ -51,12 +34,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
-    "react-moveable": "^0.54.1",
     "swr": "^2.2.2",
     "tailwind-merge": "^1.14.0",
-    "tiptap-markdown": "^0.8.2",
     "typescript": "4.9.5",
-    "use-debounce": "^9.0.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -70,7 +50,7 @@
     "eslint": "8.34.0",
     "eslint-config-custom": "*",
     "eslint-config-next": "13.2.1",
-    "tsconfig": "*",
-    "tailwind-config-custom": "*"
+    "tailwind-config-custom": "*",
+    "tsconfig": "*"
   }
 }
diff --git a/space/pages/_app.tsx b/space/pages/_app.tsx
index 33c137d41..7e00f4d8c 100644
--- a/space/pages/_app.tsx
+++ b/space/pages/_app.tsx
@@ -4,6 +4,8 @@ import { ThemeProvider } from "next-themes";
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
+import "styles/table.css";
+
 // contexts
 import { ToastContextProvider } from "contexts/toast.context";
 // mobx store provider
diff --git a/space/services/app-config.service.ts b/space/services/app-config.service.ts
index 713cda3da..09a6989ef 100644
--- a/space/services/app-config.service.ts
+++ b/space/services/app-config.service.ts
@@ -3,12 +3,13 @@ import APIService from "services/api.service";
 // helper
 import { API_BASE_URL } from "helpers/common.helper";
 
-export interface IEnvConfig {
-  github: string;
-  google: string;
-  github_app_name: string | null;
+export interface IAppConfig {
   email_password_login: boolean;
+  google_client_id: string | null;
+  github_app_name: string | null;
+  github_client_id: string | null;
   magic_login: boolean;
+  slack_client_id: string | null;
 }
 
 export class AppConfigService extends APIService {
@@ -16,7 +17,7 @@ export class AppConfigService extends APIService {
     super(API_BASE_URL);
   }
 
-  async envConfig(): Promise<IEnvConfig> {
+  async envConfig(): Promise<IAppConfig> {
     return this.get("/api/configs/", {
       headers: {
         "Content-Type": "application/json",
diff --git a/space/services/file.service.ts b/space/services/file.service.ts
index 6df6423f4..ce1f50e70 100644
--- a/space/services/file.service.ts
+++ b/space/services/file.service.ts
@@ -1,5 +1,6 @@
 import APIService from "services/api.service";
 import { API_BASE_URL } from "helpers/common.helper";
+import axios from "axios";
 
 interface UnSplashImage {
   id: string;
@@ -25,19 +26,49 @@ interface UnSplashImageUrls {
   small_s3: string;
 }
 
-class FileServices extends APIService {
+class FileService extends APIService {
+  private cancelSource: any;
+
   constructor() {
     super(API_BASE_URL);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.deleteImage = this.deleteImage.bind(this);
+    this.cancelUpload = this.cancelUpload.bind(this);
   }
 
   async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
-    return this.mediaUpload(`/api/workspaces/${workspaceSlug}/file-assets/`, file)
+    this.cancelSource = axios.CancelToken.source();
+    return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "multipart/form-data",
+      },
+      cancelToken: this.cancelSource.token,
+    })
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response?.data;
+        if (axios.isCancel(error)) {
+          console.log(error.message);
+        } else {
+          throw error?.response?.data;
+        }
       });
   }
 
+  cancelUpload() {
+    this.cancelSource.cancel("Upload cancelled");
+  }
+  getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
+    return async (file: File) => {
+      const formData = new FormData();
+      formData.append("asset", file);
+      formData.append("attributes", JSON.stringify({}));
+
+      const data = await this.uploadFile(workspaceSlug, formData);
+      return data.asset;
+    };
+  }
+
   async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
     return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
       .then((response) => response?.status)
@@ -76,6 +107,6 @@ class FileServices extends APIService {
   }
 }
 
-const fileServices = new FileServices();
+const fileService = new FileService();
 
-export default fileServices;
+export default fileService;
diff --git a/space/store/mentions.store.ts b/space/store/mentions.store.ts
new file mode 100644
index 000000000..e890681d3
--- /dev/null
+++ b/space/store/mentions.store.ts
@@ -0,0 +1,43 @@
+import { IMentionHighlight } from "@plane/lite-text-editor";
+import { RootStore } from "./root";
+import { computed, makeObservable } from "mobx";
+
+export interface IMentionsStore {
+  // mentionSuggestions: IMentionSuggestion[];
+  mentionHighlights: IMentionHighlight[];
+}
+
+export class MentionsStore implements IMentionsStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    // rootStore
+    this.rootStore = _rootStore;
+
+    makeObservable(this, {
+      mentionHighlights: computed,
+      // mentionSuggestions: computed
+    });
+  }
+
+  // get mentionSuggestions() {
+  //     const projectMembers = this.rootStore.project.project.
+
+  //     const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({
+  //         id: member.member.id,
+  //         type: "User",
+  //         title: member.member.display_name,
+  //         subtitle: member.member.email ?? "",
+  //         avatar: member.member.avatar,
+  //         redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
+  //     }))
+
+  //     return suggestions
+  // }
+
+  get mentionHighlights() {
+    const user = this.rootStore.user.currentUser;
+    return user ? [user.id] : [];
+  }
+}
diff --git a/space/store/root.ts b/space/store/root.ts
index 6b87020ef..22b951d20 100644
--- a/space/store/root.ts
+++ b/space/store/root.ts
@@ -5,6 +5,7 @@ import UserStore from "./user";
 import IssueStore, { IIssueStore } from "./issue";
 import ProjectStore, { IProjectStore } from "./project";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
+import { IMentionsStore, MentionsStore } from "./mentions.store";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -13,11 +14,13 @@ export class RootStore {
   issue: IIssueStore;
   issueDetails: IIssueDetailStore;
   project: IProjectStore;
+  mentionsStore: IMentionsStore;
 
   constructor() {
     this.user = new UserStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
     this.issueDetails = new IssueDetailStore(this);
+    this.mentionsStore = new MentionsStore(this);
   }
 }
diff --git a/space/store/user.ts b/space/store/user.ts
index cec2d340f..e2b6428ef 100644
--- a/space/store/user.ts
+++ b/space/store/user.ts
@@ -2,7 +2,6 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // service
 import UserService from "services/user.service";
-import { ActorDetail } from "types/issue";
 // types
 import { IUser } from "types/user";
 
diff --git a/space/styles/editor.css b/space/styles/editor.css
index 9da250dd1..85d881eeb 100644
--- a/space/styles/editor.css
+++ b/space/styles/editor.css
@@ -155,7 +155,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 }
 
-#tiptap-container {
+#editor-container {
   table {
     border-collapse: collapse;
     table-layout: fixed;
diff --git a/space/styles/globals.css b/space/styles/globals.css
index 1782b9b81..ea04bcda6 100644
--- a/space/styles/globals.css
+++ b/space/styles/globals.css
@@ -199,9 +199,9 @@
     --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
 
     --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
 }
 
diff --git a/space/styles/table.css b/space/styles/table.css
new file mode 100644
index 000000000..8a47a8c59
--- /dev/null
+++ b/space/styles/table.css
@@ -0,0 +1,210 @@
+.tableWrapper {
+  overflow-x: auto;
+  padding: 2px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.tableWrapper table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+  margin-bottom: 3rem;
+  border: 1px solid rgba(var(--color-border-200));
+  width: 100%;
+}
+
+.tableWrapper table td,
+.tableWrapper table th {
+  min-width: 1em;
+  border: 1px solid rgba(var(--color-border-200));
+  padding: 10px 15px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  transition: background-color 0.3s ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.tableWrapper table td > *,
+.tableWrapper table th > * {
+  margin: 0 !important;
+  padding: 0.25rem 0 !important;
+}
+
+.tableWrapper table td.has-focus,
+.tableWrapper table th.has-focus {
+  box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
+}
+
+.tableWrapper table th {
+  font-weight: bold;
+  text-align: left;
+  background-color: rgba(var(--color-primary-100));
+}
+
+.tableWrapper table th * {
+  font-weight: 600;
+}
+
+.tableWrapper table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(var(--color-primary-300), 0.1);
+  pointer-events: none;
+}
+
+.tableWrapper table .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  z-index: 99;
+  background-color: rgba(var(--color-primary-400));
+  pointer-events: none;
+}
+
+.tableWrapper .tableControls {
+  position: absolute;
+}
+
+.tableWrapper .tableControls .columnsControl,
+.tableWrapper .tableControls .rowsControl {
+  transition: opacity ease-in 100ms;
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tableWrapper .tableControls .columnsControl {
+  height: 20px;
+  transform: translateY(-50%);
+}
+
+.tableWrapper .tableControls .columnsControl .columnsControlDiv {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  width: 30px;
+  height: 15px;
+}
+
+.tableWrapper .tableControls .rowsControl {
+  width: 20px;
+  transform: translateX(-50%);
+}
+
+.tableWrapper .tableControls .rowsControl .rowsControlDiv {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  height: 30px;
+  width: 15px;
+}
+
+.tableWrapper .tableControls .rowsControlDiv {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition:
+    transform ease-out 100ms,
+    background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+
+.tableWrapper .tableControls .columnsControlDiv {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition:
+    transform ease-out 100ms,
+    background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+.tableWrapper .tableControls .tableToolbox,
+.tableWrapper .tableControls .tableColorPickerToolbox {
+  border: 1px solid rgba(var(--color-border-300));
+  background-color: rgba(var(--color-background-100));
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  gap: 0.25rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
+  background-color: rgba(var(--color-background-100));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  padding: 0.1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
+  background-color: rgba(var(--color-background-100), 0.5);
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
+  border: 1px solid rgba(var(--color-border-300));
+  border-radius: 3px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.tableToolbox {
+  background-color: rgba(var(--color-background-100));
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
+  font-size: 0.85rem;
+  color: rgba(var(--color-text-300));
+}
+
+.resize-cursor .tableWrapper .tableControls .rowsControl,
+.tableWrapper.controls--disabled .tableControls .rowsControl,
+.resize-cursor .tableWrapper .tableControls .columnsControl,
+.tableWrapper.controls--disabled .tableControls .columnsControl {
+  opacity: 0;
+  pointer-events: none;
+}
diff --git a/space/types/issue.ts b/space/types/issue.ts
index 206327fcd..4b76c75e8 100644
--- a/space/types/issue.ts
+++ b/space/types/issue.ts
@@ -24,7 +24,6 @@ export interface IIssueGroup {
   title: TIssueGroupTitle;
   color: string;
   className: string;
-  icon: React.FC;
 }
 
 export interface IIssue {
@@ -40,7 +39,12 @@ export interface IIssue {
   sequence_id: number;
   start_date: any;
   state: string;
-  state_detail: any;
+  state_detail: {
+    id: string;
+    name: string;
+    group: TIssueGroupKey;
+    color: string;
+  };
   target_date: any;
   votes: IVote[];
 }
diff --git a/turbo.json b/turbo.json
index e40a56ab7..ac462d08b 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,11 +3,8 @@
   "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",
     "NEXT_PUBLIC_ENABLE_OAUTH",
     "NEXT_PUBLIC_TRACK_EVENTS",
@@ -31,6 +28,48 @@
       "dependsOn": ["^build"],
       "outputs": [".next/**", "dist/**"]
     },
+    "web#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
+      ]
+    },
+    "space#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-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/ui#build"
+      ]
+    },
+    "space#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
+      ]
+    },
+    "@plane/lite-text-editor#build": {
+      "cache": true,
+      "dependsOn": ["@plane/editor-core#build"]
+    },
+    "@plane/rich-text-editor#build": {
+      "cache": true,
+      "dependsOn": ["@plane/editor-core#build"]
+    },
     "test": {
       "dependsOn": ["^build"],
       "outputs": []
@@ -41,6 +80,9 @@
     "dev": {
       "cache": false
     },
+    "develop": {
+      "cache": false
+    },
     "start": {
       "cache": false
     },
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/Dockerfile.dev b/web/Dockerfile.dev
index d4281c9a3..29faedef7 100644
--- a/web/Dockerfile.dev
+++ b/web/Dockerfile.dev
@@ -8,4 +8,4 @@ COPY . .
 RUN yarn global add turbo
 RUN yarn install
 EXPOSE 3000
-CMD ["yarn","dev"]
+CMD ["yarn", "dev", "--filter=web"]
diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx
index 1e68cbb29..05bc89abd 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]"
-            size="md"
+            className="w-full"
+            size="xl"
             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..a78efec5d
--- /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] w-full"
+            />
+          )}
+        />
+      </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..fe8d2d51c 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,82 @@ 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] 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 } }) => (
+              <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] w-full"
+              />
+            )}
           />
         </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
+            variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
+            size="xl"
             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..a60a83230 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,37 @@ 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"
+            size="xl"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
             {isSubmitting ? "Signing up..." : "Sign up"}
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </>
diff --git a/web/components/account/github-login-button.tsx b/web/components/account/github-login-button.tsx
index 9ea5b7df2..fc140f632 100644
--- a/web/components/account/github-login-button.tsx
+++ b/web/components/account/github-login-button.tsx
@@ -32,8 +32,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   }, [code, gitCode, handleSignIn]);
 
   useEffect(() => {
-    const origin =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     setLoginCallBackURL(`${origin}/` as any);
   }, []);
 
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/custom-tooltip.tsx b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index e58d81666..3544ae46d 100644
--- a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -49,10 +49,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
             : ""
         }`}
       >
-        {params.segment === "assignees__id"
-          ? renderAssigneeName(tooltipValue.toString())
-          : tooltipValue}
-        :
+        {params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue}:
       </span>
       <span>{datum.value}</span>
     </div>
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
index 733d17437..0908609c9 100644
--- a/web/components/analytics/custom-analytics/graph/index.tsx
+++ b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -3,10 +3,10 @@ import { BarDatum } from "@nivo/bar";
 // components
 import { CustomTooltip } from "./custom-tooltip";
 // ui
-import { BarGraph } from "components/ui";
+import { BarGraph, Tooltip } 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 [];
 
@@ -86,40 +72,55 @@ export const AnalyticsGraph: React.FC<Props> = ({
         renderTick:
           params.x_axis === "assignees__id"
             ? (datum) => {
-                const avatar = analytics.extras.assignee_details?.find(
-                  (a) => a?.assignees__display_name === datum?.value
-                )?.assignees__avatar;
+                const assignee = analytics.extras.assignee_details?.find((a) => a?.assignees__id === datum?.value);
 
-                if (avatar && avatar !== "")
+                if (assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
                   return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <image
-                        x={-8}
-                        y={10}
-                        width={16}
-                        height={16}
-                        xlinkHref={avatar}
-                        style={{ clipPath: "circle(50%)" }}
-                      />
-                    </g>
+                    <Tooltip tooltipContent={assignee?.assignees__display_name}>
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <image
+                          x={-8}
+                          y={10}
+                          width={16}
+                          height={16}
+                          xlinkHref={assignee?.assignees__avatar}
+                          style={{ clipPath: "circle(50%)" }}
+                        />
+                      </g>
+                    </Tooltip>
                   );
                 else
                   return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <circle cy={18} r={8} fill="#374151" />
-                      <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()
-                            : "?"
-                          : datum.value && datum.value !== "None"
-                          ? `${datum.value}`.toUpperCase()[0]
-                          : "?"}
-                      </text>
-                    </g>
+                    <Tooltip tooltipContent={assignee?.assignees__display_name}>
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <circle cy={18} r={8} fill="#374151" />
+                        <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
+                          {params.x_axis === "assignees__id"
+                            ? datum.value && datum.value !== "None"
+                              ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
+                              : "?"
+                            : datum.value && datum.value !== "None"
+                            ? `${datum.value}`.toUpperCase()[0]
+                            : "?"}
+                        </text>
+                      </g>
+                    </Tooltip>
                   );
               }
-            : undefined,
+            : (datum) => (
+                <g transform={`translate(${datum.x},${datum.y + 10})`}>
+                  <text
+                    x={0}
+                    y={datum.y}
+                    textAnchor={`${barGraphData.data.length > 7 ? "end" : "middle"}`}
+                    fontSize={10}
+                    fill="rgb(var(--color-text-200))"
+                    className={`${barGraphData.data.length > 7 ? "-rotate-45" : ""}`}
+                  >
+                    {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..195aa2e56 100644
--- a/web/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/components/analytics/custom-analytics/select-bar.tsx
@@ -1,80 +1,86 @@
-// 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);
+              }}
+              params={params}
+            />
+          )}
+        />
+      </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 84%
rename from web/components/analytics/select/project.tsx
rename to web/components/analytics/custom-analytics/select/project.tsx
index 5d625bd02..c57e56709 100644
--- a/web/components/analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@@ -1,12 +1,12 @@
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // types
 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 85%
rename from web/components/analytics/select/segment.tsx
rename to web/components/analytics/custom-analytics/select/segment.tsx
index e125d8401..4efc6a211 100644
--- a/web/components/analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { IAnalyticsParams, TXAxisValues } from "types";
 // constants
@@ -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 64%
rename from web/components/analytics/select/x-axis.tsx
rename to web/components/analytics/custom-analytics/select/x-axis.tsx
index a403cad39..66582a1e9 100644
--- a/web/components/analytics/select/x-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@@ -1,18 +1,21 @@
 import { useRouter } from "next/router";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
-import { TXAxisValues } from "types";
+import { IAnalyticsParams, TXAxisValues } from "types";
 // constants
 import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues;
   onChange: (val: string) => void;
+  params: IAnalyticsParams;
 };
 
-export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => {
+export const SelectXAxis: React.FC<Props> = (props) => {
+  const { value, onChange, params } = props;
+
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
 
@@ -25,8 +28,9 @@ 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 (params.segment === item.value) 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 93%
rename from web/components/analytics/select/y-axis.tsx
rename to web/components/analytics/custom-analytics/select/y-axis.tsx
index ef22332bd..3f7348cce 100644
--- a/web/components/analytics/select/y-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/y-axis.tsx
@@ -1,5 +1,5 @@
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { TYAxisValues } from "types";
 // constants
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..c99a7cece
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -0,0 +1,214 @@
+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, LayersIcon } from "@plane/ui";
+// icons
+import { CalendarDays, Download, RefreshCw } from "lucide-react";
+// 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">
+            <LayersIcon 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">
+              <CalendarDays 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={<RefreshCw className="h-3.5 w-3.5" />}
+            onClick={() => {
+              if (!workspaceSlug) return;
+
+              mutate(ANALYTICS(workspaceSlug.toString(), params));
+            }}
+          >
+            Refresh
+          </Button>
+          <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} 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..1d578b0d8 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";
+import { PriorityIcon } from "@plane/ui";
 // 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/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
index 23af2b384..0ff82c7af 100644
--- a/web/components/analytics/scope-and-demand/demand.tsx
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -1,5 +1,5 @@
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 // types
 import { IDefaultAnalyticsResponse, TStateGroups } from "types";
 // constants
@@ -52,7 +52,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
     </div>
     <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
-        <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
+        <Triangle className="h-4 w-4" />
         <span>Estimate Demand:</span>
       </p>
       <p className="font-medium">
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/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
index 9231947bd..4c69a23c5 100644
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -22,9 +22,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             keys={["count"]}
             height="250px"
             colors={() => `#f97316`}
-            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) =>
-              d.count > 0 ? d.count : 50
-            )}
+            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => (d.count > 0 ? d.count : 50))}
             tooltip={(datum) => {
               const assignee = defaultAnalytics.pending_issue_user.find(
                 (a) => a.assignees__id === `${datum.indexValue}`
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/not-authorized-view.tsx b/web/components/auth-screens/not-authorized-view.tsx
index 32d96eff2..509bc1e84 100644
--- a/web/components/auth-screens/not-authorized-view.tsx
+++ b/web/components/auth-screens/not-authorized-view.tsx
@@ -31,9 +31,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-custom-text-100">
-          Oops! You are not authorized to view this page
-        </h1>
+        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
 
         <div className="w-full max-w-md text-base text-custom-text-200">
           {user ? (
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 73b824b63..5713e2ad8 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -1,24 +1,20 @@
 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";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
-import { AssignmentClipboardIcon } from "components/icons";
+import { ClipboardList } from "lucide-react";
 // images
 import JoinProjectImg from "public/auth/project-not-authorized.svg";
-// fetch-keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 
 export const JoinProject: React.FC = () => {
   const [isJoiningProject, setIsJoiningProject] = useState(false);
 
+  const { project: projectStore } = useMobxStore();
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -26,18 +22,10 @@ export const JoinProject: React.FC = () => {
     if (!workspaceSlug || !projectId) return;
 
     setIsJoiningProject(true);
-    projectService
-      .joinProject(workspaceSlug as string, {
-        project_ids: [projectId as string],
-      })
-      .then(async () => {
-        await mutate(USER_PROJECT_VIEW(projectId.toString()));
-        setIsJoiningProject(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsJoiningProject(false);
-      });
+
+    projectStore.joinProject(workspaceSlug.toString(), [projectId.toString()]).finally(() => {
+      setIsJoiningProject(false);
+    });
   };
 
   return (
@@ -45,25 +33,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={<ClipboardList 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 d0c9a1be6..1083073da 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // component
-import { CustomSelect, ToggleSwitch } from "components/ui";
+import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "components/automation";
 // icon
 import { ArchiveRestore } from "lucide-react";
@@ -11,19 +13,21 @@ import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
 import { IProject } from "types";
 
 type Props = {
-  projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
-  disabled?: boolean;
 };
 
-export const AutoArchiveAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+const initialValues: Partial<IProject> = { archive_in: 1 };
+
+export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
+  const { handleChange } = props;
+  // states
   const [monthModal, setmonthModal] = useState(false);
 
-  const initialValues: Partial<IProject> = { archive_in: 1 };
+  const { user: userStore, project: projectStore } = useMobxStore();
+
+  const projectDetails = projectStore.currentProjectDetails;
+  const userRole = userStore.currentProjectRole;
+
   return (
     <>
       <SelectMonthModal
@@ -33,7 +37,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
@@ -42,63 +46,62 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
             <div className="">
               <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
               <p className="text-sm text-custom-text-200 tracking-tight">
-                Plane will auto archive issues that have been completed or canceled.
+                Plane will auto archive issues that have been completed or cancelled.
               </p>
             </div>
           </div>
           <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}
+            disabled={userRole !== 20}
           />
         </div>
 
-        {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">
-                <CustomSelect
-                  value={projectDetails?.archive_in}
-                  label={`${projectDetails?.archive_in} ${
-                    projectDetails?.archive_in === 1 ? "Month" : "Months"
-                  }`}
-                  onChange={(val: number) => {
-                    handleChange({ archive_in: val });
-                  }}
-                  input
-                  verticalPosition="bottom"
-                  width="w-full"
-                  disabled={disabled}
-                >
-                  <>
-                    {PROJECT_AUTOMATION_MONTHS.map((month) => (
-                      <CustomSelect.Option key={month.label} value={month.value}>
-                        <span className="text-sm">{month.label}</span>
-                      </CustomSelect.Option>
-                    ))}
+        {projectDetails ? (
+          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">
+                  <CustomSelect
+                    value={projectDetails?.archive_in}
+                    label={`${projectDetails?.archive_in} ${projectDetails?.archive_in === 1 ? "Month" : "Months"}`}
+                    onChange={(val: number) => {
+                      handleChange({ archive_in: val });
+                    }}
+                    input
+                    width="w-full"
+                    disabled={userRole !== 20}
+                  >
+                    <>
+                      {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                        <CustomSelect.Option key={month.label} value={month.value}>
+                          <span className="text-sm">{month.label}</span>
+                        </CustomSelect.Option>
+                      ))}
 
-                    <button
-                      type="button"
-                      className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
-                      onClick={() => setmonthModal(true)}
-                    >
-                      Customise Time Range
-                    </button>
-                  </>
-                </CustomSelect>
+                      <button
+                        type="button"
+                        className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => setmonthModal(true)}
+                      >
+                        Customise Time Range
+                      </button>
+                    </>
+                  </CustomSelect>
+                </div>
               </div>
             </div>
-          </div>
+          )
+        ) : (
+          <Loader className="ml-12">
+            <Loader.Item height="50px" />
+          </Loader>
         )}
       </div>
     </>
   );
-};
+});
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 063501036..1f0ef1c31 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -1,49 +1,32 @@
 import React, { useState } from "react";
-
-import useSWR from "swr";
-
-import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // component
-import { CustomSearchSelect, CustomSelect, Icon, ToggleSwitch } from "components/ui";
 import { SelectMonthModal } from "components/automation";
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } 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";
-// constants
-import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
-import { STATES_LIST } from "constants/fetch-keys";
 // types
 import { IProject } from "types";
-// helper
-import { getStatesList } from "helpers/state.helper";
+// fetch keys
+import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
 
 type Props = {
-  projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
-  disabled?: boolean;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
+  const { handleChange } = props;
+  // states
   const [monthModal, setmonthModal] = useState(false);
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { user: userStore, project: projectStore, projectState: projectStateStore } = useMobxStore();
 
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
+  const userRole = userStore.currentProjectRole;
+  const projectDetails = projectStore.currentProjectDetails;
+  // const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
+  const states = projectStateStore.projectStates;
 
   const options = states
     ?.filter((state) => state.group === "cancelled")
@@ -60,11 +43,9 @@ export const AutoCloseAutomation: React.FC<Props> = ({
 
   const multipleOptions = (options ?? []).length > 1;
 
-  const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
+  const defaultState = states?.find((s) => s.group === "cancelled")?.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> = {
@@ -81,7 +62,6 @@ export const AutoCloseAutomation: React.FC<Props> = ({
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-
       <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
@@ -91,7 +71,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({
             <div className="">
               <h4 className="text-sm font-medium">Auto-close issues</h4>
               <p className="text-sm text-custom-text-200 tracking-tight">
-                Plane will automatically close issue that haven’t been completed or canceled.
+                Plane will automatically close issue that haven{"'"}t been completed or cancelled.
               </p>
             </div>
           </div>
@@ -103,95 +83,93 @@ export const AutoCloseAutomation: React.FC<Props> = ({
                 : handleChange({ close_in: 0, default_state: null })
             }
             size="sm"
-            disabled={disabled}
+            disabled={userRole !== 20}
           />
         </div>
 
-        {projectDetails?.close_in !== 0 && (
-          <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
+        {projectDetails ? (
+          projectDetails.close_in !== 0 && (
+            <div className="ml-12">
+              <div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200">
+                <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">
+                    <CustomSelect
+                      value={projectDetails?.close_in}
+                      label={`${projectDetails?.close_in} ${projectDetails?.close_in === 1 ? "Month" : "Months"}`}
+                      onChange={(val: number) => {
+                        handleChange({ close_in: val });
+                      }}
+                      input
+                      width="w-full"
+                      disabled={userRole !== 20}
+                    >
+                      <>
+                        {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                          <CustomSelect.Option key={month.label} value={month.value}>
+                            {month.label}
+                          </CustomSelect.Option>
+                        ))}
+                        <button
+                          type="button"
+                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => setmonthModal(true)}
+                        >
+                          Customise Time Range
+                        </button>
+                      </>
+                    </CustomSelect>
+                  </div>
                 </div>
-                <div className="w-1/2">
-                  <CustomSelect
-                    value={projectDetails?.close_in}
-                    label={`${projectDetails?.close_in} ${
-                      projectDetails?.close_in === 1 ? "Month" : "Months"
-                    }`}
-                    onChange={(val: number) => {
-                      handleChange({ close_in: val });
-                    }}
-                    input
-                    width="w-full"
-                    disabled={disabled}
-                  >
-                    <>
-                      {PROJECT_AUTOMATION_MONTHS.map((month) => (
-                        <CustomSelect.Option key={month.label} value={month.value}>
-                          {month.label}
-                        </CustomSelect.Option>
-                      ))}
-                      <button
-                        type="button"
-                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => setmonthModal(true)}
-                      >
-                        Customise Time Range
-                      </button>
-                    </>
-                  </CustomSelect>
-                </div>
-              </div>
 
-              <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 Status</div>
-                <div className="w-1/2 ">
-                  <CustomSearchSelect
-                    value={
-                      projectDetails?.default_state ? projectDetails?.default_state : defaultState
-                    }
-                    label={
-                      <div className="flex items-center gap-2">
-                        {selectedOption ? (
-                          <StateGroupIcon
-                            stateGroup={selectedOption.group}
-                            color={selectedOption.color}
-                            height="16px"
-                            width="16px"
-                          />
-                        ) : currentDefaultState ? (
-                          <StateGroupIcon
-                            stateGroup={currentDefaultState.group}
-                            color={currentDefaultState.color}
-                            height="16px"
-                            width="16px"
-                          />
-                        ) : (
-                          <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
-                        )}
-                        {selectedOption?.name
-                          ? selectedOption.name
-                          : currentDefaultState?.name ?? (
-                              <span className="text-custom-text-200">State</span>
-                            )}
-                      </div>
-                    }
-                    onChange={(val: string) => {
-                      handleChange({ default_state: val });
-                    }}
-                    options={options}
-                    disabled={!multipleOptions}
-                    width="w-full"
-                    input
-                  />
+                <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 Status</div>
+                  <div className="w-1/2 ">
+                    <CustomSearchSelect
+                      value={projectDetails?.default_state ?? defaultState}
+                      label={
+                        <div className="flex items-center gap-2">
+                          {selectedOption ? (
+                            <StateGroupIcon
+                              stateGroup={selectedOption.group}
+                              color={selectedOption.color}
+                              height="16px"
+                              width="16px"
+                            />
+                          ) : currentDefaultState ? (
+                            <StateGroupIcon
+                              stateGroup={currentDefaultState.group}
+                              color={currentDefaultState.color}
+                              height="16px"
+                              width="16px"
+                            />
+                          ) : (
+                            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                          )}
+                          {selectedOption?.name
+                            ? selectedOption.name
+                            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+                        </div>
+                      }
+                      onChange={(val: string) => {
+                        handleChange({ default_state: val });
+                      }}
+                      options={options}
+                      disabled={!multipleOptions}
+                      width="w-full"
+                      input
+                    />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          )
+        ) : (
+          <Loader className="ml-12">
+            <Loader.Item height="50px" />
+          </Loader>
         )}
       </div>
     </>
   );
-};
+});
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 18239d62b..ad53527d7 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}>
@@ -83,7 +54,7 @@ export const SelectMonthModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -97,33 +68,75 @@ export const SelectMonthModal: React.FC<Props> = ({
               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 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">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-custom-shadow-md 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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Submitting..." : "Submit"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/breadcrumbs/index.tsx b/web/components/breadcrumbs/index.tsx
index 0e5cfb9c4..2702b8e68 100644
--- a/web/components/breadcrumbs/index.tsx
+++ b/web/components/breadcrumbs/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // icons
-import { Icon } from "components/ui";
+import { MoveLeft } from "lucide-react";
 
 type BreadcrumbsProps = {
   children: any;
@@ -19,10 +19,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
           className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
           onClick={() => router.back()}
         >
-          <Icon
-            iconName="keyboard_backspace"
-            className="text-base leading-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100"
-          />
+          <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
         </button>
         {children}
       </div>
@@ -48,14 +45,8 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   <>
     {link ? (
       <Link href={link}>
-        <a
-          className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${
-            linkTruncate ? "truncate" : ""
-          }`}
-        >
-          <p
-            className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}
-          >
+        <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${linkTruncate ? "truncate" : ""}`}>
+          <p className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}>
             {icon ?? null}
             {title}
           </p>
diff --git a/web/components/command-palette/change-interface-theme.tsx b/web/components/command-palette/change-interface-theme.tsx
index 87d1289ae..0b899f811 100644
--- a/web/components/command-palette/change-interface-theme.tsx
+++ b/web/components/command-palette/change-interface-theme.tsx
@@ -1,39 +1,36 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-
-// cmdk
+import React, { FC, Dispatch, SetStateAction, useEffect, useState } from "react";
 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";
-// mobx react lite
+import { Settings } from "lucide-react";
 import { observer } from "mobx-react-lite";
-// mobx store
+// hooks
+import useToast from "hooks/use-toast";
 import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { THEME_OPTIONS } from "constants/themes";
 
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpen }) => {
-  const store: any = useMobxStore();
-
+export const ChangeInterfaceTheme: FC<Props> = observer((props) => {
+  const { setIsPaletteOpen } = props;
+  // store
+  const { user: userStore } = useMobxStore();
+  // states
   const [mounted, setMounted] = useState(false);
-
+  // hooks
   const { setTheme } = useTheme();
-
-  const { user, mutateUser } = useUser();
+  const { setToastAlert } = useToast();
 
   const updateUserTheme = (newTheme: string) => {
-    if (!user) return;
     setTheme(newTheme);
-    return store.user
-      .updateCurrentUserSettings({ theme: { ...user.theme, theme: newTheme } })
-      .then((response: any) => response)
-      .catch((error: any) => error);
+    return userStore.updateCurrentUserTheme(newTheme).catch(() => {
+      setToastAlert({
+        title: "Failed to save user theme settings!",
+        type: "error",
+      });
+    });
   };
 
   // useEffect only runs on the client, so now we can safely show the UI
@@ -45,7 +42,7 @@ export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpe
 
   return (
     <>
-      {THEMES_OBJ.filter((t) => t.value !== "custom").map((theme) => (
+      {THEME_OPTIONS.filter((t) => t.value !== "custom").map((theme) => (
         <Command.Item
           key={theme.value}
           onSelect={() => {
@@ -55,7 +52,7 @@ export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpe
           className="focus:outline-none"
         >
           <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            <Settings className="h-4 w-4 text-custom-text-200" />
             {theme.label}
           </div>
         </Command.Item>
diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx
deleted file mode 100644
index d20a44290..000000000
--- a/web/components/command-palette/command-k.tsx
+++ /dev/null
@@ -1,793 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// cmdk
-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";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-import useDebounce from "hooks/use-debounce";
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// components
-import {
-  ChangeInterfaceTheme,
-  ChangeIssueAssignee,
-  ChangeIssuePriority,
-  ChangeIssueState,
-  commandGroups,
-} from "components/command-palette";
-// ui
-import { Icon, Loader, ToggleSwitch, Tooltip } from "components/ui";
-// icons
-import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
-import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import { IIssue, IWorkspaceSearchResults } from "types";
-// fetch-keys
-import { INBOX_LIST, ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
-type Props = {
-  deleteIssue: () => void;
-  isPaletteOpen: boolean;
-  setIsPaletteOpen: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => {
-  const [placeholder, setPlaceholder] = useState("Type a command or search...");
-
-  const [resultsCount, setResultsCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSearching, setIsSearching] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [results, setResults] = useState<IWorkspaceSearchResults>({
-    results: {
-      workspace: [],
-      project: [],
-      issue: [],
-      cycle: [],
-      module: [],
-      issue_view: [],
-      page: [],
-    },
-  });
-  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
-
-  const [pages, setPages] = useState<string[]>([]);
-  const page = pages[pages.length - 1];
-
-  const debouncedSearchTerm = useDebounce(searchTerm, 500);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
-
-  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)
-      : null
-  );
-
-  const { data: inboxList } = useSWR(
-    workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const updateIssue = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId as string),
-
-        (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload = { ...formData };
-      await issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then(() => {
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-          mutate(ISSUE_DETAILS(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, user]
-  );
-
-  const handleIssueAssignees = (assignee: string) => {
-    if (!issueDetails) return;
-
-    setIsPaletteOpen(false);
-    const updatedAssignees = issueDetails.assignees ?? [];
-
-    if (updatedAssignees.includes(assignee)) {
-      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
-    } else {
-      updatedAssignees.push(assignee);
-    }
-    updateIssue({ assignees_list: updatedAssignees });
-  };
-
-  const redirect = (path: string) => {
-    setIsPaletteOpen(false);
-    router.push(path);
-  };
-
-  const createNewWorkspace = () => {
-    setIsPaletteOpen(false);
-    router.push("/create-workspace");
-  };
-
-  const copyIssueUrlToClipboard = useCallback(() => {
-    if (!router.query.issueId) return;
-
-    const url = new URL(window.location.href);
-    copyTextToClipboard(url.href)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Copied to clipboard",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Some error occurred",
-        });
-      });
-  }, [router, setToastAlert]);
-
-  useEffect(
-    () => {
-      if (!workspaceSlug) return;
-
-      setIsLoading(true);
-
-      if (debouncedSearchTerm) {
-        setIsSearching(true);
-        workspaceService
-          .searchWorkspace(workspaceSlug as string, {
-            ...(projectId ? { project_id: projectId.toString() } : {}),
-            search: debouncedSearchTerm,
-            workspace_search: !projectId ? true : isWorkspaceLevel,
-          })
-          .then((results) => {
-            setResults(results);
-            const count = Object.keys(results.results).reduce(
-              (accumulator, key) => (results.results as any)[key].length + accumulator,
-              0
-            );
-            setResultsCount(count);
-          })
-          .finally(() => {
-            setIsLoading(false);
-            setIsSearching(false);
-          });
-      } else {
-        setResults({
-          results: {
-            workspace: [],
-            project: [],
-            issue: [],
-            cycle: [],
-            module: [],
-            issue_view: [],
-            page: [],
-          },
-        });
-        setIsLoading(false);
-        setIsSearching(false);
-      }
-    },
-    [debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes
-  );
-
-  if (!user) return null;
-
-  return (
-    <Transition.Root
-      show={isPaletteOpen}
-      afterLeave={() => {
-        setSearchTerm("");
-      }}
-      as={React.Fragment}
-    >
-      <Dialog as="div" className="relative z-30" onClose={() => setIsPaletteOpen(false)}>
-        <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-30 overflow-y-auto p-4 sm:p-6 md:p-20">
-          <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 mx-auto max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
-              <Command
-                filter={(value, search) => {
-                  if (value.toLowerCase().includes(search.toLowerCase())) return 1;
-                  return 0;
-                }}
-                onKeyDown={(e) => {
-                  // when search is empty and page is undefined
-                  // when user tries to close the modal with esc
-                  if (e.key === "Escape" && !page && !searchTerm) {
-                    setIsPaletteOpen(false);
-                  }
-                  // Escape goes to previous page
-                  // Backspace goes to previous page when search is empty
-                  if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
-                    e.preventDefault();
-                    setPages((pages) => pages.slice(0, -1));
-                    setPlaceholder("Type a command or search...");
-                  }
-                }}
-              >
-                <div
-                  className={`flex sm:items-center gap-4 p-3 pb-0 ${
-                    issueDetails ? "flex-col sm:flex-row justify-between" : "justify-end"
-                  }`}
-                >
-                  {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}
-                    </div>
-                  )}
-                  {projectId && (
-                    <Tooltip tooltipContent="Toggle workspace level search">
-                      <div className="flex-shrink-0 self-end sm:self-center flex items-center gap-1 text-xs cursor-pointer">
-                        <button
-                          type="button"
-                          onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          className="flex-shrink-0"
-                        >
-                          Workspace Level
-                        </button>
-                        <ToggleSwitch
-                          value={isWorkspaceLevel}
-                          onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                        />
-                      </div>
-                    </Tooltip>
-                  )}
-                </div>
-                <div className="relative">
-                  <MagnifyingGlassIcon
-                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-200"
-                    aria-hidden="true"
-                  />
-                  <Command.Input
-                    className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
-                    placeholder={placeholder}
-                    value={searchTerm}
-                    onValueChange={(e) => {
-                      setSearchTerm(e);
-                    }}
-                    autoFocus
-                    tabIndex={1}
-                  />
-                </div>
-
-                <Command.List className="max-h-96 overflow-scroll p-2">
-                  {searchTerm !== "" && (
-                    <h5 className="text-xs text-custom-text-100 mx-[3px] my-4">
-                      Search results for{" "}
-                      <span className="font-medium">
-                        {'"'}
-                        {searchTerm}
-                        {'"'}
-                      </span>{" "}
-                      in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
-                    </h5>
-                  )}
-
-                  {!isLoading &&
-                    resultsCount === 0 &&
-                    searchTerm !== "" &&
-                    debouncedSearchTerm !== "" && (
-                      <div className="my-4 text-center text-custom-text-200">No results found.</div>
-                    )}
-
-                  {(isLoading || isSearching) && (
-                    <Command.Loading>
-                      <Loader className="space-y-3">
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                        <Loader.Item height="40px" />
-                      </Loader>
-                    </Command.Loading>
-                  )}
-
-                  {debouncedSearchTerm !== "" &&
-                    Object.keys(results.results).map((key) => {
-                      const section = (results.results as any)[key];
-                      const currentSection = commandGroups[key];
-
-                      if (section.length > 0) {
-                        return (
-                          <Command.Group key={key} heading={currentSection.title}>
-                            {section.map((item: any) => (
-                              <Command.Item
-                                key={item.id}
-                                onSelect={() => {
-                                  setIsPaletteOpen(false);
-                                  router.push(currentSection.path(item));
-                                }}
-                                value={`${key}-${item?.name}`}
-                                className="focus:outline-none"
-                              >
-                                <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>
-                                </div>
-                              </Command.Item>
-                            ))}
-                          </Command.Group>
-                        );
-                      }
-                    })}
-
-                  {!page && (
-                    <>
-                      {issueId && (
-                        <Command.Group heading="Issue actions">
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              setPlaceholder("Change state...");
-                              setSearchTerm("");
-                              setPages([...pages, "change-issue-state"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="grid_view" />
-                              Change state...
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setPlaceholder("Change priority...");
-                              setSearchTerm("");
-                              setPages([...pages, "change-issue-priority"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="bar_chart" />
-                              Change priority...
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setPlaceholder("Assign to...");
-                              setSearchTerm("");
-                              setPages([...pages, "change-issue-assignee"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="group" />
-                              Assign to...
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              handleIssueAssignees(user.id);
-                              setSearchTerm("");
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              {issueDetails?.assignees.includes(user.id) ? (
-                                <>
-                                  <Icon iconName="person_remove" />
-                                  Un-assign from me
-                                </>
-                              ) : (
-                                <>
-                                  <Icon iconName="person_add" />
-                                  Assign to me
-                                </>
-                              )}
-                            </div>
-                          </Command.Item>
-                          <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="delete" />
-                              Delete issue
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              copyIssueUrlToClipboard();
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="link" />
-                              Copy issue URL
-                            </div>
-                          </Command.Item>
-                        </Command.Group>
-                      )}
-                      <Command.Group heading="Issue">
-                        <Command.Item
-                          onSelect={() => {
-                            setIsPaletteOpen(false);
-                            const e = new KeyboardEvent("keydown", {
-                              key: "c",
-                            });
-                            document.dispatchEvent(e);
-                          }}
-                          className="focus:bg-custom-background-80"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="stack" />
-                            Create new issue
-                          </div>
-                          <kbd>C</kbd>
-                        </Command.Item>
-                      </Command.Group>
-
-                      {workspaceSlug && (
-                        <Command.Group heading="Project">
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              const e = new KeyboardEvent("keydown", {
-                                key: "p",
-                              });
-                              document.dispatchEvent(e);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="create_new_folder" />
-                              Create new project
-                            </div>
-                            <kbd>P</kbd>
-                          </Command.Item>
-                        </Command.Group>
-                      )}
-
-                      {projectId && (
-                        <>
-                          <Command.Group heading="Cycle">
-                            <Command.Item
-                              onSelect={() => {
-                                setIsPaletteOpen(false);
-                                const e = new KeyboardEvent("keydown", {
-                                  key: "q",
-                                });
-                                document.dispatchEvent(e);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="contrast" />
-                                Create new cycle
-                              </div>
-                              <kbd>Q</kbd>
-                            </Command.Item>
-                          </Command.Group>
-                          <Command.Group heading="Module">
-                            <Command.Item
-                              onSelect={() => {
-                                setIsPaletteOpen(false);
-                                const e = new KeyboardEvent("keydown", {
-                                  key: "m",
-                                });
-                                document.dispatchEvent(e);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="dataset" />
-                                Create new module
-                              </div>
-                              <kbd>M</kbd>
-                            </Command.Item>
-                          </Command.Group>
-                          <Command.Group heading="View">
-                            <Command.Item
-                              onSelect={() => {
-                                setIsPaletteOpen(false);
-                                const e = new KeyboardEvent("keydown", {
-                                  key: "v",
-                                });
-                                document.dispatchEvent(e);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="photo_filter" />
-                                Create new view
-                              </div>
-                              <kbd>V</kbd>
-                            </Command.Item>
-                          </Command.Group>
-                          <Command.Group heading="Page">
-                            <Command.Item
-                              onSelect={() => {
-                                setIsPaletteOpen(false);
-                                const e = new KeyboardEvent("keydown", {
-                                  key: "d",
-                                });
-                                document.dispatchEvent(e);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="article" />
-                                Create new page
-                              </div>
-                              <kbd>D</kbd>
-                            </Command.Item>
-                          </Command.Group>
-                          {projectDetails && projectDetails.inbox_view && (
-                            <Command.Group heading="Inbox">
-                              <Command.Item
-                                onSelect={() => {
-                                  setIsPaletteOpen(false);
-                                  redirect(
-                                    `/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`
-                                  );
-                                }}
-                                className="focus:outline-none"
-                              >
-                                <div className="flex items-center gap-2 text-custom-text-200">
-                                  <InboxIcon className="h-4 w-4" color="#6b7280" />
-                                  Open inbox
-                                </div>
-                              </Command.Item>
-                            </Command.Group>
-                          )}
-                        </>
-                      )}
-
-                      <Command.Group heading="Workspace Settings">
-                        <Command.Item
-                          onSelect={() => {
-                            setPlaceholder("Search workspace settings...");
-                            setSearchTerm("");
-                            setPages([...pages, "settings"]);
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="settings" />
-                            Search settings...
-                          </div>
-                        </Command.Item>
-                      </Command.Group>
-                      <Command.Group heading="Account">
-                        <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="create_new_folder" />
-                            Create new workspace
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => {
-                            setPlaceholder("Change interface theme...");
-                            setSearchTerm("");
-                            setPages([...pages, "change-interface-theme"]);
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="settings" />
-                            Change interface theme...
-                          </div>
-                        </Command.Item>
-                      </Command.Group>
-                      <Command.Group heading="Help">
-                        <Command.Item
-                          onSelect={() => {
-                            setIsPaletteOpen(false);
-                            const e = new KeyboardEvent("keydown", {
-                              key: "h",
-                            });
-                            document.dispatchEvent(e);
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="rocket_launch" />
-                            Open keyboard shortcuts
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => {
-                            setIsPaletteOpen(false);
-                            window.open("https://docs.plane.so/", "_blank");
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="article" />
-                            Open Plane documentation
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => {
-                            setIsPaletteOpen(false);
-                            window.open("https://discord.com/invite/A92xrEGCge", "_blank");
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
-                            Join our Discord
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => {
-                            setIsPaletteOpen(false);
-                            window.open(
-                              "https://github.com/makeplane/plane/issues/new/choose",
-                              "_blank"
-                            );
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
-                            Report a bug
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => {
-                            setIsPaletteOpen(false);
-                            (window as any).$crisp.push(["do", "chat:open"]);
-                          }}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="sms" />
-                            Chat with us
-                          </div>
-                        </Command.Item>
-                      </Command.Group>
-                    </>
-                  )}
-
-                  {page === "settings" && workspaceSlug && (
-                    <>
-                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings`)}
-                        className="focus:outline-none"
-                      >
-                        <div className="flex items-center gap-2 text-custom-text-200">
-                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          General
-                        </div>
-                      </Command.Item>
-                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
-                        className="focus:outline-none"
-                      >
-                        <div className="flex items-center gap-2 text-custom-text-200">
-                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          Members
-                        </div>
-                      </Command.Item>
-                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
-                        className="focus:outline-none"
-                      >
-                        <div className="flex items-center gap-2 text-custom-text-200">
-                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          Billing and Plans
-                        </div>
-                      </Command.Item>
-                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
-                        className="focus:outline-none"
-                      >
-                        <div className="flex items-center gap-2 text-custom-text-200">
-                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          Integrations
-                        </div>
-                      </Command.Item>
-                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings/imports`)}
-                        className="focus:outline-none"
-                      >
-                        <div className="flex items-center gap-2 text-custom-text-200">
-                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          Import
-                        </div>
-                      </Command.Item>
-                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings/exports`)}
-                        className="focus:outline-none"
-                      >
-                        <div className="flex items-center gap-2 text-custom-text-200">
-                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          Export
-                        </div>
-                      </Command.Item>
-                    </>
-                  )}
-                  {page === "change-issue-state" && issueDetails && (
-                    <ChangeIssueState
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
-                  )}
-                  {page === "change-issue-priority" && issueDetails && (
-                    <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} />
-                  )}
-                </Command.List>
-              </Command>
-            </Dialog.Panel>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
new file mode 100644
index 000000000..04625f77a
--- /dev/null
+++ b/web/components/command-palette/command-modal.tsx
@@ -0,0 +1,748 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { Command } from "cmdk";
+import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import {
+  FileText,
+  FolderPlus,
+  LinkIcon,
+  MessageSquare,
+  Rocket,
+  Search,
+  Settings,
+  Signal,
+  Trash2,
+  UserMinus2,
+  UserPlus2,
+} from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+import { IssueService } from "services/issue";
+// hooks
+import useDebounce from "hooks/use-debounce";
+import useToast from "hooks/use-toast";
+// components
+import {
+  ChangeInterfaceTheme,
+  ChangeIssueAssignee,
+  ChangeIssuePriority,
+  ChangeIssueState,
+  commandGroups,
+} from "components/command-palette";
+import {
+  ContrastIcon,
+  DiceIcon,
+  DoubleCircleIcon,
+  LayersIcon,
+  Loader,
+  PhotoFilterIcon,
+  ToggleSwitch,
+  Tooltip,
+  UserGroupIcon,
+} from "@plane/ui";
+// icons
+import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IWorkspaceSearchResults } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  deleteIssue: () => void;
+  isPaletteOpen: boolean;
+  closePalette: () => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+const issueService = new IssueService();
+
+export const CommandModal: React.FC<Props> = observer((props) => {
+  const { deleteIssue, isPaletteOpen, closePalette } = props;
+  // states
+  const [placeholder, setPlaceholder] = useState("Type a command or search...");
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [results, setResults] = useState<IWorkspaceSearchResults>({
+    results: {
+      workspace: [],
+      project: [],
+      issue: [],
+      cycle: [],
+      module: [],
+      issue_view: [],
+      page: [],
+    },
+  });
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+  const [pages, setPages] = useState<string[]>([]);
+
+  const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const user = userStore.currentUser ?? undefined;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const page = pages[pages.length - 1];
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+
+  const { setToastAlert } = useToast();
+
+  const { data: issueDetails } = useSWR(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const updateIssue = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+
+        (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload = { ...formData };
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+          mutate(ISSUE_DETAILS(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, user]
+  );
+
+  const handleIssueAssignees = (assignee: string) => {
+    if (!issueDetails) return;
+
+    closePalette();
+    const updatedAssignees = issueDetails.assignees ?? [];
+
+    if (updatedAssignees.includes(assignee)) {
+      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    } else {
+      updatedAssignees.push(assignee);
+    }
+    updateIssue({ assignees: updatedAssignees });
+  };
+
+  const redirect = (path: string) => {
+    closePalette();
+    router.push(path);
+  };
+
+  const createNewWorkspace = () => {
+    closePalette();
+    router.push("/create-workspace");
+  };
+
+  const copyIssueUrlToClipboard = useCallback(() => {
+    if (!router.query.issueId) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  }, [router, setToastAlert]);
+
+  useEffect(
+    () => {
+      if (!workspaceSlug) return;
+
+      setIsLoading(true);
+
+      if (debouncedSearchTerm) {
+        setIsSearching(true);
+        workspaceService
+          .searchWorkspace(workspaceSlug as string, {
+            ...(projectId ? { project_id: projectId.toString() } : {}),
+            search: debouncedSearchTerm,
+            workspace_search: !projectId ? true : isWorkspaceLevel,
+          })
+          .then((results) => {
+            setResults(results);
+            const count = Object.keys(results.results).reduce(
+              (accumulator, key) => (results.results as any)[key].length + accumulator,
+              0
+            );
+            setResultsCount(count);
+          })
+          .finally(() => {
+            setIsLoading(false);
+            setIsSearching(false);
+          });
+      } else {
+        setResults({
+          results: {
+            workspace: [],
+            project: [],
+            issue: [],
+            cycle: [],
+            module: [],
+            issue_view: [],
+            page: [],
+          },
+        });
+        setIsLoading(false);
+        setIsSearching(false);
+      }
+    },
+    [debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes
+  );
+
+  if (!user) return null;
+
+  return (
+    <Transition.Root
+      show={isPaletteOpen}
+      afterLeave={() => {
+        setSearchTerm("");
+      }}
+      as={React.Fragment}
+    >
+      <Dialog as="div" className="relative z-30" onClose={() => closePalette()}>
+        <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 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <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 flex items-center justify-center w-full ">
+              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+                <Command
+                  filter={(value, search) => {
+                    if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                    return 0;
+                  }}
+                  onKeyDown={(e) => {
+                    // when search is empty and page is undefined
+                    // when user tries to close the modal with esc
+                    if (e.key === "Escape" && !page && !searchTerm) {
+                      closePalette();
+                    }
+                    // Escape goes to previous page
+                    // Backspace goes to previous page when search is empty
+                    if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
+                      e.preventDefault();
+                      setPages((pages) => pages.slice(0, -1));
+                      setPlaceholder("Type a command or search...");
+                    }
+                  }}
+                >
+                  <div
+                    className={`flex sm:items-center gap-4 p-3 pb-0 ${
+                      issueDetails ? "flex-col sm:flex-row justify-between" : "justify-end"
+                    }`}
+                  >
+                    {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}
+                      </div>
+                    )}
+                    {projectId && (
+                      <Tooltip tooltipContent="Toggle workspace level search">
+                        <div className="flex-shrink-0 self-end sm:self-center flex items-center gap-1 text-xs cursor-pointer">
+                          <button
+                            type="button"
+                            onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                            className="flex-shrink-0"
+                          >
+                            Workspace Level
+                          </button>
+                          <ToggleSwitch
+                            value={isWorkspaceLevel}
+                            onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                          />
+                        </div>
+                      </Tooltip>
+                    )}
+                  </div>
+                  <div className="relative">
+                    <Search
+                      className="pointer-events-none absolute top-1/2 -translate-y-1/2 left-4 h-4 w-4 text-custom-text-200"
+                      aria-hidden="true"
+                      strokeWidth={2}
+                    />
+                    <Command.Input
+                      className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
+                      placeholder={placeholder}
+                      value={searchTerm}
+                      onValueChange={(e) => {
+                        setSearchTerm(e);
+                      }}
+                      autoFocus
+                      tabIndex={1}
+                    />
+                  </div>
+
+                  <Command.List className="max-h-96 overflow-scroll p-2">
+                    {searchTerm !== "" && (
+                      <h5 className="text-xs text-custom-text-100 mx-[3px] my-4">
+                        Search results for{" "}
+                        <span className="font-medium">
+                          {'"'}
+                          {searchTerm}
+                          {'"'}
+                        </span>{" "}
+                        in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
+                      </h5>
+                    )}
+
+                    {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="my-4 text-center text-custom-text-200">No results found.</div>
+                    )}
+
+                    {(isLoading || isSearching) && (
+                      <Command.Loading>
+                        <Loader className="space-y-3">
+                          <Loader.Item height="40px" />
+                          <Loader.Item height="40px" />
+                          <Loader.Item height="40px" />
+                          <Loader.Item height="40px" />
+                        </Loader>
+                      </Command.Loading>
+                    )}
+
+                    {debouncedSearchTerm !== "" &&
+                      Object.keys(results.results).map((key) => {
+                        const section = (results.results as any)[key];
+                        const currentSection = commandGroups[key];
+
+                        if (section.length > 0) {
+                          return (
+                            <Command.Group key={key} heading={currentSection.title}>
+                              {section.map((item: any) => (
+                                <Command.Item
+                                  key={item.id}
+                                  onSelect={() => {
+                                    closePalette();
+                                    router.push(currentSection.path(item));
+                                  }}
+                                  value={`${key}-${item?.name}`}
+                                  className="focus:outline-none"
+                                >
+                                  <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
+                                    {currentSection.icon}
+                                    <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
+                                  </div>
+                                </Command.Item>
+                              ))}
+                            </Command.Group>
+                          );
+                        }
+                      })}
+
+                    {!page && (
+                      <>
+                        {issueId && (
+                          <Command.Group heading="Issue actions">
+                            <Command.Item
+                              onSelect={() => {
+                                closePalette();
+                                setPlaceholder("Change state...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-state"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <DoubleCircleIcon className="h-3.5 w-3.5" />
+                                Change state...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Change priority...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-priority"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Signal className="h-3.5 w-3.5" />
+                                Change priority...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Assign to...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-assignee"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <UserGroupIcon className="h-3.5 w-3.5" />
+                                Assign to...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                handleIssueAssignees(user.id);
+                                setSearchTerm("");
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                {issueDetails?.assignees.includes(user.id) ? (
+                                  <>
+                                    <UserMinus2 className="h-3.5 w-3.5" />
+                                    Un-assign from me
+                                  </>
+                                ) : (
+                                  <>
+                                    <UserPlus2 className="h-3.5 w-3.5" />
+                                    Assign to me
+                                  </>
+                                )}
+                              </div>
+                            </Command.Item>
+                            <Command.Item onSelect={deleteIssue} className="focus:outline-none">
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Trash2 className="h-3.5 w-3.5" />
+                                Delete issue
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                closePalette();
+                                copyIssueUrlToClipboard();
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <LinkIcon className="h-3.5 w-3.5" />
+                                Copy issue URL
+                              </div>
+                            </Command.Item>
+                          </Command.Group>
+                        )}
+                        <Command.Group heading="Issue">
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              commandPaletteStore.toggleCreateIssueModal(true);
+                            }}
+                            className="focus:bg-custom-background-80"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <LayersIcon className="h-3.5 w-3.5" />
+                              Create new issue
+                            </div>
+                            <kbd>C</kbd>
+                          </Command.Item>
+                        </Command.Group>
+
+                        {workspaceSlug && (
+                          <Command.Group heading="Project">
+                            <Command.Item
+                              onSelect={() => {
+                                closePalette();
+                                commandPaletteStore.toggleCreateProjectModal(true);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <FolderPlus className="h-3.5 w-3.5" />
+                                Create new project
+                              </div>
+                              <kbd>P</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                        )}
+
+                        {projectId && (
+                          <>
+                            <Command.Group heading="Cycle">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  commandPaletteStore.toggleCreateCycleModal(true);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <ContrastIcon className="h-3.5 w-3.5" />
+                                  Create new cycle
+                                </div>
+                                <kbd>Q</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                            <Command.Group heading="Module">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  commandPaletteStore.toggleCreateModuleModal(true);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <DiceIcon className="h-3.5 w-3.5" />
+                                  Create new module
+                                </div>
+                                <kbd>M</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                            <Command.Group heading="View">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  commandPaletteStore.toggleCreateViewModal(true);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <PhotoFilterIcon className="h-3.5 w-3.5" />
+                                  Create new view
+                                </div>
+                                <kbd>V</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                            <Command.Group heading="Page">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  commandPaletteStore.toggleCreatePageModal(true);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <FileText className="h-3.5 w-3.5" />
+                                  Create new page
+                                </div>
+                                <kbd>D</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                          </>
+                        )}
+
+                        <Command.Group heading="Workspace Settings">
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Search workspace settings...");
+                              setSearchTerm("");
+                              setPages([...pages, "settings"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Settings className="h-3.5 w-3.5" />
+                              Search settings...
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                        <Command.Group heading="Account">
+                          <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <FolderPlus className="h-3.5 w-3.5" />
+                              Create new workspace
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Change interface theme...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-interface-theme"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Settings className="h-3.5 w-3.5" />
+                              Change interface theme...
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                        <Command.Group heading="Help">
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              commandPaletteStore.toggleShortcutModal(true);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Rocket className="h-3.5 w-3.5" />
+                              Open keyboard shortcuts
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              window.open("https://docs.plane.so/", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <FileText className="h-3.5 w-3.5" />
+                              Open Plane documentation
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              window.open("https://discord.com/invite/A92xrEGCge", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                              Join our Discord
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                              Report a bug
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              (window as any).$crisp.push(["do", "chat:open"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <MessageSquare className="h-3.5 w-3.5" />
+                              Chat with us
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                      </>
+                    )}
+
+                    {page === "settings" && workspaceSlug && (
+                      <>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            General
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Members
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Billing and Plans
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Integrations
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/imports`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Import
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/exports`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Export
+                          </div>
+                        </Command.Item>
+                      </>
+                    )}
+                    {page === "change-issue-state" && issueDetails && (
+                      <ChangeIssueState issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
+                    )}
+                    {page === "change-issue-priority" && issueDetails && (
+                      <ChangeIssuePriority issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
+                    )}
+                    {page === "change-issue-assignee" && issueDetails && (
+                      <ChangeIssueAssignee issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
+                    )}
+                    {page === "change-interface-theme" && <ChangeInterfaceTheme setIsPaletteOpen={closePalette} />}
+                  </Command.List>
+                </Command>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
index f183de9c6..33c958b6c 100644
--- a/web/components/command-palette/command-pallette.tsx
+++ b/web/components/command-palette/command-pallette.tsx
@@ -1,47 +1,59 @@
-import React, { useCallback, useEffect, useState } from "react";
-
+import React, { useCallback, useEffect, FC } 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";
 // components
-import { CommandK, ShortcutsModal } from "components/command-palette";
+import { CommandModal, ShortcutsModal } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
-import { CreateUpdateCycleModal } from "components/cycles";
+import { CycleCreateUpdateModal } 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";
 
-export const CommandPalette: React.FC = observer(() => {
-  const store: any = useMobxStore();
-
-  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
-  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
-  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
-  const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
-  const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
-  const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
-  const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
-  const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
+// services
+const issueService = new IssueService();
 
+export const CommandPalette: FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, issueId, inboxId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
+  // store
+  const { commandPalette, theme: themeStore } = useMobxStore();
+  const {
+    isCommandPaletteOpen,
+    toggleCommandPaletteModal,
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isCreateCycleModalOpen,
+    toggleCreateCycleModal,
+    isCreatePageModalOpen,
+    toggleCreatePageModal,
+    isCreateProjectModalOpen,
+    toggleCreateProjectModal,
+    isCreateModuleModalOpen,
+    toggleCreateModuleModal,
+    isCreateViewModalOpen,
+    toggleCreateViewModal,
+    isShortcutModalOpen,
+    toggleShortcutModal,
+    isBulkDeleteIssueModalOpen,
+    toggleBulkDeleteIssueModal,
+    isDeleteIssueModalOpen,
+    toggleDeleteIssueModal,
+  } = commandPalette;
+  const { toggleSidebar } = themeStore;
 
   const { user } = useUser();
 
@@ -50,13 +62,12 @@ 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
   );
 
   const copyIssueUrlToClipboard = useCallback(() => {
-    if (!router.query.issueId) return;
+    if (!issueId) return;
 
     const url = new URL(window.location.href);
     copyTextToClipboard(url.href)
@@ -72,11 +83,11 @@ export const CommandPalette: React.FC = observer(() => {
           title: "Some error occurred",
         });
       });
-  }, [router, setToastAlert]);
+  }, [setToastAlert, issueId]);
 
   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();
@@ -92,114 +103,142 @@ export const CommandPalette: React.FC = observer(() => {
       if (cmdClicked) {
         if (keyPressed === "k") {
           e.preventDefault();
-          setIsPaletteOpen(true);
+          toggleCommandPaletteModal(true);
         } else if (keyPressed === "c" && altKey) {
           e.preventDefault();
           copyIssueUrlToClipboard();
         } else if (keyPressed === "b") {
           e.preventDefault();
-          store.theme.setSidebarCollapsed(!store?.theme?.sidebarCollapsed);
+          toggleSidebar();
         }
       } else {
         if (keyPressed === "c") {
-          setIsIssueModalOpen(true);
+          toggleCreateIssueModal(true);
         } else if (keyPressed === "p") {
-          setIsProjectModalOpen(true);
-        } else if (keyPressed === "v") {
-          setIsCreateViewModalOpen(true);
-        } else if (keyPressed === "d") {
-          setIsCreateUpdatePageModalOpen(true);
+          toggleCreateProjectModal(true);
         } else if (keyPressed === "h") {
-          setIsShortcutsModalOpen(true);
-        } else if (keyPressed === "q") {
-          setIsCreateCycleModalOpen(true);
-        } else if (keyPressed === "m") {
-          setIsCreateModuleModalOpen(true);
+          toggleShortcutModal(true);
+        } else if (keyPressed === "v" && workspaceSlug && projectId) {
+          toggleCreateViewModal(true);
+        } else if (keyPressed === "d" && workspaceSlug && projectId) {
+          toggleCreatePageModal(true);
+        } else if (keyPressed === "q" && workspaceSlug && projectId) {
+          toggleCreateCycleModal(true);
+        } else if (keyPressed === "m" && workspaceSlug && projectId) {
+          toggleCreateModuleModal(true);
         } else if (keyPressed === "backspace" || keyPressed === "delete") {
           e.preventDefault();
-          setIsBulkDeleteIssuesModalOpen(true);
+          toggleBulkDeleteIssueModal(true);
         }
       }
     },
-    [copyIssueUrlToClipboard]
+    [
+      copyIssueUrlToClipboard,
+      toggleCreateProjectModal,
+      toggleCreateViewModal,
+      toggleCreatePageModal,
+      toggleShortcutModal,
+      toggleCreateCycleModal,
+      toggleCreateModuleModal,
+      toggleBulkDeleteIssueModal,
+      toggleCommandPaletteModal,
+      toggleSidebar,
+      toggleCreateIssueModal,
+      projectId,
+      workspaceSlug,
+    ]
   );
 
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
-
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
 
   if (!user) return null;
 
   const deleteIssue = () => {
-    setIsPaletteOpen(false);
-    setDeleteIssueModal(true);
+    toggleCommandPaletteModal(false);
+    toggleDeleteIssueModal(true);
   };
 
   return (
     <>
-      <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
+      <ShortcutsModal
+        isOpen={isShortcutModalOpen}
+        onClose={() => {
+          toggleShortcutModal(false);
+        }}
+      />
       {workspaceSlug && (
         <CreateProjectModal
-          isOpen={isProjectModalOpen}
-          setIsOpen={setIsProjectModalOpen}
-          user={user}
+          isOpen={isCreateProjectModalOpen}
+          onClose={() => {
+            toggleCreateProjectModal(false);
+          }}
+          workspaceSlug={workspaceSlug.toString()}
         />
       )}
-      {projectId && (
+      {workspaceSlug && projectId && (
         <>
-          <CreateUpdateCycleModal
+          <CycleCreateUpdateModal
             isOpen={isCreateCycleModalOpen}
-            handleClose={() => setIsCreateCycleModalOpen(false)}
-            user={user}
+            handleClose={() => toggleCreateCycleModal(false)}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
           />
           <CreateUpdateModuleModal
             isOpen={isCreateModuleModalOpen}
-            setIsOpen={setIsCreateModuleModalOpen}
-            user={user}
+            onClose={() => {
+              toggleCreateModuleModal(false);
+            }}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
           />
-          <CreateUpdateViewModal
-            handleClose={() => setIsCreateViewModalOpen(false)}
+          <CreateUpdateProjectViewModal
             isOpen={isCreateViewModalOpen}
-            user={user}
+            onClose={() => toggleCreateViewModal(false)}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
           />
           <CreateUpdatePageModal
-            isOpen={isCreateUpdatePageModalOpen}
-            handleClose={() => setIsCreateUpdatePageModalOpen(false)}
+            isOpen={isCreatePageModalOpen}
+            handleClose={() => toggleCreatePageModal(false)}
             user={user}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
           />
         </>
       )}
-      {issueId && issueDetails && (
-        <DeleteIssueModal
-          handleClose={() => setDeleteIssueModal(false)}
-          isOpen={deleteIssueModal}
-          data={issueDetails}
-          user={user}
-        />
-      )}
+
       <CreateUpdateIssueModal
-        isOpen={isIssueModalOpen}
-        handleClose={() => setIsIssueModalOpen(false)}
-        fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
+        isOpen={isCreateIssueModalOpen}
+        handleClose={() => toggleCreateIssueModal(false)}
         prePopulateData={
-          cycleId
-            ? { cycle: cycleId.toString() }
-            : moduleId
-            ? { module: moduleId.toString() }
-            : undefined
+          cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
         }
       />
+
+      {issueId && issueDetails && (
+        <DeleteIssueModal
+          handleClose={() => toggleDeleteIssueModal(false)}
+          isOpen={isDeleteIssueModalOpen}
+          data={issueDetails}
+        />
+      )}
+
       <BulkDeleteIssuesModal
-        isOpen={isBulkDeleteIssuesModalOpen}
-        setIsOpen={setIsBulkDeleteIssuesModalOpen}
+        isOpen={isBulkDeleteIssueModalOpen}
+        onClose={() => {
+          toggleBulkDeleteIssueModal(false);
+        }}
         user={user}
       />
-      <CommandK
+      <CommandModal
         deleteIssue={deleteIssue}
-        isPaletteOpen={isPaletteOpen}
-        setIsPaletteOpen={setIsPaletteOpen}
+        isPaletteOpen={isCommandPaletteOpen}
+        closePalette={() => {
+          toggleCommandPaletteModal(false);
+        }}
       />
     </>
   );
diff --git a/web/components/command-palette/helpers.tsx b/web/components/command-palette/helpers.tsx
index 0b232b7dc..90511f907 100644
--- a/web/components/command-palette/helpers.tsx
+++ b/web/components/command-palette/helpers.tsx
@@ -1,4 +1,6 @@
 // types
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
+import { Briefcase, FileText, LayoutGrid } from "lucide-react";
 import {
   IWorkspaceDefaultSearchResult,
   IWorkspaceIssueSearchResult,
@@ -8,14 +10,14 @@ import {
 
 export const commandGroups: {
   [key: string]: {
-    icon: string;
+    icon: JSX.Element;
     itemName: (item: any) => React.ReactNode;
     path: (item: any) => string;
     title: string;
   };
 } = {
   cycle: {
-    icon: "contrast",
+    icon: <ContrastIcon className="h-3 w-3" />,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{cycle.project__identifier}</span>
@@ -28,7 +30,7 @@ export const commandGroups: {
     title: "Cycles",
   },
   issue: {
-    icon: "stack",
+    icon: <LayersIcon className="h-3 w-3" />,
     itemName: (issue: IWorkspaceIssueSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{issue.project__identifier}</span>
@@ -41,7 +43,7 @@ export const commandGroups: {
     title: "Issues",
   },
   issue_view: {
-    icon: "photo_filter",
+    icon: <PhotoFilterIcon className="h-3 w-3" />,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{view.project__identifier}</span>
@@ -54,7 +56,7 @@ export const commandGroups: {
     title: "Views",
   },
   module: {
-    icon: "dataset",
+    icon: <DiceIcon className="h-3 w-3" />,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{module.project__identifier}</span>
@@ -67,7 +69,7 @@ export const commandGroups: {
     title: "Modules",
   },
   page: {
-    icon: "article",
+    icon: <FileText className="h-3 w-3" />,
     itemName: (page: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{page.project__identifier}</span>
@@ -80,14 +82,13 @@ export const commandGroups: {
     title: "Pages",
   },
   project: {
-    icon: "work",
+    icon: <Briefcase className="h-3 w-3" />,
     itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
-    path: (project: IWorkspaceProjectSearchResult) =>
-      `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
+    path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
     title: "Projects",
   },
   workspace: {
-    icon: "grid_view",
+    icon: <LayoutGrid className="h-3 w-3" />,
     itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
     path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
     title: "Workspaces",
diff --git a/web/components/command-palette/index.ts b/web/components/command-palette/index.ts
index 6c137d6df..a1230ca32 100644
--- a/web/components/command-palette/index.ts
+++ b/web/components/command-palette/index.ts
@@ -1,6 +1,6 @@
 export * from "./issue";
 export * from "./change-interface-theme";
-export * from "./command-k";
+export * from "./command-modal";
 export * from "./command-pallette";
 export * from "./helpers";
 export * from "./shortcuts-modal";
diff --git a/web/components/command-palette/issue/change-issue-assignee.tsx b/web/components/command-palette/issue/change-issue-assignee.tsx
index ad3d4dfdb..512428310 100644
--- a/web/components/command-palette/issue/change-issue-assignee.tsx
+++ b/web/components/command-palette/issue/change-issue-assignee.tsx
@@ -1,49 +1,52 @@
-import React, { Dispatch, SetStateAction, useCallback } from "react";
-
+import { Dispatch, SetStateAction, useCallback, FC } from "react";
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// cmdk
 import { Command } from "cmdk";
+import { Check } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import issuesService from "services/issues.service";
-// hooks
-import useProjectMembers from "hooks/use-project-members";
+import { IssueService } from "services/issue";
+// ui
+import { Avatar } from "@plane/ui";
+// types
+import { IUser, IIssue } from "types";
 // constants
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-// ui
-import { Avatar } from "components/ui";
-// icons
-import { CheckIcon } from "components/icons";
-// types
-import { ICurrentUserResponse, 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> = observer((props) => {
+  const { setIsPaletteOpen, issue, user } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
+  // store
+  const {
+    projectMember: { projectMembers },
+  } = useMobxStore();
 
   const options =
-    members?.map(({ member }) => ({
+    projectMembers?.map(({ member }) => ({
       value: member.id,
       query: member.display_name,
       content: (
         <>
           <div className="flex items-center gap-2">
-            <Avatar user={member} />
+            <Avatar name={member.display_name} src={member.avatar} showTooltip={false} />
             {member.display_name}
           </div>
           {issue.assignees.includes(member.id) && (
             <div>
-              <CheckIcon className="h-3 w-3" />
+              <Check className="h-3 w-3" />
             </div>
           )}
         </>
@@ -67,7 +70,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));
@@ -80,7 +83,7 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue,
   );
 
   const handleIssueAssignees = (assignee: string) => {
-    const updatedAssignees = issue.assignees_list ?? [];
+    const updatedAssignees = issue.assignees ?? [];
 
     if (updatedAssignees.includes(assignee)) {
       updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
@@ -88,13 +91,13 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue,
       updatedAssignees.push(assignee);
     }
 
-    updateIssue({ assignees_list: updatedAssignees });
+    updateIssue({ assignees: updatedAssignees });
     setIsPaletteOpen(false);
   };
 
   return (
     <>
-      {options.map((option) => (
+      {options.map((option: any) => (
         <Command.Item
           key={option.value}
           onSelect={() => handleIssueAssignees(option.value)}
@@ -105,4 +108,4 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue,
       ))}
     </>
   );
-};
+});
diff --git a/web/components/command-palette/issue/change-issue-priority.tsx b/web/components/command-palette/issue/change-issue-priority.tsx
index e1c0d52af..5551a8a3a 100644
--- a/web/components/command-palette/issue/change-issue-priority.tsx
+++ b/web/components/command-palette/issue/change-issue-priority.tsx
@@ -7,21 +7,25 @@ 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";
 // icons
-import { CheckIcon, PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
+import { Check } from "lucide-react";
 
 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 +48,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,16 +68,12 @@ 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>
           </div>
-          <div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>
+          <div>{priority === issue.priority && <Check className="h-3 w-3" />}</div>
         </Command.Item>
       ))}
     </>
diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
index 6bfc2874c..688aeb49f 100644
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -1,42 +1,38 @@
 import React, { Dispatch, SetStateAction, useCallback } from "react";
-
 import { useRouter } from "next/router";
-
 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, StateGroupIcon } from "@plane/ui";
 // icons
-import { CheckIcon, StateGroupIcon } from "components/icons";
-// helpers
-import { getStatesList } from "helpers/state.helper";
+import { Check } from "lucide-react";
 // 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(
+  const { data: states, mutate: mutateStates } = 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);
 
   const submitChanges = useCallback(
     async (formData: Partial<IIssue>) => {
@@ -55,17 +51,17 @@ 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();
+          mutateStates();
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
         })
         .catch((e) => {
           console.error(e);
         });
     },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
+    [workspaceSlug, issueId, projectId, mutateStates, user]
   );
 
   const handleIssueState = (stateId: string) => {
@@ -78,21 +74,12 @@ 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>
+              <div>{state.id === issue.state && <Check className="h-3 w-3" />}</div>
             </Command.Item>
           ))
         ) : (
diff --git a/web/components/command-palette/shortcuts-modal.tsx b/web/components/command-palette/shortcuts-modal.tsx
index 82f9b398c..40317013c 100644
--- a/web/components/command-palette/shortcuts-modal.tsx
+++ b/web/components/command-palette/shortcuts-modal.tsx
@@ -1,16 +1,13 @@
-import React, { useEffect, useState } from "react";
-// headless ui
+import { FC, useEffect, useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { CommandIcon } from "components/icons";
+import { Command, Search, X } from "lucide-react";
 // ui
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
 };
 
 const shortcuts = [
@@ -45,12 +42,13 @@ const shortcuts = [
 
 const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1);
 
-export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+export const ShortcutsModal: FC<Props> = (props) => {
+  const { isOpen, onClose } = props;
+  // states
   const [query, setQuery] = useState("");
+  // computed
   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(() => {
@@ -58,10 +56,10 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   }, [isOpen]);
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
+    <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"
@@ -69,13 +67,13 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              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"
@@ -83,8 +81,8 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-custom-background-80 p-5">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-custom-background-100 p-5">
                   <div className="sm:flex sm:items-start">
                     <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
                       <Dialog.Title
@@ -93,24 +91,22 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       >
                         <span>Keyboard Shortcuts</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 type="button" onClick={onClose}>
+                            <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                           </button>
                         </span>
                       </Dialog.Title>
                       <div>
                         <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" />
+                          <Search 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,19 +117,17 @@ 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">
                                           {key === "Ctrl" ? (
                                             <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 text-custom-text-200" />
                                             </kbd>
                                           ) : (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
@@ -172,11 +166,11 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
                                             <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 text-custom-text-200" />
                                             </kbd>
                                           ) : (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
diff --git a/web/components/ui/empty-state.tsx b/web/components/common/empty-state.tsx
similarity index 73%
rename from web/components/ui/empty-state.tsx
rename to web/components/common/empty-state.tsx
index e39b10801..e749600ae 100644
--- a/web/components/ui/empty-state.tsx
+++ b/web/components/common/empty-state.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import Image from "next/image";
 
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   title: string;
@@ -15,7 +15,6 @@ type Props = {
     onClick: () => void;
   };
   secondaryButton?: React.ReactNode;
-  isFullScreen?: boolean;
   disabled?: boolean;
 };
 
@@ -25,28 +24,23 @@ export const EmptyState: React.FC<Props> = ({
   image,
   primaryButton,
   secondaryButton,
-  isFullScreen = true,
   disabled = false,
 }) => (
-  <div
-    className={`h-full w-full mx-auto grid place-items-center p-8 ${
-      isFullScreen ? "md:w-4/5 lg:w-3/5" : ""
-    }`}
-  >
+  <div className={`flex items-center justify-center h-full w-full`}>
     <div className="text-center flex flex-col items-center w-full">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
       <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
       {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
-          <PrimaryButton
-            className="flex items-center gap-1.5"
+          <Button
+            variant="primary"
+            prependIcon={primaryButton.icon}
             onClick={primaryButton.onClick}
             disabled={disabled}
           >
-            {primaryButton.icon}
             {primaryButton.text}
-          </PrimaryButton>
+          </Button>
         )}
         {secondaryButton}
       </div>
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..b09a44db0
--- /dev/null
+++ b/web/components/common/product-updates-modal.tsx
@@ -0,0 +1,112 @@
+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 { X } from "lucide-react";
+// 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 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 shadow-custom-shadow-md 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)}>
+                        <X 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..5f60a9174 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -5,9 +5,9 @@ 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, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 import {
   TagIcon,
   CopyPlus,
@@ -22,13 +22,8 @@ import {
   LayoutGridIcon,
   SignalMediumIcon,
   MessageSquareIcon,
+  UsersIcon,
 } from "lucide-react";
-import {
-  BlockedIcon,
-  BlockerIcon,
-  RelatedIcon,
-  StackedLayersHorizontalIcon,
-} from "components/icons";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
@@ -37,25 +32,25 @@ 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"
+        aria-disabled={activity.issue === null}
+        href={`${
+          activity.issue_detail ? `/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}` : "#"
+        }`}
+        target={activity.issue === null ? "_self" : "_blank"}
+        rel={activity.issue === null ? "" : "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 +79,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 (
@@ -97,26 +92,21 @@ const LabelPill = ({ labelId }: { labelId: string }) => {
     />
   );
 };
+
 const EstimatePoint = ({ point }: { point: string }) => {
   const { estimateValue, isEstimateActive } = useEstimateOption(Number(point));
   const currentPoint = Number(point) + 1;
 
   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 +199,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 +255,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>.
           </>
         );
     },
@@ -374,7 +362,7 @@ const activityDetails: {
       if (activity.verb === "created") return "created the issue.";
       else return "deleted an issue.";
     },
-    icon: <StackedLayersHorizontalIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
+    icon: <LayersIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
   },
   labels: {
     message: (activity, showIssue) => {
@@ -532,7 +520,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Icon iconName="dataset" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
+    icon: <DiceIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
   },
   name: {
     message: (activity, showIssue) => (
@@ -554,8 +542,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 +555,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 +566,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: (
-      <Icon
-        iconName="supervised_user_circle"
-        className="!text-xs !text-[#6b7280]"
-        aria-hidden="true"
-      />
-    ),
+    icon: <UsersIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
   },
   priority: {
     message: (activity, showIssue) => (
@@ -643,8 +623,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 +675,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..0266ae8f4 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";
+import { X } from "lucide-react";
 // 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);
@@ -94,7 +62,7 @@ export const DateFilterModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@@ -107,7 +75,7 @@ export const DateFilterModal: React.FC<Props> = ({
               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 flex 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">
+              <Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
                   <div className="flex w-full justify-between">
                     <Controller
@@ -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}
-                    />
+                    <X className="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" size="sm" onClick={handleClose}>
                       Cancel
-                    </SecondaryButton>
-                    <PrimaryButton
-                      type="submit"
-                      className="flex items-center gap-2"
-                      disabled={isInvalid}
-                    >
+                    </Button>
+                    <Button variant="primary" size="sm" type="submit" disabled={isInvalid}>
                       Apply
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
index b35b585ce..2585e2f95 100644
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
 // icons
-import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "components/icons";
+import { CalendarDays } from "lucide-react";
 // fetch-keys
 
 type Props = {
@@ -32,7 +32,7 @@ const dueDateRange: DueDate[] = [
   {
     name: "range",
     value: "range",
-    icon: <CalendarMonthIcon className="h-4 w-4 " />,
+    icon: <CalendarDays className="h-4 w-4 " />,
   },
 ];
 
diff --git a/web/components/core/filters/filters-list.tsx b/web/components/core/filters/filters-list.tsx
deleted file mode 100644
index 697844a15..000000000
--- a/web/components/core/filters/filters-list.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-import React from "react";
-
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// ui
-import { Avatar } from "components/ui";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  filters: Partial<IIssueFilterOptions>;
-  setFilters: (updatedFilter: Partial<IIssueFilterOptions>) => void;
-  clearAllFilters: (...args: any) => void;
-  labels: IIssueLabels[] | undefined;
-  members: IUserLite[] | undefined;
-  states: IState[] | undefined;
-};
-
-export const FiltersList: React.FC<Props> = ({
-  filters,
-  setFilters,
-  clearAllFilters,
-  labels,
-  members,
-  states,
-}) => {
-  if (!filters) return <></>;
-
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IIssueFilterOptions] === null
-  );
-
-  return (
-    <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
-      {Object.keys(filters).map((filterKey) => {
-        const key = filterKey as keyof typeof filters;
-
-        if (filters[key] === null) return null;
-
-        return (
-          <div
-            key={key}
-            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
-          >
-            <span className="capitalize text-custom-text-200">
-              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
-            </span>
-            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
-              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-            ) : Array.isArray(filters[key]) ? (
-              <div className="space-x-2">
-                <div className="flex flex-wrap items-center gap-1">
-                  {key === "state"
-                    ? filters.state?.map((stateId: string) => {
-                        const state = states?.find((s) => s.id === stateId);
-
-                        return (
-                          <p
-                            key={state?.id}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium"
-                            style={{
-                              color: state?.color,
-                              backgroundColor: `${state?.color}20`,
-                            }}
-                          >
-                            <span>
-                              <StateGroupIcon
-                                stateGroup={state?.group ?? "backlog"}
-                                color={state?.color}
-                              />
-                            </span>
-                            <span>{state?.name ?? ""}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  state: filters.state?.filter((s: any) => s !== stateId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : key === "state_group"
-                    ? filters.state_group?.map((stateGroup) => {
-                        const group = stateGroup as TStateGroups;
-
-                        return (
-                          <p
-                            key={group}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                            style={{
-                              color: STATE_GROUP_COLORS[group],
-                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
-                            }}
-                          >
-                            <span>
-                              <StateGroupIcon stateGroup={group} color={undefined} />
-                            </span>
-                            <span>{group}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  state_group: filters.state_group?.filter((g) => g !== group),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : key === "priority"
-                    ? filters.priority?.map((priority: any) => (
-                        <p
-                          key={priority}
-                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
-                            priority === "urgent"
-                              ? "bg-red-500/20 text-red-500"
-                              : priority === "high"
-                              ? "bg-orange-500/20 text-orange-500"
-                              : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
-                              : priority === "low"
-                              ? "bg-green-500/20 text-green-500"
-                              : "bg-custom-background-90 text-custom-text-200"
-                          }`}
-                        >
-                          <span>
-                            <PriorityIcon priority={priority} />
-                          </span>
-                          <span>{priority === "null" ? "None" : priority}</span>
-                          <span
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                priority: filters.priority?.filter((p: any) => p !== priority),
-                              })
-                            }
-                          >
-                            <XMarkIcon className="h-3 w-3" />
-                          </span>
-                        </p>
-                      ))
-                    : key === "assignees"
-                    ? filters.assignees?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  subscriber: filters.subscriber?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "created_by"
-                    ? filters.created_by?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  created_by: filters.created_by?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "labels"
-                    ? filters.labels?.map((labelId: string) => {
-                        const label = labels?.find((l) => l.id === labelId);
-
-                        if (!label) return null;
-                        const color = label.color !== "" ? label.color : "#0f172a";
-                        return (
-                          <div
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
-                            style={{
-                              color: color,
-                              backgroundColor: `${color}20`, // add 20% opacity
-                            }}
-                            key={labelId}
-                          >
-                            <div
-                              className="h-1.5 w-1.5 rounded-full"
-                              style={{
-                                backgroundColor: color,
-                              }}
-                            />
-                            <span>{label.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  labels: filters.labels?.filter((l: any) => l !== labelId),
-                                })
-                              }
-                            >
-                              <XMarkIcon
-                                className="h-3 w-3"
-                                style={{
-                                  color: color,
-                                }}
-                              />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "start_date"
-                    ? filters.start_date?.map((date: string) => {
-                        if (filters.start_date && filters.start_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  start_date: filters.start_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "target_date"
-                    ? filters.target_date?.map((date: string) => {
-                        if (filters.target_date && filters.target_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  target_date: filters.target_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : (filters[key] as any)?.join(", ")}
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setFilters({
-                        [key]: null,
-                      })
-                    }
-                  >
-                    <XMarkIcon className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-x-1 capitalize">
-                {filters[key as keyof typeof filters]}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setFilters({
-                      [key]: null,
-                    })
-                  }
-                >
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
-        <button
-          type="button"
-          onClick={clearAllFilters}
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
-        >
-          <span>Clear all filters</span>
-          <XMarkIcon className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  );
-};
diff --git a/web/components/core/filters/index.ts b/web/components/core/filters/index.ts
index 558db6841..28e36d3e6 100644
--- a/web/components/core/filters/index.ts
+++ b/web/components/core/filters/index.ts
@@ -1,5 +1,2 @@
 export * from "./date-filter-modal";
 export * from "./date-filter-select";
-export * from "./filters-list";
-export * from "./workspace-filters-list";
-export * from "./issues-view-filter";
diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
deleted file mode 100644
index 7df759e8a..000000000
--- a/web/components/core/filters/issues-view-filter.tsx
+++ /dev/null
@@ -1,406 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssuesView from "hooks/use-issues-view";
-import useEstimateOption from "hooks/use-estimate-option";
-// components
-import { SelectFilters } from "components/views";
-// ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import {
-  CalendarMonthOutlined,
-  FormatListBulletedOutlined,
-  GridViewOutlined,
-  TableChartOutlined,
-  WaterfallChartOutlined,
-} from "@mui/icons-material";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { Properties, TIssueViewOptions } from "types";
-// constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
-
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "kanban",
-    Icon: GridViewOutlined,
-  },
-  {
-    type: "calendar",
-    Icon: CalendarMonthOutlined,
-  },
-  {
-    type: "spreadsheet",
-    Icon: TableChartOutlined,
-  },
-  {
-    type: "gantt_chart",
-    Icon: WaterfallChartOutlined,
-  },
-];
-
-const issueViewForDraftIssues: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "kanban",
-    Icon: GridViewOutlined,
-  },
-];
-
-export const IssuesFilterView: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
-  const isArchivedIssues = router.pathname.includes("archived-issues");
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-
-  const {
-    displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useIssuesView();
-
-  const [properties, setProperties] = useIssuesProperties(
-    workspaceSlug as string,
-    projectId as string
-  );
-
-  const { isEstimateActive } = useEstimateOption();
-
-  return (
-    <div className="flex items-center gap-2">
-      {!isArchivedIssues && !isDraftIssues && (
-        <div className="flex items-center gap-x-1">
-          {issueViewOptions.map((option) => (
-            <Tooltip
-              key={option.type}
-              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 ${
-                  displayFilters.layout === option.type
-                    ? "bg-custom-sidebar-background-80"
-                    : "text-custom-sidebar-text-200"
-                }`}
-                onClick={() => setDisplayFilters({ layout: option.type })}
-              >
-                <option.Icon
-                  sx={{
-                    fontSize: 16,
-                  }}
-                  className={option.type === "gantt_chart" ? "rotate-90" : ""}
-                />
-              </button>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-      {isDraftIssues && (
-        <div className="flex items-center gap-x-1">
-          {issueViewForDraftIssues.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-80 duration-300 ${
-                  displayFilters.layout === option.type
-                    ? "bg-custom-sidebar-background-80"
-                    : "text-custom-sidebar-text-200"
-                }`}
-                onClick={() => setDisplayFilters({ layout: option.type })}
-              >
-                <option.Icon
-                  sx={{
-                    fontSize: 16,
-                  }}
-                  className={option.type === "gantt_chart" ? "rotate-90" : ""}
-                />
-              </button>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-      <SelectFilters
-        filters={filters}
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
-
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters[key] ?? [], option.value);
-
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
-              setFilters(
-                {
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                    (val) => val !== option.value
-                  ),
-                },
-                !Boolean(viewId)
-              );
-            else
-              setFilters(
-                {
-                  [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-                },
-                !Boolean(viewId)
-              );
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <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"
-              }`}
-            >
-              Display
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </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 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" &&
-                      displayFilters.layout !== "gantt_chart" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Group by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                GROUP_BY_OPTIONS.find(
-                                  (option) => option.key === 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 === "project") 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}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
-                          </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>
-                        </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"
-                            }
-                            className="!w-full"
-                            buttonClassName="w-full"
-                          >
-                            {FILTER_ISSUE_OPTIONS.map((option) => (
-                              <CustomMenu.MenuItem
-                                key={option.key}
-                                onClick={() =>
-                                  setDisplayFilters({
-                                    type: option.key,
-                                  })
-                                }
-                              >
-                                {option.name}
-                              </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 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" && (
-                        <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>
-                        </div>
-                      )}
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" &&
-                      displayFilters.layout !== "gantt_chart" && (
-                        <div className="relative flex justify-end gap-x-3">
-                          <button type="button" onClick={() => resetFilterToDefault()}>
-                            Reset to default
-                          </button>
-                          <button
-                            type="button"
-                            className="font-medium text-custom-primary"
-                            onClick={() => setNewFilterDefaultView()}
-                          >
-                            Set as default
-                          </button>
-                        </div>
-                      )}
-                  </div>
-
-                  {displayFilters.layout !== "gantt_chart" && (
-                    <div className="space-y-2 py-3">
-                      <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                      <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                        {Object.keys(properties).map((key) => {
-                          if (key === "estimate" && !isEstimateActive) return null;
-
-                          if (
-                            displayFilters.layout === "spreadsheet" &&
-                            (key === "attachment_count" ||
-                              key === "link" ||
-                              key === "sub_issue_count")
-                          )
-                            return null;
-
-                          if (
-                            displayFilters.layout !== "spreadsheet" &&
-                            (key === "created_on" || key === "updated_on")
-                          )
-                            return null;
-
-                          return (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`rounded border px-2 py-1 text-xs capitalize ${
-                                properties[key as keyof Properties]
-                                  ? "border-custom-primary bg-custom-primary text-white"
-                                  : "border-custom-border-200"
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
-  );
-};
diff --git a/web/components/core/filters/workspace-filters-list.tsx b/web/components/core/filters/workspace-filters-list.tsx
deleted file mode 100644
index 0b31ae7f5..000000000
--- a/web/components/core/filters/workspace-filters-list.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import React from "react";
-
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// ui
-import { Avatar } from "components/ui";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import {
-  IIssueLabels,
-  IProject,
-  IUserLite,
-  IWorkspaceIssueFilterOptions,
-  TStateGroups,
-} from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  filters: Partial<IWorkspaceIssueFilterOptions>;
-  setFilters: (updatedFilter: Partial<IWorkspaceIssueFilterOptions>) => void;
-  clearAllFilters: (...args: any) => void;
-  labels: IIssueLabels[] | undefined;
-  members: IUserLite[] | undefined;
-  stateGroup: string[] | undefined;
-  project?: IProject[] | undefined;
-};
-
-export const WorkspaceFiltersList: React.FC<Props> = ({
-  filters,
-  setFilters,
-  clearAllFilters,
-  labels,
-  members,
-  stateGroup,
-  project,
-}) => {
-  if (!filters) return <></>;
-
-  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">
-      {Object.keys(filters).map((filterKey) => {
-        const key = filterKey as keyof typeof filters;
-
-        if (filters[key] === null || (filters[key]?.length ?? 0) <= 0) return null;
-
-        return (
-          <div
-            key={key}
-            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
-          >
-            <span className="capitalize text-custom-text-200">
-              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
-            </span>
-            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
-              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-            ) : Array.isArray(filters[key]) ? (
-              <div className="space-x-2">
-                <div className="flex flex-wrap items-center gap-1">
-                  {key === "state_group"
-                    ? filters.state_group?.map((stateGroup) => {
-                        const group = stateGroup as TStateGroups;
-
-                        return (
-                          <p
-                            key={group}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                            style={{
-                              color: STATE_GROUP_COLORS[group],
-                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
-                            }}
-                          >
-                            <span>
-                              <StateGroupIcon stateGroup={group} color={undefined} />
-                            </span>
-                            <span>{group}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  state_group: filters.state_group?.filter((g) => g !== group),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : key === "priority"
-                    ? filters.priority?.map((priority: any) => (
-                        <p
-                          key={priority}
-                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
-                            priority === "urgent"
-                              ? "bg-red-500/20 text-red-500"
-                              : priority === "high"
-                              ? "bg-orange-500/20 text-orange-500"
-                              : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
-                              : priority === "low"
-                              ? "bg-green-500/20 text-green-500"
-                              : "bg-custom-background-90 text-custom-text-200"
-                          }`}
-                        >
-                          <span>
-                            <PriorityIcon priority={priority} />
-                          </span>
-                          <span>{priority === "null" ? "None" : priority}</span>
-                          <span
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                priority: filters.priority?.filter((p: any) => p !== priority),
-                              })
-                            }
-                          >
-                            <XMarkIcon className="h-3 w-3" />
-                          </span>
-                        </p>
-                      ))
-                    : key === "assignees"
-                    ? filters.assignees?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "subscriber"
-                    ? filters.subscriber?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "created_by"
-                    ? filters.created_by?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  created_by: filters.created_by?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "labels"
-                    ? filters.labels?.map((labelId: string) => {
-                        const label = labels?.find((l) => l.id === labelId);
-
-                        if (!label) return null;
-                        const color = label.color !== "" ? label.color : "#0f172a";
-                        return (
-                          <div
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
-                            style={{
-                              color: color,
-                              backgroundColor: `${color}20`, // add 20% opacity
-                            }}
-                            key={labelId}
-                          >
-                            <div
-                              className="h-1.5 w-1.5 rounded-full"
-                              style={{
-                                backgroundColor: color,
-                              }}
-                            />
-                            <span>{label.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  labels: filters.labels?.filter((l: any) => l !== labelId),
-                                })
-                              }
-                            >
-                              <XMarkIcon
-                                className="h-3 w-3"
-                                style={{
-                                  color: color,
-                                }}
-                              />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "start_date"
-                    ? filters.start_date?.map((date: string) => {
-                        if (filters.start_date && filters.start_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  start_date: filters.start_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "target_date"
-                    ? filters.target_date?.map((date: string) => {
-                        if (filters.target_date && filters.target_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  target_date: filters.target_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "project"
-                    ? filters.project?.map((projectId) => {
-                        const currentProject = project?.find((p) => p.id === projectId);
-                        return (
-                          <p
-                            key={currentProject?.id}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                          >
-                            <span>{currentProject?.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  project: filters.project?.filter((p) => p !== projectId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : (filters[key] as any)?.join(", ")}
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setFilters({
-                        [key]: null,
-                      })
-                    }
-                  >
-                    <XMarkIcon className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-x-1 capitalize">
-                {filters[key as keyof typeof filters]}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setFilters({
-                      [key]: null,
-                    })
-                  }
-                >
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
-        <button
-          type="button"
-          onClick={clearAllFilters}
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
-        >
-          <span>Clear all filters</span>
-          <XMarkIcon className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  );
-};
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index cfe18cd97..123eee6d2 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -1,17 +1,19 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { useDropzone } from "react-dropzone";
 import { Tab, Transition, Popover } from "@headlessui/react";
-
+import { Control, Controller } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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,20 +33,16 @@ 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,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
+// services
+const fileService = new FileService();
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+export const ImagePickerPopover: React.FC<Props> = observer((props) => {
+  const { label, value, control, onChange, disabled = false } = props;
 
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
@@ -55,6 +53,14 @@ export const ImagePickerPopover: React.FC<Props> = ({
     search: "",
   });
 
+  const ref = useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspace: workspaceDetails } = workspaceStore;
+
   const { data: unsplashImages, error: unsplashError } = useSWR(
     `UNSPLASH_IMAGES_${searchParams}`,
     () => fileService.getUnsplashImages(searchParams),
@@ -64,19 +70,13 @@ 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);
 
-  const { workspaceDetails } = useWorkspaceDetails();
-
   const onDrop = useCallback((acceptedFiles: File[]) => {
     setImage(acceptedFiles[0]);
   }, []);
@@ -154,8 +154,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 +174,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 +215,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 +254,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 +300,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 +321,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>
@@ -347,4 +349,4 @@ export const ImagePickerPopover: React.FC<Props> = ({
       </Transition>
     </Popover>
   );
-};
+});
diff --git a/web/components/core/index.ts b/web/components/core/index.ts
index 6989b05c0..ff0fabc4e 100644
--- a/web/components/core/index.ts
+++ b/web/components/core/index.ts
@@ -2,7 +2,6 @@ export * from "./filters";
 export * from "./modals";
 export * from "./sidebar";
 export * from "./theme";
-export * from "./views";
 export * from "./activity";
 export * from "./reaction-selector";
 export * from "./image-picker-popover";
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 375e155a4..f1c951385 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -1,36 +1,22 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
+import useSWR 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, LayersIcon } from "@plane/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Search } from "lucide-react";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 // fetch keys
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
 type FormInput = {
   delete_issue_ids: string[];
@@ -38,29 +24,26 @@ type FormInput = {
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  user: ICurrentUserResponse | undefined;
+  onClose: () => void;
+  user: IUser | undefined;
 };
 
-export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user }) => {
-  const [query, setQuery] = useState("");
+const issueService = new IssueService();
 
+export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose, user } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [query, setQuery] = useState("");
+  // fetching project issues.
   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();
-  const { order_by, group_by, ...viewGanttParams } = params;
 
   const {
     handleSubmit,
@@ -75,9 +58,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
   });
 
   const handleClose = () => {
-    setIsOpen(false);
     setQuery("");
     reset();
+    onClose();
   };
 
   const handleDelete: SubmitHandler<FormInput> = async (data) => {
@@ -94,23 +77,7 @@ 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
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
-      : viewId
-      ? VIEW_ISSUES(viewId.toString(), viewGanttParams)
-      : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "");
-
-    await issuesServices
+    await issueService
       .bulkDeleteIssues(
         workspaceSlug as string,
         projectId as string,
@@ -126,18 +93,6 @@ 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);
-        else {
-          if (cycleId) {
-            mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params));
-            mutate(CYCLE_DETAILS(cycleId.toString()));
-          } else if (moduleId) {
-            mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-            mutate(MODULE_DETAILS(moduleId as string));
-          } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
-        }
-
         handleClose();
       })
       .catch(() =>
@@ -155,15 +110,13 @@ 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 (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+        <div className="fixed inset-0 bg-custom-backdrop transition-opacity z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -173,97 +126,101 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
-              <form>
-                <Combobox
-                  onChange={(val: string) => {
-                    const selectedIssues = watch("delete_issue_ids");
-                    if (selectedIssues.includes(val))
-                      setValue(
-                        "delete_issue_ids",
-                        selectedIssues.filter((i) => i !== val)
-                      );
-                    else setValue("delete_issue_ids", [...selectedIssues, val]);
-                  }}
-                >
-                  <div className="relative m-1">
-                    <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <input
-                      type="text"
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
-                      placeholder="Search..."
-                      onChange={(event) => setQuery(event.target.value)}
-                    />
-                  </div>
-
-                  <Combobox.Options
-                    static
-                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
+            <Dialog.Panel className="relative flex items-center justify-center w-full ">
+              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+                <form>
+                  <Combobox
+                    onChange={(val: string) => {
+                      const selectedIssues = watch("delete_issue_ids");
+                      if (selectedIssues.includes(val))
+                        setValue(
+                          "delete_issue_ids",
+                          selectedIssues.filter((i) => i !== val)
+                        );
+                      else setValue("delete_issue_ids", [...selectedIssues, val]);
+                    }}
                   >
-                    {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 issues to delete
-                          </h2>
-                        )}
-                        <ul className="text-sm text-custom-text-200">
-                          {filteredIssues.map((issue) => (
-                            <Combobox.Option
-                              key={issue.id}
-                              as="div"
-                              value={issue.id}
-                              className={({ active, selected }) =>
-                                `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                }`
-                              }
-                            >
-                              <div className="flex items-center gap-2">
-                                <input
-                                  type="checkbox"
-                                  checked={watch("delete_issue_ids").includes(issue.id)}
-                                  readOnly
-                                />
-                                <span
-                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor: issue.state_detail.color,
-                                  }}
-                                />
-                                <span className="flex-shrink-0 text-xs">
-                                  {issue.project_detail.identifier}-{issue.sequence_id}
-                                </span>
-                                <span>{issue.name}</span>
-                              </div>
-                            </Combobox.Option>
-                          ))}
-                        </ul>
-                      </li>
-                    ) : (
-                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                        <LayerDiagonalIcon height="56" width="56" />
-                        <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">C</pre>.
-                        </h3>
-                      </div>
-                    )}
-                  </Combobox.Options>
-                </Combobox>
+                    <div className="relative m-1">
+                      <Search
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
+                        aria-hidden="true"
+                      />
+                      <input
+                        type="text"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
+                        placeholder="Search..."
+                        onChange={(event) => setQuery(event.target.value)}
+                      />
+                    </div>
 
-                {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}>
-                      {isSubmitting ? "Deleting..." : "Delete selected issues"}
-                    </DangerButton>
-                  </div>
-                )}
-              </form>
+                    <Combobox.Options
+                      static
+                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
+                    >
+                      {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 issues to delete
+                            </h2>
+                          )}
+                          <ul className="text-sm text-custom-text-200">
+                            {filteredIssues.map((issue) => (
+                              <Combobox.Option
+                                key={issue.id}
+                                as="div"
+                                value={issue.id}
+                                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" : ""
+                                  }`
+                                }
+                              >
+                                <div className="flex items-center gap-2">
+                                  <input
+                                    type="checkbox"
+                                    checked={watch("delete_issue_ids").includes(issue.id)}
+                                    readOnly
+                                  />
+                                  <span
+                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: issue.state_detail.color,
+                                    }}
+                                  />
+                                  <span className="flex-shrink-0 text-xs">
+                                    {issue.project_detail.identifier}-{issue.sequence_id}
+                                  </span>
+                                  <span>{issue.name}</span>
+                                </div>
+                              </Combobox.Option>
+                            ))}
+                          </ul>
+                        </li>
+                      ) : (
+                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                          <LayersIcon height="56" width="56" />
+                          <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">C</pre>.
+                          </h3>
+                        </div>
+                      )}
+                    </Combobox.Options>
+                  </Combobox>
+
+                  {filteredIssues.length > 0 && (
+                    <div className="flex items-center justify-end gap-2 p-3">
+                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="danger" size="sm" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
+                        {isSubmitting ? "Deleting..." : "Delete selected issues"}
+                      </Button>
+                    </div>
+                  )}
+                </form>
+              </div>
             </Dialog.Panel>
           </Transition.Child>
         </div>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index ed3902a4a..6b11617ad 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -1,32 +1,16 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Rocket, Search, X } from "lucide-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";
-// icons
-import { LaunchOutlined } from "@mui/icons-material";
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
-// fetch-keys
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-} from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -36,6 +20,8 @@ type Props = {
   workspaceLevelToggle?: boolean;
 };
 
+const projectService = new ProjectService();
+
 export const ExistingIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
@@ -53,12 +39,10 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { params } = useIssuesView();
-
   const handleClose = () => {
     onClose();
     setSearchTerm("");
@@ -81,16 +65,6 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
     await handleOnSubmit(selectedIssues).finally(() => setIsSubmitting(false));
 
-    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));
-    }
-
     handleClose();
 
     setToastAlert({
@@ -117,12 +91,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}
@@ -133,7 +102,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -146,7 +115,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {
@@ -156,7 +125,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -180,13 +149,9 @@ 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" />
+                              <X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
                           </div>
                         ))}
@@ -232,21 +197,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">
+                        <LayersIcon 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 +215,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);
 
@@ -294,11 +251,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                 rel="noopener noreferrer"
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                <LaunchOutlined
-                                  sx={{
-                                    fontSize: 16,
-                                  }}
-                                />
+                                <Rocket className="h-4 w-4" />
                               </a>
                             </Combobox.Option>
                           );
@@ -309,10 +262,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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" 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 81c9b7d71..b98b1bc1c 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -1,16 +1,17 @@
-import React, { useEffect, useState, forwardRef, useRef } from "react";
+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 { TipTapEditor } from "components/tiptap";
+import { Button, Input } from "@plane/ui";
+// components
+import { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 // types
 import { IIssue, IPageBlock } from "types";
 
@@ -31,6 +32,10 @@ type FormData = {
   task: string;
 };
 
+// services
+const aiService = new AIService();
+const trackEventService = new TrackEventService();
+
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -56,7 +61,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   const {
     handleSubmit,
-    register,
+    control,
     reset,
     setFocus,
     formState: { isSubmitting },
@@ -110,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({
@@ -140,13 +143,11 @@ export const GptAssistantModal: React.FC<Props> = ({
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
           Content:
-          <TipTapEditor
-            workspaceSlug={workspaceSlug as string}
+          <RichReadOnlyEditorWithRef
             value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
             noBorder
             borderOnFocus={false}
-            editable={false}
             ref={editorRef}
           />
         </div>
@@ -154,69 +155,60 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <TipTapEditor
-            workspaceSlug={workspaceSlug as string}
+          <RichReadOnlyEditor
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
             noBorder
             borderOnFocus={false}
-            editable={false}
           />
         </div>
       )}
       {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" size="sm" onClick={onClose}>
+            Close
+          </Button>
+          <Button variant="primary" size="sm" 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 df4f21e12..5640d62f6 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -1,19 +1,16 @@
 import React, { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
-
-// react-dropzone
+import { observer } from "mobx-react-lite";
 import { useDropzone } from "react-dropzone";
-// headless ui
 import { Transition, Dialog } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import fileServices from "services/file.service";
-// hooks
-import useWorkspaceDetails from "hooks/use-workspace-details";
+import { FileService } from "services/file.service";
 // ui
-import { DangerButton, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
-import { UserCircleIcon } from "components/icons";
+import { UserCircle2 } from "lucide-react";
 
 type Props = {
   value?: string | null;
@@ -25,22 +22,20 @@ type Props = {
   userImage?: boolean;
 };
 
-export const ImageUploadModal: React.FC<Props> = ({
-  value,
-  onSuccess,
-  isOpen,
-  onClose,
-  isRemoving,
-  handleDelete,
-  userImage,
-}) => {
+// services
+const fileService = new FileService();
+
+export const ImageUploadModal: React.FC<Props> = observer((props) => {
+  const { value, onSuccess, isOpen, onClose, isRemoving, handleDelete, userImage } = props;
+
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { workspaceDetails } = useWorkspaceDetails();
+  const { workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspace: workspaceDetails } = workspaceStore;
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
     setImage(acceptedFiles[0]);
@@ -64,7 +59,7 @@ export const ImageUploadModal: React.FC<Props> = ({
     formData.append("attributes", JSON.stringify({}));
 
     if (userImage) {
-      fileServices
+      fileService
         .uploadUserFile(formData)
         .then((res) => {
           const imageUrl = res.asset;
@@ -73,13 +68,13 @@ export const ImageUploadModal: React.FC<Props> = ({
           setIsImageUploading(false);
           setImage(null);
 
-          if (value) fileServices.deleteUserFile(value);
+          if (value) fileService.deleteUserFile(value);
         })
         .catch((err) => {
           console.error(err);
         });
     } else
-      fileServices
+      fileService
         .uploadFile(workspaceSlug as string, formData)
         .then((res) => {
           const imageUrl = res.asset;
@@ -87,7 +82,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           setIsImageUploading(false);
           setImage(null);
 
-          if (value && workspaceDetails) fileServices.deleteFile(workspaceDetails.id, value);
+          if (value && workspaceDetails) fileService.deleteFile(workspaceDetails.id, value);
         })
         .catch((err) => {
           console.error(err);
@@ -111,7 +106,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -125,12 +120,9 @@ export const ImageUploadModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md 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">
@@ -159,11 +151,9 @@ export const ImageUploadModal: React.FC<Props> = ({
                           </>
                         ) : (
                           <div>
-                            <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <UserCircle2 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 +175,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" size="sm" 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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
                       {isImageUploading ? "Uploading..." : "Upload & Save"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -207,4 +195,4 @@ export const ImageUploadModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index bed74fca0..02a216f06 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"
@@ -81,13 +76,13 @@ export const LinkModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop 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}
+              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"
@@ -95,50 +90,69 @@ export const LinkModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-200 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" 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..d988b9539 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";
+import { SmilePlus } from "lucide-react";
 
-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">
@@ -44,7 +31,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
               }`}
             >
-              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
+              <SmilePlus className="text-custom-text-100 h-3.5 w-3.5" />
             </span>
           </Popover.Button>
           <Transition
diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx
index fb8f3243d..2437b31a3 100644
--- a/web/components/core/sidebar/links-list.tsx
+++ b/web/components/core/sidebar/links-list.tsx
@@ -1,6 +1,6 @@
 // icons
-import { ArrowTopRightOnSquareIcon, LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { Icon } from "components/ui";
+import { ExternalLinkIcon } from "@plane/ui";
+import { Pencil, Trash2, LinkIcon } from "lucide-react";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
@@ -13,65 +13,66 @@ type Props = {
   userAuth: UserAuth;
 };
 
-export const LinksList: React.FC<Props> = ({
-  links,
-  handleDeleteLink,
-  handleEditLink,
-  userAuth,
-}) => {
+export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
     <>
       {links.map((link) => (
-        <div key={link.id} className="relative">
-          {!isNotAllowed && (
-            <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
-              <button
-                type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
-                onClick={() => handleEditLink(link)}
-              >
-                <Icon iconName="edit" className="text-custom-text-200" />
-              </button>
-              <a
-                href={link.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
-              >
-                <ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" />
-              </a>
-              <button
-                type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
-                onClick={() => handleDeleteLink(link.id)}
-              >
-                <TrashIcon className="h-4 w-4" />
-              </button>
+        <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+          <div className="flex items-start justify-between gap-2 w-full">
+            <div className="flex items-start gap-2">
+              <span className="py-1">
+                <LinkIcon className="h-3 w-3 flex-shrink-0" />
+              </span>
+              <span className="text-xs break-all">{link.title && link.title !== "" ? link.title : link.url}</span>
             </div>
-          )}
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
-          >
-            <div className="mt-0.5">
-              <LinkIcon className="h-3.5 w-3.5" />
-            </div>
-            <div>
-              <h5 className="w-4/5 break-words">{link.title ?? link.url}</h5>
-              <p className="mt-0.5 text-custom-text-200">
-                Added {timeAgo(link.created_at)}
-                <br />
-                by{" "}
-                {link.created_by_detail.is_bot
-                  ? link.created_by_detail.first_name + " Bot"
-                  : link.created_by_detail.display_name}
-              </p>
-            </div>
-          </a>
+
+            {!isNotAllowed && (
+              <div className="flex items-center gap-2 flex-shrink-0 z-[1]">
+                <button
+                  type="button"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleEditLink(link);
+                  }}
+                >
+                  <Pencil className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
+                </button>
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                >
+                  <ExternalLinkIcon className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
+                </a>
+                <button
+                  type="button"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDeleteLink(link.id);
+                  }}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="px-5">
+            <p className="text-xs mt-0.5 text-custom-text-300 stroke-[1.5]">
+              Added {timeAgo(link.created_at)}
+              <br />
+              by{" "}
+              {link.created_by_detail.is_bot
+                ? link.created_by_detail.first_name + " Bot"
+                : link.created_by_detail.display_name}
+            </p>
+          </div>
         </div>
       ))}
     </>
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
index cfa28c5e1..8108b87af 100644
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@@ -57,8 +57,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
       const interval = Math.ceil(totalDates / maxDates);
       const limitedDates = [];
 
-      for (let i = 0; i < totalDates; i += interval)
-        limitedDates.push(renderShortNumericDateFormat(dates[i]));
+      for (let i = 0; i < totalDates; i += interval) limitedDates.push(renderShortNumericDateFormat(dates[i]));
 
       if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1])))
         limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1]));
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index fed61b59f..66a841205 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -1,14 +1,17 @@
 import React from "react";
 
+import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
-import useIssuesView from "hooks/use-issues-view";
+// images
+import emptyLabel from "public/empty-state/empty_label.svg";
+import emptyMembers from "public/empty-state/empty_members.svg";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar, StateGroupIcon } from "@plane/ui";
 // types
 import {
   IModule,
@@ -17,9 +20,7 @@ import {
   TLabelsDistribution,
   TStateGroups,
 } from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-// types
+
 type Props = {
   distribution: {
     assignees: TAssigneesDistribution[];
@@ -33,6 +34,7 @@ type Props = {
   module?: IModule;
   roundedTab?: boolean;
   noBackground?: boolean;
+  isPeekView?: boolean;
 };
 
 export const SidebarProgressStats: React.FC<Props> = ({
@@ -42,9 +44,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
   module,
   roundedTab,
   noBackground,
+  isPeekView = false,
 }) => {
-  const { filters, setFilters } = useIssuesView();
-
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
   const currentValue = (tab: string | null) => {
@@ -55,7 +56,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
         return 1;
       case "States":
         return 2;
-
       default:
         return 0;
     }
@@ -72,7 +72,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
             return setTab("Labels");
           case 2:
             return setTab("States");
-
           default:
             return setTab("Assignees");
         }
@@ -82,15 +81,17 @@ export const SidebarProgressStats: React.FC<Props> = ({
         as="div"
         className={`flex w-full items-center gap-2 justify-between rounded-md ${
           noBackground ? "" : "bg-custom-background-90"
-        } px-1 py-1.5 
-        ${module ? "text-xs" : "text-sm"} `}
+        } p-0.5
+        ${module ? "text-xs" : "text-sm"}`}
       >
         <Tab
           className={({ selected }) =>
             `w-full  ${
               roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
-              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
         >
@@ -101,7 +102,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
             `w-full ${
               roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
-              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
         >
@@ -112,113 +115,120 @@ export const SidebarProgressStats: React.FC<Props> = ({
             `w-full ${
               roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1  text-custom-text-100 ${
-              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
         >
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-custom-text-200">
-        <Tab.Panel as="div" className="w-full space-y-1">
-          {distribution.assignees.map((assignee, index) => {
-            if (assignee.assignee_id)
-              return (
-                <SingleProgressStats
-                  key={assignee.assignee_id}
-                  title={
-                    <div className="flex items-center gap-2">
-                      <Avatar
-                        user={{
-                          id: assignee.assignee_id,
-                          avatar: assignee.avatar ?? "",
-                          first_name: assignee.first_name ?? "",
-                          last_name: assignee.last_name ?? "",
-                          display_name: assignee.display_name ?? "",
-                        }}
-                      />
-                      <span>{assignee.display_name}</span>
-                    </div>
-                  }
-                  completed={assignee.completed_issues}
-                  total={assignee.total_issues}
-                  onClick={() => {
-                    if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
-                      setFilters({
-                        assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
-                      });
-                    else
-                      setFilters({
-                        assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
-                      });
-                  }}
-                  selected={filters?.assignees?.includes(assignee.assignee_id ?? "")}
-                />
-              );
-            else
-              return (
-                <SingleProgressStats
-                  key={`unassigned-${index}`}
-                  title={
-                    <div className="flex items-center gap-2">
-                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                        <img
-                          src="/user.png"
-                          height="100%"
-                          width="100%"
-                          className="rounded-full"
-                          alt="User"
-                        />
+      <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {distribution.assignees.length > 0 ? (
+            distribution.assignees.map((assignee, index) => {
+              if (assignee.assignee_id)
+                return (
+                  <SingleProgressStats
+                    key={assignee.assignee_id}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <Avatar name={assignee.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+                        <span>{assignee.display_name}</span>
                       </div>
-                      <span>No assignee</span>
-                    </div>
-                  }
-                  completed={assignee.completed_issues}
-                  total={assignee.total_issues}
-                />
-              );
-          })}
-        </Tab.Panel>
-        <Tab.Panel as="div" className="w-full space-y-1">
-          {distribution.labels.map((label, index) => (
-            <SingleProgressStats
-              key={label.label_id ?? `no-label-${index}`}
-              title={
-                <div className="flex items-center gap-2">
-                  <span
-                    className="block h-3 w-3 rounded-full"
-                    style={{
-                      backgroundColor: label.color ?? "transparent",
-                    }}
+                    }
+                    completed={assignee.completed_issues}
+                    total={assignee.total_issues}
+                    {...(!isPeekView && {
+                      onClick: () => {
+                        // TODO: set filters here
+                        // if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
+                        //   setFilters({
+                        //     assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
+                        //   });
+                        // else
+                        //   setFilters({
+                        //     assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
+                        //   });
+                      },
+                      // selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
+                    })}
                   />
-                  <span className="text-xs">{label.label_name ?? "No labels"}</span>
-                </div>
-              }
-              completed={label.completed_issues}
-              total={label.total_issues}
-              onClick={() => {
-                if (filters.labels?.includes(label.label_id ?? ""))
-                  setFilters({
-                    labels: filters?.labels?.filter((l) => l !== label.label_id),
-                  });
-                else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
-              }}
-              selected={filters?.labels?.includes(label.label_id ?? "")}
-            />
-          ))}
+                );
+              else
+                return (
+                  <SingleProgressStats
+                    key={`unassigned-${index}`}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                        </div>
+                        <span>No assignee</span>
+                      </div>
+                    }
+                    completed={assignee.completed_issues}
+                    total={assignee.total_issues}
+                  />
+                );
+            })
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-2 h-full">
+              <div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
+                <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
+              </div>
+              <h6 className="text-base text-custom-text-300">No assignees yet</h6>
+            </div>
+          )}
         </Tab.Panel>
-        <Tab.Panel as="div" className="w-full space-y-1">
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {distribution.labels.length > 0 ? (
+            distribution.labels.map((label, index) => (
+              <SingleProgressStats
+                key={label.label_id ?? `no-label-${index}`}
+                title={
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="block h-3 w-3 rounded-full"
+                      style={{
+                        backgroundColor: label.color ?? "transparent",
+                      }}
+                    />
+                    <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                  </div>
+                }
+                completed={label.completed_issues}
+                total={label.total_issues}
+                {...(!isPeekView && {
+                  // TODO: set filters here
+                  onClick: () => {
+                    // if (filters.labels?.includes(label.label_id ?? ""))
+                    //   setFilters({
+                    //     labels: filters?.labels?.filter((l) => l !== label.label_id),
+                    //   });
+                    // else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
+                  },
+                  // selected: filters?.labels?.includes(label.label_id ?? ""),
+                })}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-2 h-full">
+              <div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
+                <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
+              </div>
+              <h6 className="text-base text-custom-text-300">No labels yet</h6>
+            </div>
+          )}
+        </Tab.Panel>
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
           {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: STATE_GROUP_COLORS[group as TStateGroups],
-                    }}
-                  />
+                  <StateGroupIcon stateGroup={group as TStateGroups} />
                   <span className="text-xs capitalize">{group}</span>
                 </div>
               }
diff --git a/web/components/core/sidebar/single-progress-stats.tsx b/web/components/core/sidebar/single-progress-stats.tsx
index 1498c9bad..ba6675c9a 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 { CircularProgressIndicator } from "@plane/ui";
 
 type TSingleProgressStatsProps = {
   title: any;
@@ -27,13 +27,10 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
     <div className="flex w-1/2 items-center justify-end gap-1 px-2">
       <div className="flex h-5 items-center justify-center gap-1">
         <span className="h-4 w-4">
-          <ProgressBar value={completed} maxValue={total} />
+          <CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
         </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..f47c1349f 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,35 +14,31 @@ 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";
+import { Palette } from "lucide-react";
 // types
-import { ICustomTheme } from "types";
+import { IUserTheme } from "types";
 
 type Props = {
-  name: keyof ICustomTheme;
+  name: keyof IUserTheme;
   position?: "left" | "right";
   watch: UseFormWatch<any>;
   setValue: UseFormSetValue<any>;
+  control: Control<IUserTheme, 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);
   };
 
-  const getColorText = (colorName: keyof ICustomTheme) => {
+  const getColorText = (colorName: keyof IUserTheme) => {
     switch (colorName) {
       case "background":
         return "Background";
@@ -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"
-                  />
+                  <Palette className="h-3.5 w-3.5 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..4ed495c5b 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -1,74 +1,76 @@
-import React, { useEffect, useState } from "react";
-
-import { useTheme } from "next-themes";
-
-import { useForm } from "react-hook-form";
-
-// ui
-import { PrimaryButton } from "components/ui";
-import { ColorPickerInput } from "components/core";
-// types
-import { ICustomTheme } from "types";
-// mobx react lite
 import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { useTheme } from "next-themes";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button, InputColorPicker } from "@plane/ui";
+// types
+import { IUserTheme } from "types";
 
-type Props = {
-  preLoadedData?: Partial<ICustomTheme> | null;
+const inputRules = {
+  required: "Background color is required",
+  minLength: {
+    value: 7,
+    message: "Enter a valid hex code of 6 characters",
+  },
+  maxLength: {
+    value: 7,
+    message: "Enter a valid hex code of 6 characters",
+  },
+  pattern: {
+    value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+    message: "Enter a valid hex code of 6 characters",
+  },
 };
 
-const defaultValues: ICustomTheme = {
-  background: "#0d101b",
-  text: "#c5c5c5",
-  primary: "#3f76ff",
-  sidebarBackground: "#0d101b",
-  sidebarText: "#c5c5c5",
-  darkPalette: false,
-  palette: "",
-  theme: "custom",
-};
-
-export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData }) => {
-  const store: any = useMobxStore();
+export const CustomThemeSelector: React.FC = observer(() => {
+  const { user: userStore } = useMobxStore();
+  const userTheme = userStore?.currentUser?.theme;
+  // hooks
   const { setTheme } = useTheme();
 
-  const [darkPalette, setDarkPalette] = useState(false);
   const {
-    register,
+    control,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
-    setValue,
-    reset,
-  } = useForm<ICustomTheme>({
-    defaultValues,
+  } = useForm<IUserTheme>({
+    defaultValues: {
+      background: userTheme?.background !== "" ? userTheme?.background : "#0d101b",
+      text: userTheme?.text !== "" ? userTheme?.text : "#c5c5c5",
+      primary: userTheme?.primary !== "" ? userTheme?.primary : "#3f76ff",
+      sidebarBackground: userTheme?.sidebarBackground !== "" ? userTheme?.sidebarBackground : "#0d101b",
+      sidebarText: userTheme?.sidebarText !== "" ? userTheme?.sidebarText : "#c5c5c5",
+      darkPalette: userTheme?.darkPalette || false,
+      palette: userTheme?.palette !== "" ? userTheme?.palette : "",
+    },
   });
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...preLoadedData,
-    });
-  }, [preLoadedData, reset]);
 
   const handleUpdateTheme = async (formData: any) => {
-    const payload: ICustomTheme = {
+    const payload: IUserTheme = {
       background: formData.background,
       text: formData.text,
       primary: formData.primary,
       sidebarBackground: formData.sidebarBackground,
       sidebarText: formData.sidebarText,
-      darkPalette: darkPalette,
+      darkPalette: false,
       palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
       theme: "custom",
     };
 
     setTheme("custom");
 
-    return store.user
-      .updateCurrentUserSettings({ theme: payload })
-      .then((response: any) => response)
-      .catch((error: any) => error);
+    return userStore.updateCurrentUser({ theme: payload });
+  };
+
+  const handleValueChange = (val: string | undefined, onChange: any) => {
+    let hex = val;
+
+    // prepend a hashtag if it doesn't exist
+    if (val && val[0] !== "#") hex = `#${val}`;
+
+    onChange(hex);
   };
 
   return (
@@ -76,78 +78,145 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
       <div className="space-y-5">
         <h3 className="text-lg font-semibold text-custom-text-100">Customize your theme</h3>
         <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="grid grid-cols-1 gap-x-8 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>
-              <ColorPickerInput
-                name="background"
-                position="right"
-                error={errors.background}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Background color</h3>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="background"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="background"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#0d101b"
+                      className="w-full"
+                      style={{
+                        backgroundColor: value,
+                        color: watch("text"),
+                      }}
+                      hasError={Boolean(errors?.background)}
+                    />
+                  )}
+                />
+                {errors.background && <p className="text-xs text-red-500 mt-1">{errors.background.message}</p>}
+              </div>
             </div>
 
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
-              <ColorPickerInput
-                name="text"
-                error={errors.text}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="text"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="text"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#c5c5c5"
+                      className="w-full"
+                      style={{
+                        backgroundColor: watch("background"),
+                        color: value,
+                      }}
+                      hasError={Boolean(errors?.text)}
+                    />
+                  )}
+                />
+                {errors.text && <p className="text-xs text-red-500 mt-1">{errors.text.message}</p>}
+              </div>
             </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>
-              <ColorPickerInput
-                name="primary"
-                error={errors.primary}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Primary(Theme) color</h3>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="primary"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="primary"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#3f76ff"
+                      className="w-full"
+                      style={{
+                        backgroundColor: value,
+                        color: watch("text"),
+                      }}
+                      hasError={Boolean(errors?.primary)}
+                    />
+                  )}
+                />
+                {errors.primary && <p className="text-xs text-red-500 mt-1">{errors.primary.message}</p>}
+              </div>
             </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>
-              <ColorPickerInput
-                name="sidebarBackground"
-                position="right"
-                error={errors.sidebarBackground}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar background color</h3>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="sidebarBackground"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="sidebarBackground"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#0d101b"
+                      className="w-full"
+                      style={{
+                        backgroundColor: value,
+                        color: watch("sidebarText"),
+                      }}
+                      hasError={Boolean(errors?.sidebarBackground)}
+                    />
+                  )}
+                />
+                {errors.sidebarBackground && (
+                  <p className="text-xs text-red-500 mt-1">{errors.sidebarBackground.message}</p>
+                )}
+              </div>
             </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>
-              <ColorPickerInput
-                name="sidebarText"
-                error={errors.sidebarText}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar text color</h3>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="sidebarText"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="sidebarText"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#c5c5c5"
+                      className="w-full"
+                      style={{
+                        backgroundColor: watch("sidebarBackground"),
+                        color: value,
+                      }}
+                      hasError={Boolean(errors?.sidebarText)}
+                    />
+                  )}
+                />
+                {errors.sidebarText && <p className="text-xs text-red-500 mt-1">{errors.sidebarText.message}</p>}
+              </div>
             </div>
           </div>
         </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 687998c25..78364562f 100644
--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@@ -1,135 +1,80 @@
-// next-themes
-import { useTheme } from "next-themes";
-// hooks
-import useUser from "hooks/use-user";
+import { FC } from "react";
 // constants
-import { THEMES_OBJ } from "constants/themes";
+import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
 // ui
-import { CustomSelect } from "components/ui";
-// types
-import { ICustomTheme } from "types";
-import { unsetCustomCssVariables } from "helpers/theme.helper";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { CustomSelect } from "@plane/ui";
 
 type Props = {
-  setPreLoadedData: React.Dispatch<React.SetStateAction<ICustomTheme | null>>;
-  customThemeSelectorOptions: boolean;
-  setCustomThemeSelectorOptions: React.Dispatch<React.SetStateAction<boolean>>;
+  value: I_THEME_OPTION | null;
+  onChange: (value: I_THEME_OPTION) => void;
 };
 
-export const ThemeSwitch: React.FC<Props> = observer(
-  ({ setPreLoadedData, customThemeSelectorOptions, setCustomThemeSelectorOptions }) => {
-    const store: any = useMobxStore();
+export const ThemeSwitch: FC<Props> = (props) => {
+  const { value, onChange } = props;
 
-    const { user, mutateUser } = useUser();
-    const { theme, setTheme } = useTheme();
-
-    const updateUserTheme = (newTheme: string) => {
-      if (!user) return;
-      setTheme(newTheme);
-      return store.user
-        .updateCurrentUserSettings({ theme: { ...user.theme, theme: newTheme } })
-        .then((response: any) => response)
-        .catch((error: any) => error);
-    };
-
-    const currentThemeObj = THEMES_OBJ.find((t) => t.value === theme);
-
-    return (
-      <CustomSelect
-        value={theme}
-        label={
-          currentThemeObj ? (
-            <div className="flex items-center gap-2">
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        value ? (
+          <div className="flex items-center gap-2">
+            <div
+              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              style={{
+                borderColor: value.icon.border,
+              }}
+            >
               <div
-                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+                className="h-full w-1/2 rounded-l-full"
                 style={{
-                  borderColor: currentThemeObj.icon.border,
+                  background: value.icon.color1,
                 }}
-              >
-                <div
-                  className="h-full w-1/2 rounded-l-full"
-                  style={{
-                    background: currentThemeObj.icon.color1,
-                  }}
-                />
-                <div
-                  className="h-full w-1/2 rounded-r-full border-l"
-                  style={{
-                    borderLeftColor: currentThemeObj.icon.border,
-                    background: currentThemeObj.icon.color2,
-                  }}
-                />
-              </div>
-              {currentThemeObj.label}
-            </div>
-          ) : (
-            "Select your theme"
-          )
-        }
-        onChange={({ value, type }: { value: string; type: string }) => {
-          if (value === "custom") {
-            if (user?.theme.palette) {
-              setPreLoadedData({
-                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",
-                sidebarText: user.theme.sidebarText !== "" ? user.theme.sidebarText : "#c5c5c5",
-                darkPalette: false,
-                palette:
-                  user.theme.palette !== ",,,,"
-                    ? user.theme.palette
-                    : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-                theme: "custom",
-              });
-            }
-
-            if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
-          } else {
-            if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
-            unsetCustomCssVariables();
-          }
-
-          updateUserTheme(value);
-          document.documentElement.style.setProperty("--color-scheme", type);
-        }}
-        input
-        width="w-full"
-        position="right"
-      >
-        {THEMES_OBJ.map(({ value, label, type, icon }) => (
-          <CustomSelect.Option key={value} value={{ value, type }}>
-            <div className="flex items-center gap-2">
+              />
               <div
-                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+                className="h-full w-1/2 rounded-r-full border-l"
                 style={{
-                  borderColor: icon.border,
+                  borderLeftColor: value.icon.border,
+                  background: value.icon.color2,
                 }}
-              >
-                <div
-                  className="h-full w-1/2 rounded-l-full"
-                  style={{
-                    background: icon.color1,
-                  }}
-                />
-                <div
-                  className="h-full w-1/2 rounded-r-full border-l"
-                  style={{
-                    borderLeftColor: icon.border,
-                    background: icon.color2,
-                  }}
-                />
-              </div>
-              {label}
+              />
             </div>
-          </CustomSelect.Option>
-        ))}
-      </CustomSelect>
-    );
-  }
-);
+            {value.label}
+          </div>
+        ) : (
+          "Select your theme"
+        )
+      }
+      onChange={onChange}
+      input
+      width="w-full"
+    >
+      {THEME_OPTIONS.map((themeOption) => (
+        <CustomSelect.Option key={themeOption.value} value={themeOption}>
+          <div className="flex items-center gap-2">
+            <div
+              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              style={{
+                borderColor: themeOption.icon.border,
+              }}
+            >
+              <div
+                className="h-full w-1/2 rounded-l-full"
+                style={{
+                  background: themeOption.icon.color1,
+                }}
+              />
+              <div
+                className="h-full w-1/2 rounded-r-full border-l"
+                style={{
+                  borderLeftColor: themeOption.icon.border,
+                  background: themeOption.icon.color2,
+                }}
+              />
+            </div>
+            {themeOption.label}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
deleted file mode 100644
index 75038f57b..000000000
--- a/web/components/core/views/all-views.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// 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";
-
-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;
-};
-
-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 [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const { groupedIssues, isEmpty, displayFilters } = viewProps;
-
-  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
-
-  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 handleMyIssueOpen = (issue: IIssue) => {
-    setMyIssueProjectId(issue.project);
-  };
-
-  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>
-  );
-};
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 6d583e772..000000000
--- a/web/components/core/views/board-view/single-board.tsx
+++ /dev/null
@@ -1,293 +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={
-                            <button
-                              type="button"
-                              className="flex items-center gap-2 font-medium text-custom-primary outline-none whitespace-nowrap"
-                            >
-                              <PlusIcon className="h-4 w-4" />
-                              Add Issue
-                            </button>
-                          }
-                          position="left"
-                          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 f7d545eb5..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={
-                    <button
-                      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" />
-                    </button>
-                  }
-                >
-                  <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/gantt-chart-view/inline-create-issue-form.tsx b/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
deleted file mode 100644
index 785eb3c5a..000000000
--- a/web/components/core/views/gantt-chart-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 "components/core";
-
-// 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 className="w-[14px] h-[14px] rounded-full border border-custom-border-1000 flex-shrink-0" />
-      <h4 className="text-sm 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 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
-      />
-    </>
-  );
-};
-
-export const GanttInlineCreateIssueForm: React.FC<Props> = (props) => (
-  <>
-    <InlineCreateIssueFormWrapper
-      className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
-      {...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/index.ts b/web/components/core/views/index.ts
deleted file mode 100644
index 13da90d8e..000000000
--- a/web/components/core/views/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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
deleted file mode 100644
index ec5d8e79e..000000000
--- a/web/components/core/views/inline-issue-create-wrapper.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-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";
-
-// hooks
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-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 useOutsideClickDetector from "hooks/use-outside-click-detector";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-
-// helpers
-import { getFetchKeysForIssueMutation } from "helpers/string.helper";
-
-// fetch-keys
-import {
-  USER_ISSUE,
-  SUB_ISSUES,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-} from "constants/fetch-keys";
-
-// types
-import { IIssue } from "types";
-
-const defaultValues: Partial<IIssue> = {
-  name: "",
-};
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  onSuccess?: (data: IIssue) => Promise<void> | void;
-  prePopulatedData?: Partial<IIssue>;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-export const addIssueToCycle = async (
-  workspaceSlug: string,
-  projectId: string,
-  issueId: string,
-  cycleId: string,
-  user: any,
-  params: any
-) => {
-  if (!workspaceSlug || !projectId) return;
-
-  await issuesService
-    .addIssueToCycle(
-      workspaceSlug as string,
-      projectId.toString(),
-      cycleId,
-      {
-        issues: [issueId],
-      },
-      user
-    )
-    .then(() => {
-      if (cycleId) {
-        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
-        mutate(CYCLE_DETAILS(cycleId as string));
-      }
-    });
-};
-
-export const addIssueToModule = async (
-  workspaceSlug: string,
-  projectId: string,
-  issueId: string,
-  moduleId: string,
-  user: any,
-  params: any
-) => {
-  await modulesService
-    .addIssuesToModule(
-      workspaceSlug as string,
-      projectId.toString(),
-      moduleId as string,
-      {
-        issues: [issueId],
-      },
-      user
-    )
-    .then(() => {
-      if (moduleId) {
-        mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-        mutate(MODULE_DETAILS(moduleId as string));
-      }
-    });
-};
-
-export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
-  const { isOpen, handleClose, onSuccess, prePopulatedData, children, className } = props;
-
-  const ref = useRef<HTMLFormElement>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-
-  const { user } = useUser();
-
-  const { setToastAlert } = useToast();
-
-  const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
-  const { ...viewGanttParams } = params;
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
-  const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
-  const { params: ganttParams } = useGanttChartIssues(
-    workspaceSlug?.toString(),
-    projectId?.toString()
-  );
-
-  const method = useForm<IIssue>({ defaultValues });
-  const {
-    reset,
-    handleSubmit,
-    getValues,
-    formState: { errors, isSubmitting },
-  } = method;
-
-  useOutsideClickDetector(ref, handleClose);
-  useKeypress("Escape", handleClose);
-
-  useEffect(() => {
-    const values = getValues();
-
-    if (prePopulatedData) reset({ ...defaultValues, ...values, ...prePopulatedData });
-  }, [reset, prePopulatedData, getValues]);
-
-  useEffect(() => {
-    if (!isOpen) reset({ ...defaultValues });
-  }, [isOpen, reset]);
-
-  useEffect(() => {
-    if (!errors) return;
-
-    Object.keys(errors).forEach((key) => {
-      const error = errors[key as keyof IIssue];
-
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: error?.message?.toString() || "Some error occurred. Please try again.",
-      });
-    });
-  }, [errors, setToastAlert]);
-
-  const { calendarFetchKey, ganttFetchKey, spreadsheetFetchKey } = getFetchKeysForIssueMutation({
-    cycleId: cycleId,
-    moduleId: moduleId,
-    viewId: viewId,
-    projectId: projectId?.toString() ?? "",
-    calendarParams,
-    spreadsheetParams,
-    viewGanttParams,
-    ganttParams,
-  });
-
-  const onSubmitHandler = async (formData: IIssue) => {
-    if (!workspaceSlug || !projectId || !user || isSubmitting) return;
-
-    reset({ ...defaultValues });
-
-    await (!isDraftIssues
-      ? issuesService.createIssues(workspaceSlug.toString(), projectId.toString(), formData, user)
-      : issuesService.createDraftIssue(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          formData,
-          user
-        )
-    )
-      .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
-          );
-        if (formData.module && formData.module !== "")
-          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 (displayFilters.layout === "gantt_chart") await mutate(ganttFetchKey);
-        if (displayFilters.layout === "spreadsheet") await mutate(spreadsheetFetchKey);
-        if (groupedIssues) await mutateMyIssues();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue created successfully.",
-        });
-
-        if (onSuccess) await onSuccess(res);
-
-        if (formData.assignees_list?.some((assignee) => assignee === user?.id))
-          mutate(USER_ISSUE(workspaceSlug as string));
-
-        if (formData.parent && formData.parent !== "") mutate(SUB_ISSUES(formData.parent));
-      })
-      .catch((err) => {
-        Object.keys(err || {}).forEach((key) => {
-          const error = err?.[key];
-          const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
-
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: errorTitle || "Some error occurred. Please try again.",
-          });
-        });
-      });
-  };
-
-  return (
-    <>
-      <Transition
-        show={isOpen}
-        enter="transition ease-in-out duration-200 transform"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in-out duration-200 transform"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
-        <FormProvider {...method}>
-          <form ref={ref} className={className} onSubmit={handleSubmit(onSubmitHandler)}>
-            {children}
-          </form>
-        </FormProvider>
-      </Transition>
-    </>
-  );
-};
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
deleted file mode 100644
index 3c123c2ac..000000000
--- a/web/components/core/views/issues-view.tsx
+++ /dev/null
@@ -1,633 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// 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";
-
-type Props = {
-  openIssuesListModal?: () => void;
-  disableUserActions?: boolean;
-};
-
-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);
-
-  // 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);
-
-  // trash box
-  const [trashBox, setTrashBox] = useState(false);
-
-  // selected draft issue
-  const [selectedDraftIssue, setSelectedDraftIssue] = useState<IIssue | null>(null);
-  const [selectedDraftForDelete, setSelectDraftForDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-  const isArchivedIssues = router.pathname?.split("/")?.[4] === "archived-issues";
-
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
-  const {
-    groupedByIssues,
-    mutateIssues,
-    displayFilters,
-    filters,
-    isEmpty,
-    setFilters,
-    params,
-    setDisplayFilters,
-  } = useIssuesView();
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
-  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 { data: labels } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
-
-  useEffect(() => {
-    if (!isDraftIssues) return;
-
-    if (
-      displayFilters.layout === "calendar" ||
-      displayFilters.layout === "gantt_chart" ||
-      displayFilters.layout === "spreadsheet"
-    )
-      setDisplayFilters({ layout: "list" });
-  }, [isDraftIssues, displayFilters, setDisplayFilters]);
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleDraftIssueClick = useCallback((issue: any) => setSelectedDraftIssue(issue), []);
-  const handleDraftIssueDelete = useCallback((issue: any) => setSelectDraftForDelete(issue), []);
-
-  const handleOnDragEnd = useCallback(
-    async (result: DropResult) => {
-      setTrashBox(false);
-
-      if (!result.destination || !workspaceSlug || !projectId || !groupedByIssues) return;
-
-      const { source, destination } = result;
-
-      const draggedItem = groupedByIssues[source.droppableId][source.index];
-
-      if (destination.droppableId === "trashBox") {
-        handleDeleteIssue(draggedItem);
-      } else {
-        if (displayFilters.order_by === "sort_order") {
-          let newSortOrder = draggedItem.sort_order;
-
-          const destinationGroupArray = groupedByIssues[destination.droppableId];
-
-          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;
-            }
-          }
-
-          draggedItem.sort_order = newSortOrder;
-        }
-
-        const destinationGroup = destination.droppableId; // destination group id
-
-        if (
-          displayFilters.order_by === "sort_order" ||
-          source.droppableId !== destination.droppableId
-        ) {
-          // different group/column;
-
-          // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
-          // if the issue is moved to a different group, then we will change the group of the
-          // dragged item(or issue)
-
-          if (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;
-          }
-        }
-
-        const sourceGroup = source.droppableId; // source group id
-
-        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 sourceGroupArray = [...groupedByIssues[sourceGroup]];
-            const destinationGroupArray = [...groupedByIssues[destinationGroup]];
-
-            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
-        );
-
-        // 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 (
-              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
-              );
-
-            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,
-    ]
-  );
-
-  const addIssueToGroup = useCallback(
-    (groupTitle: string) => {
-      setCreateIssueModal(true);
-
-      let preloadedValue: string | string[] = 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" });
-    },
-    [displayFilters.group_by, setCreateIssueModal, setPreloadedData]
-  );
-
-  const addIssueToDate = useCallback(
-    (date: string) => {
-      setCreateIssueModal(true);
-      setPreloadedData({
-        target_date: date,
-        actionType: "createIssue",
-      });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  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 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 handleDraftIssueAction = useCallback(
-    (issue: IIssue, action: "edit" | "delete") => {
-      if (action === "edit") handleDraftIssueClick(issue);
-      else if (action === "delete") handleDraftIssueDelete(issue);
-    },
-    [handleDraftIssueClick, handleDraftIssueDelete]
-  );
-
-  const removeIssueFromCycle = useCallback(
-    (bridgeId: string, issueId: string) => {
-      if (!workspaceSlug || !projectId || !cycleId) return;
-
-      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
-      );
-
-      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]
-  );
-
-  const removeIssueFromModule = useCallback(
-    (bridgeId: string, issueId: string) => {
-      if (!workspaceSlug || !projectId || !moduleId) return;
-
-      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
-      );
-
-      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 nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IIssueFilterOptions] === null
-  );
-
-  const areFiltersApplied =
-    Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
-
-  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}
-      />
-    </>
-  );
-};
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 8cba67112..000000000
--- a/web/components/core/views/list-view/single-list.tsx
+++ /dev/null
@@ -1,378 +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>
-                  }
-                  position="right"
-                  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
deleted file mode 100644
index 745083d5f..000000000
--- a/web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// components
-import { MembersSelect } from "components/project";
-// services
-import trackEventServices from "services/track-event.service";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const AssigneeColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
-
-  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
-    );
-  };
-
-  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.assignee && (
-          <MembersSelect
-            value={issue.assignees}
-            projectId={projectId}
-            onChange={handleAssigneeChange}
-            membersDetails={issue.assignee_details}
-            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-            hideDropdownArrow
-            disabled={isNotAllowed}
-          />
-        )}
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/assignee-column/index.ts b/web/components/core/views/spreadsheet-view/assignee-column/index.ts
deleted file mode 100644
index 8750550be..000000000
--- a/web/components/core/views/spreadsheet-view/assignee-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-assignee-column";
-export * from "./assignee-column";
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
deleted file mode 100644
index a864126c6..000000000
--- a/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { AssigneeColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <AssigneeColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetAssigneeColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index cff1f99aa..000000000
--- a/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-
-// types
-import { ICurrentUserResponse, 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,
-}) => (
-  <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 && (
-        <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.created_at)}
-        </div>
-      )}
-    </span>
-  </div>
-);
diff --git a/web/components/core/views/spreadsheet-view/created-on-column/index.ts b/web/components/core/views/spreadsheet-view/created-on-column/index.ts
deleted file mode 100644
index 28781aa17..000000000
--- a/web/components/core/views/spreadsheet-view/created-on-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-created-on-column";
-export * from "./created-on-column";
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
deleted file mode 100644
index 3ce3f2dbe..000000000
--- a/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { CreatedOnColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <CreatedOnColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetCreatedOnColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index e2d09ae0a..000000000
--- a/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-// components
-import { ViewDueDateSelect } from "components/issues";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | 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>
-);
diff --git a/web/components/core/views/spreadsheet-view/due-date-column/index.ts b/web/components/core/views/spreadsheet-view/due-date-column/index.ts
deleted file mode 100644
index 64b454877..000000000
--- a/web/components/core/views/spreadsheet-view/due-date-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-due-date-column";
-export * from "./due-date-column";
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
deleted file mode 100644
index 1cd2eac26..000000000
--- a/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { DueDateColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetDueDateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <DueDateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetDueDateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index bb44cefa3..000000000
--- a/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-// components
-import { ViewEstimateSelect } from "components/issues";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | 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>
-);
diff --git a/web/components/core/views/spreadsheet-view/estimate-column/index.ts b/web/components/core/views/spreadsheet-view/estimate-column/index.ts
deleted file mode 100644
index 31f07e6a7..000000000
--- a/web/components/core/views/spreadsheet-view/estimate-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-estimate-column";
-export * from "./estimate-column";
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
deleted file mode 100644
index a1cc74ad0..000000000
--- a/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { EstimateColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetEstimateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <EstimateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetEstimateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index c00f085b2..000000000
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-// components
-import { Popover2 } from "@blueprintjs/popover2";
-// icons
-import { Icon } from "components/ui";
-import {
-  EllipsisHorizontalIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-// hooks
-import useToast from "hooks/use-toast";
-// types
-import { IIssue, Properties, UserAuth } from "types";
-// helper
-import { copyTextToClipboard } from "helpers/string.helper";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  expanded: boolean;
-  handleToggleExpand: (issueId: string) => void;
-  properties: Properties;
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
-  setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
-  disableUserActions: boolean;
-  userAuth: UserAuth;
-  nestingLevel: number;
-};
-
-export const IssueColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  expanded,
-  handleToggleExpand,
-  properties,
-  handleEditIssue,
-  handleDeleteIssue,
-  setCurrentProjectId,
-  disableUserActions,
-  userAuth,
-  nestingLevel,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const openPeekOverview = () => {
-    const { query } = router;
-    setCurrentProjectId(issue.project_detail.id);
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: issue.id },
-    });
-  };
-
-  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 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 && (
-        <div
-          className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
-          style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
-        >
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
-            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
-              {issue.project_detail?.identifier}-{issue.sequence_id}
-            </span>
-
-            {!isNotAllowed && !disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
-                  isOpen={isOpen}
-                  canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
-                    <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
-                    >
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleEditIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <PencilIcon className="h-4 w-4" />
-                          <span>Edit issue</span>
-                        </div>
-                      </button>
-
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleDeleteIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
-                          <span>Delete issue</span>
-                        </div>
-                      </button>
-
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleCopyText();
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy issue link</span>
-                        </div>
-                      </button>
-                    </div>
-                  }
-                  placement="bottom-start"
-                >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
-              </div>
-            )}
-          </div>
-
-          {issue.sub_issues_count > 0 && (
-            <div className="h-6 w-6 flex justify-center items-center">
-              <button
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                onClick={() => handleToggleExpand(issue.id)}
-              >
-                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-      <span className="flex items-center px-4 py-2.5 h-full  truncate flex-grow">
-        <button
-          type="button"
-          className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
-          onClick={openPeekOverview}
-        >
-          {issue.name}
-        </button>
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/label-column/index.ts b/web/components/core/views/spreadsheet-view/label-column/index.ts
deleted file mode 100644
index a1b69c1a9..000000000
--- a/web/components/core/views/spreadsheet-view/label-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-label-column";
-export * from "./label-column";
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
deleted file mode 100644
index 1d1355eec..000000000
--- a/web/components/core/views/spreadsheet-view/label-column/label-column.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-
-// components
-import { LabelSelect } from "components/project";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const LabelColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const handleLabelChange = (data: any) => {
-    partialUpdateIssue({ labels_list: data }, issue);
-  };
-
-  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.labels && (
-          <LabelSelect
-            value={issue.labels}
-            projectId={projectId}
-            onChange={handleLabelChange}
-            labelsDetails={issue.label_details}
-            hideDropdownArrow
-            maxRender={1}
-            user={user}
-            disabled={isNotAllowed}
-          />
-        )}
-      </span>
-    </div>
-  );
-};
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
deleted file mode 100644
index 5ab77e909..000000000
--- a/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { LabelColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetLabelColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <LabelColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetLabelColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/priority-column/index.ts b/web/components/core/views/spreadsheet-view/priority-column/index.ts
deleted file mode 100644
index fc542331e..000000000
--- a/web/components/core/views/spreadsheet-view/priority-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-priority-column";
-export * from "./priority-column";
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
deleted file mode 100644
index eca140df1..000000000
--- a/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// components
-import { PrioritySelect } from "components/project";
-// services
-import trackEventServices from "services/track-event.service";
-// types
-import { ICurrentUserResponse, IIssue, Properties, TIssuePriorities } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const PriorityColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
-
-  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
-    );
-  };
-
-  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.priority && (
-          <PrioritySelect
-            value={issue.priority}
-            onChange={handlePriorityChange}
-            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-            hideDropdownArrow
-            disabled={isNotAllowed}
-          />
-        )}
-      </span>
-    </div>
-  );
-};
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
deleted file mode 100644
index f0b84fb59..000000000
--- a/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { PriorityColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetPriorityColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <PriorityColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetPriorityColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/single-issue.tsx b/web/components/core/views/spreadsheet-view/single-issue.tsx
deleted file mode 100644
index 32cb4ba77..000000000
--- a/web/components/core/views/spreadsheet-view/single-issue.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// 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";
-// services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
-// constant
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-// types
-import {
-  ICurrentUserResponse,
-  IIssue,
-  IState,
-  ISubIssueResponse,
-  Properties,
-  TIssuePriorities,
-  UserAuth,
-} from "types";
-// helper
-import { copyTextToClipboard } from "helpers/string.helper";
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  index: number;
-  expanded: boolean;
-  handleToggleExpand: (issueId: string) => void;
-  properties: Properties;
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
-  gridTemplateColumns: string;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | 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 [isOpen, setIsOpen] = useState(false);
-
-  const router = useRouter();
-
-  const { workspaceSlug, cycleId, moduleId, viewId } = router.query;
-
-  const { params } = useSpreadsheetIssuesView();
-
-  const { setToastAlert } = useToast();
-
-  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, 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
-        );
-
-      issuesService
-        .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));
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
-  );
-
-  const openPeekOverview = () => {
-    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: issue.id },
-    });
-  };
-
-  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 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 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 paddingLeft = `${nestingLevel * 68}px`;
-
-  const tooltipPosition = index === 0 ? "bottom" : "top";
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
-  return (
-    <>
-      <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 }}
-      >
-        <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 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">
-          <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
-              {properties.key && (
-                <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              )}
-              {!isNotAllowed && !disableUserActions && (
-                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                  <Popover2
-                    isOpen={isOpen}
-                    canEscapeKeyClose
-                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                    content={
-                      <div
-                        className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
-                      >
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleEditIssue(issue);
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center justify-start gap-2">
-                            <PencilIcon className="h-4 w-4" />
-                            <span>Edit issue</span>
-                          </div>
-                        </button>
-
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleDeleteIssue(issue);
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
-                            <span>Delete issue</span>
-                          </div>
-                        </button>
-
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleCopyText();
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center justify-start gap-2">
-                            <LinkIcon className="h-4 w-4" />
-                            <span>Copy issue link</span>
-                          </div>
-                        </button>
-                      </div>
-                    }
-                    placement="bottom-start"
-                  >
-                    <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                  </Popover2>
-                </div>
-              )}
-            </div>
-
-            {issue.sub_issues_count > 0 && (
-              <div className="h-6 w-6 flex justify-center items-center">
-                <button
-                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                  onClick={() => handleToggleExpand(issue.id)}
-                >
-                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-                </button>
-              </div>
-            )}
-          </div>
-
-          <button
-            type="button"
-            className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
-            onClick={openPeekOverview}
-          >
-            {issue.name}
-          </button>
-        </div>
-        {properties.state && (
-          <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">
-            <StateSelect
-              value={issue.state_detail}
-              projectId={projectId}
-              onChange={handleStateChange}
-              buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-              hideDropdownArrow
-              disabled={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.priority && (
-          <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">
-            <PrioritySelect
-              value={issue.priority}
-              onChange={handlePriorityChange}
-              buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-              hideDropdownArrow
-              disabled={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.assignee && (
-          <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">
-            <MembersSelect
-              value={issue.assignees}
-              projectId={projectId}
-              onChange={handleAssigneeChange}
-              membersDetails={issue.assignee_details}
-              buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-              hideDropdownArrow
-              disabled={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.labels && (
-          <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">
-            <LabelSelect
-              value={issue.labels}
-              projectId={projectId}
-              onChange={handleLabelChange}
-              labelsDetails={issue.label_details}
-              hideDropdownArrow
-              maxRender={1}
-              user={user}
-              disabled={isNotAllowed}
-            />
-          </div>
-        )}
-
-        {properties.start_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">
-            <ViewStartDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              tooltipPosition={tooltipPosition}
-              noBorder
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-
-        {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}
-            />
-          </div>
-        )}
-        {properties.estimate && (
-          <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">
-            <ViewEstimateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="left"
-              tooltipPosition={tooltipPosition}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.created_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.created_at)}
-          </div>
-        )}
-        {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>
-        )}
-      </div>
-    </>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
deleted file mode 100644
index 0d9214a36..000000000
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ /dev/null
@@ -1,672 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-import { KeyedMutator, mutate } from "swr";
-
-// components
-import {
-  ListInlineCreateIssueForm,
-  SpreadsheetAssigneeColumn,
-  SpreadsheetCreatedOnColumn,
-  SpreadsheetDueDateColumn,
-  SpreadsheetEstimateColumn,
-  SpreadsheetIssuesColumn,
-  SpreadsheetLabelColumn,
-  SpreadsheetPriorityColumn,
-  SpreadsheetStartDateColumn,
-  SpreadsheetStateColumn,
-  SpreadsheetUpdatedOnColumn,
-} from "components/core";
-import { CustomMenu, Icon, Spinner } 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";
-// 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";
-// icon
-import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
-
-type Props = {
-  spreadsheetIssues: IIssue[];
-  mutateIssues: KeyedMutator<
-    | IIssue[]
-    | {
-        [key: string]: IIssue[];
-      }
-  >;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  openIssuesListModal?: (() => void) | null;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-};
-
-export const SpreadsheetView: React.FC<Props> = ({
-  spreadsheetIssues,
-  mutateIssues,
-  handleIssueAction,
-  openIssuesListModal,
-  disableUserActions,
-  user,
-  userAuth,
-}) => {
-  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
-  const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
-
-  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
-
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = 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 {
-    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 });
-    setSelectedMenuItem(`${order}_${itemKey}`);
-    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
-  };
-
-  const renderColumn = (
-    header: string,
-    propertyName: string,
-    Component: React.ComponentType<any>,
-    ascendingOrder: TIssueOrderByOptions,
-    descendingOrder: TIssueOrderByOptions
-  ) => (
-    <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"
-            position="left"
-            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"
-                  : ""
-              }`}
-              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) => (
-          <Component
-            key={`${issue.id}_${index}`}
-            issue={issue}
-            projectId={issue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={currentViewProperties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-      </div>
-    </div>
-  );
-
-  const handleScroll = () => {
-    if (containerRef.current) {
-      const scrollLeft = containerRef.current.scrollLeft;
-      setIsScrolled(scrollLeft > 0);
-    }
-  };
-
-  useEffect(() => {
-    const currentContainerRef = containerRef.current;
-
-    if (currentContainerRef) {
-      currentContainerRef.addEventListener("scroll", handleScroll);
-    }
-
-    return () => {
-      if (currentContainerRef) {
-        currentContainerRef.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      <IssuePeekOverview
-        handleMutation={() => mutateIssues()}
-        projectId={currentProjectId ?? ""}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
-      />
-      <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 ? (
-              <>
-                <div className="sticky left-0 w-[28rem] z-[2]">
-                  <div
-                    className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
-                    style={{
-                      boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.15)" : "",
-                    }}
-                  >
-                    <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>
-                      )}
-                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
-                        Issue
-                      </span>
-                    </div>
-
-                    {spreadsheetIssues.map((issue: IIssue, index) => (
-                      <SpreadsheetIssuesColumn
-                        key={`${issue.id}_${index}`}
-                        issue={issue}
-                        projectId={issue.project_detail.id}
-                        expandedIssues={expandedIssues}
-                        setExpandedIssues={setExpandedIssues}
-                        setCurrentProjectId={setCurrentProjectId}
-                        properties={currentViewProperties}
-                        handleIssueAction={handleIssueAction}
-                        disableUserActions={disableUserActions}
-                        userAuth={userAuth}
-                      />
-                    ))}
-                  </div>
-                </div>
-                {currentViewProperties.state &&
-                  renderColumn(
-                    "State",
-                    "state",
-                    SpreadsheetStateColumn,
-                    "state__name",
-                    "-state__name"
-                  )}
-
-                {currentViewProperties.priority &&
-                  renderColumn(
-                    "Priority",
-                    "priority",
-                    SpreadsheetPriorityColumn,
-                    "priority",
-                    "-priority"
-                  )}
-                {currentViewProperties.assignee &&
-                  renderColumn(
-                    "Assignees",
-                    "assignee",
-                    SpreadsheetAssigneeColumn,
-                    "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"
-                  )}
-              </>
-            ) : (
-              <div className="flex flex-col justify-center items-center h-full w-full">
-                <Spinner />
-              </div>
-            )}
-          </div>
-
-          <div className="border-t border-custom-border-100">
-            <div className="mb-3 z-50 sticky bottom-0 left-0">
-              <ListInlineCreateIssueForm
-                isOpen={isInlineCreateIssueFormOpen}
-                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              />
-            </div>
-
-            {type === "issue"
-              ? !disableUserActions &&
-                !isInlineCreateIssueFormOpen && (
-                  <button
-                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
-                    onClick={() => setIsInlineCreateIssueFormOpen(true)}
-                  >
-                    <PlusIcon className="h-4 w-4" />
-                    New Issue
-                  </button>
-                )
-              : !disableUserActions &&
-                !isInlineCreateIssueFormOpen && (
-                  <CustomMenu
-                    className="sticky left-0 z-10"
-                    customButton={
-                      <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
-                      </button>
-                    }
-                    position="left"
-                    verticalPosition="top"
-                    optionsClassName="left-5 !w-36"
-                    noBorder
-                  >
-                    <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
-                      Create new
-                    </CustomMenu.MenuItem>
-                    {openIssuesListModal && (
-                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
-                    )}
-                  </CustomMenu>
-                )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/start-date-column/index.ts b/web/components/core/views/spreadsheet-view/start-date-column/index.ts
deleted file mode 100644
index 94f229498..000000000
--- a/web/components/core/views/spreadsheet-view/start-date-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-start-date-column";
-export * from "./start-date-column";
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
deleted file mode 100644
index 064506ca2..000000000
--- a/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { StartDateColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetStartDateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <StartDateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetStartDateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index 6774ce1b9..000000000
--- a/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-// components
-import { ViewStartDateSelect } from "components/issues";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | 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>
-);
diff --git a/web/components/core/views/spreadsheet-view/state-column/index.ts b/web/components/core/views/spreadsheet-view/state-column/index.ts
deleted file mode 100644
index f3cbef871..000000000
--- a/web/components/core/views/spreadsheet-view/state-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-state-column";
-export * from "./state-column";
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
deleted file mode 100644
index 606f3e28a..000000000
--- a/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { StateColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetStateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <StateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetStateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index 04c833b1d..000000000
--- a/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// components
-import { StateSelect } from "components/states";
-// services
-import trackEventServices from "services/track-event.service";
-// types
-import { ICurrentUserResponse, IIssue, IState, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const StateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
-
-  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
-      );
-    }
-  };
-
-  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.state && (
-          <StateSelect
-            value={issue.state_detail}
-            projectId={projectId}
-            onChange={handleStateChange}
-            buttonClassName="!shadow-none !border-0"
-            hideDropdownArrow
-            disabled={isNotAllowed}
-          />
-        )}
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/updated-on-column/index.ts b/web/components/core/views/spreadsheet-view/updated-on-column/index.ts
deleted file mode 100644
index af1337a7f..000000000
--- a/web/components/core/views/spreadsheet-view/updated-on-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-updated-on-column";
-export * from "./updated-on-column";
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
deleted file mode 100644
index bb29e460d..000000000
--- a/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { UpdatedOnColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetUpdatedOnColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <UpdatedOnColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetUpdatedOnColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};
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
deleted file mode 100644
index 087d589fc..000000000
--- a/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-
-// types
-import { ICurrentUserResponse, 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 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>
-);
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index 7816f0edb..ea7ffa748 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -1,49 +1,37 @@
-import React from "react";
-
+import { MouseEvent } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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 {
+  AvatarGroup,
+  Loader,
+  Tooltip,
+  LinearProgressIndicator,
+  ContrastIcon,
+  RunningIcon,
+  LayersIcon,
+  StateGroupIcon,
+  PriorityIcon,
+  Avatar,
+} from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";
-
-// icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { PriorityIcon } from "components/icons/priority-icon";
-import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-  LayerDiagonalIcon,
-  StateGroupIcon,
-} from "components/icons";
-import { StarIcon } from "@heroicons/react/24/outline";
-// components
 import { ViewIssueLabel } from "components/issues";
+// icons
+import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
 // 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";
-// fetch-keys
-import { CURRENT_CYCLE_LIST, CYCLES_LIST, CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+import { ICycle } from "types";
 
 const stateGroups = [
   {
@@ -73,37 +61,40 @@ const stateGroups = [
   },
 ];
 
-export const ActiveCycleDetails: React.FC = () => {
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+
+  const { workspaceSlug, projectId } = props;
+
+  const { cycle: cycleStore, commandPalette: commandPaletteStore } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
-  const { data: currentCycle } = useSWR(
-    workspaceSlug && projectId ? CURRENT_CYCLE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
-      : null
+  useSWR(
+    workspaceSlug && projectId ? `ACTIVE_CYCLE_ISSUE_${projectId}_CURRENT` : null,
+    workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "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
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            cycle.id,
-            { priority: "urgent,high" }
-          )
-      : null
-  ) as { data: IIssue[] | undefined };
+  const activeCycle = cycleStore.cycles?.[projectId]?.active || null;
+  const cycle = activeCycle ? activeCycle[0] : null;
+  const issues = (cycleStore?.active_cycle_issues as any) || null;
 
-  if (!currentCycle)
+  // const { data: issues } = useSWR(
+  //   workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
+  //   workspaceSlug && projectId && cycle?.id
+  //     ? () =>
+  //         cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
+  //           priority: "urgent,high",
+  //         })
+  //     : null
+  // ) as { data: IIssue[] | undefined };
+
+  if (!cycle)
     return (
       <Loader>
         <Loader.Item height="250px" />
@@ -115,20 +106,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))"
@@ -139,12 +118,7 @@ export const ActiveCycleDetails: React.FC = () => {
           <button
             type="button"
             className="text-custom-primary-100 text-sm outline-none"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "q",
-              });
-              document.dispatchEvent(e);
-            }}
+            onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
           >
             Create a new cycle
           </button>
@@ -165,83 +139,36 @@ export const ActiveCycleDetails: React.FC = () => {
 
   const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
 
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug || !projectId || !cycle) return;
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
 
-    mutate<ICycle[]>(
-      CURRENT_CYCLE_LIST(projectId as string),
-      (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.",
-        });
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
       });
+    });
   };
 
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !projectId || !cycle) return;
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
 
-    mutate<ICycle[]>(
-      CURRENT_CYCLE_LIST(projectId as string),
-      (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.",
-        });
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to 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 +197,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">
@@ -292,26 +217,24 @@ export const ActiveCycleDetails: React.FC = () => {
                   >
                     {cycleStatus === "current" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
+                        <RunningIcon 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" />
+                        <AlarmClock 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 ${
+                            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" />
+                              <AlertTriangle className="h-3.5 w-3.5" />
                             </span>
                           </Tooltip>
                         )}{" "}
@@ -324,20 +247,18 @@ export const ActiveCycleDetails: React.FC = () => {
                   {cycle.is_favorite ? (
                     <button
                       onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
+                        handleRemoveFromFavorites(e);
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
                       onClick={(e) => {
-                        e.preventDefault();
-                        handleAddToFavorites();
+                        handleAddToFavorites(e);
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </span>
@@ -345,12 +266,12 @@ export const ActiveCycleDetails: React.FC = () => {
 
               <div className="flex items-center justify-start gap-5 text-custom-text-200">
                 <div className="flex items-start gap-1">
-                  <CalendarDaysIcon className="h-4 w-4" />
+                  <CalendarDays className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(startDate)}</span>
                 </div>
-                <ArrowRightIcon className="h-4 w-4 text-custom-text-200" />
+                <ArrowRight className="h-4 w-4 text-custom-text-200" />
                 <div className="flex items-start gap-1">
-                  <TargetIcon className="h-4 w-4" />
+                  <Target className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(endDate)}</span>
                 </div>
               </div>
@@ -375,14 +296,18 @@ export const ActiveCycleDetails: React.FC = () => {
 
                 {cycle.assignees.length > 0 && (
                   <div className="flex items-center gap-1 text-custom-text-200">
-                    <AssigneesList users={cycle.assignees} length={4} />
+                    <AvatarGroup>
+                      {cycle.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
                   </div>
                 )}
               </div>
 
               <div className="flex items-center gap-4 text-custom-text-200">
                 <div className="flex gap-2">
-                  <LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" />
+                  <LayersIcon className="h-4 w-4 flex-shrink-0" />
                   {cycle.total_issues} issues
                 </div>
                 <div className="flex items-center gap-2">
@@ -440,12 +365,10 @@ export const ActiveCycleDetails: React.FC = () => {
             <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
               {issues ? (
                 issues.length > 0 ? (
-                  issues.map((issue) => (
+                  issues.map((issue: any) => (
                     <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 +382,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 +398,13 @@ 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}
-                              />
+                              <AvatarGroup showTooltip={false}>
+                                {issue.assignee_details.map((assignee: any) => (
+                                  <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                                ))}
+                              </AvatarGroup>
                             </div>
                           ) : (
                             ""
@@ -522,8 +437,7 @@ export const ActiveCycleDetails: React.FC = () => {
                     width:
                       issues &&
                       `${
-                        (issues.filter((issue) => issue?.state_detail?.group === "completed")
-                          ?.length /
+                        (issues.filter((issue: any) => issue?.state_detail?.group === "completed")?.length /
                           issues.length) *
                           100 ?? 0
                       }%`,
@@ -531,8 +445,7 @@ export const ActiveCycleDetails: React.FC = () => {
                 />
               </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: any) => issue?.state_detail?.group === "completed")?.length} of {issues?.length}
               </div>
             </div>
           )}
@@ -551,17 +464,14 @@ export const ActiveCycleDetails: React.FC = () => {
             </div>
             <div className="flex items-center gap-1">
               <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)}
+                <LayersIcon 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>
             </div>
           </div>
           <div className="relative h-64">
             <ProgressChart
-              distribution={cycle.distribution.completion_chart}
+              distribution={cycle.distribution?.completion_chart ?? {}}
               startDate={cycle.start_date ?? ""}
               endDate={cycle.end_date ?? ""}
               totalIssues={cycle.total_issues}
@@ -571,4 +481,4 @@ export const ActiveCycleDetails: React.FC = () => {
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/cycles/active-cycle-stats.tsx b/web/components/cycles/active-cycle-stats.tsx
index e26b44803..1367d74e0 100644
--- a/web/components/cycles/active-cycle-stats.tsx
+++ b/web/components/cycles/active-cycle-stats.tsx
@@ -1,16 +1,14 @@
 import React, { Fragment } from "react";
-
-// headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar } from "@plane/ui";
 // types
 import { ICycle } from "types";
-// types
+
 type Props = {
   cycle: ICycle;
 };
@@ -69,28 +67,18 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           Labels
         </Tab>
       </Tab.List>
-      {cycle.total_issues > 0 ? (
+      {cycle && cycle.total_issues > 0 ? (
         <Tab.Panels as={Fragment}>
-          <Tab.Panel
-            as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
-          >
-            {cycle.distribution.assignees.map((assignee, index) => {
+          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
+            {cycle.distribution?.assignees?.map((assignee, index) => {
               if (assignee.assignee_id)
                 return (
                   <SingleProgressStats
                     key={assignee.assignee_id}
                     title={
                       <div className="flex items-center gap-2">
-                        <Avatar
-                          user={{
-                            id: assignee.assignee_id,
-                            avatar: assignee.avatar ?? "",
-                            first_name: assignee.first_name ?? "",
-                            last_name: assignee.last_name ?? "",
-                            display_name: assignee.display_name ?? "",
-                          }}
-                        />
+                        <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+
                         <span>{assignee.display_name}</span>
                       </div>
                     }
@@ -105,13 +93,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     title={
                       <div className="flex items-center gap-2">
                         <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                          <img
-                            src="/user.png"
-                            height="100%"
-                            width="100%"
-                            className="rounded-full"
-                            alt="User"
-                          />
+                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>
                       </div>
@@ -122,11 +104,8 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                 );
             })}
           </Tab.Panel>
-          <Tab.Panel
-            as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
-          >
-            {cycle.distribution.labels.map((label, index) => (
+          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
+            {cycle.distribution?.labels?.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}
                 title={
diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx
new file mode 100644
index 000000000..f1e0cf084
--- /dev/null
+++ b/web/components/cycles/cycle-peek-overview.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CycleDetailsSidebar } from "./sidebar";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+  const router = useRouter();
+  const { peekCycle } = router.query;
+
+  const ref = React.useRef(null);
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const { fetchCycleWithId } = cycleStore;
+
+  const handleClose = () => {
+    delete router.query.peekCycle;
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query },
+    });
+  };
+
+  useEffect(() => {
+    if (!peekCycle) return;
+    fetchCycleWithId(workspaceSlug, projectId, peekCycle.toString());
+  }, [fetchCycleWithId, peekCycle, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekCycle && (
+        <div
+          ref={ref}
+          className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+          style={{
+            boxShadow:
+              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+          }}
+        >
+          <CycleDetailsSidebar cycleId={peekCycle?.toString() ?? ""} handleClose={handleClose} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
new file mode 100644
index 000000000..7de04172f
--- /dev/null
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -0,0 +1,274 @@
+import { FC, MouseEvent, useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+// ui
+import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
+// icons
+import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
+// helpers
+import {
+  getDateRangeStatus,
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
+
+export interface ICyclesBoardCard {
+  workspaceSlug: string;
+  projectId: string;
+  cycle: ICycle;
+}
+
+export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
+  const { cycle, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // computed
+  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 isDateValid = cycle.start_date || cycle.end_date;
+
+  const router = useRouter();
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const cycleTotalIssues =
+    cycle.backlog_issues +
+    cycle.unstarted_issues +
+    cycle.started_issues +
+    cycle.completed_issues +
+    cycle.cancelled_issues;
+
+  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
+
+  const issueCount = cycle
+    ? cycleTotalIssues === 0
+      ? "0 Issue"
+      : cycleTotalIssues === cycle.completed_issues
+      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+      : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
+    : "0 Issue";
+
+  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    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 handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).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).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setUpdateModal(true);
+  };
+
+  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
+    const { query } = router;
+    e.preventDefault();
+    e.stopPropagation();
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekCycle: cycle.id },
+    });
+  };
+
+  return (
+    <div>
+      <CycleCreateUpdateModal
+        data={cycle}
+        isOpen={updateModal}
+        handleClose={() => setUpdateModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+
+      <CycleDeleteModal
+        cycle={cycle}
+        isOpen={deleteModal}
+        handleClose={() => setDeleteModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+        <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-3 truncate">
+              <span className="flex-shrink-0">
+                <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+              </span>
+              <Tooltip tooltipContent={cycle.name} position="top">
+                <span className="text-base font-medium truncate">{cycle.name}</span>
+              </Tooltip>
+            </div>
+            <div className="flex items-center gap-2">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
+                </span>
+              )}
+              <button onClick={openCycleOverview}>
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount}</span>
+              </div>
+              {cycle.assignees.length > 0 && (
+                <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
+                  <div className="flex items-center gap-1 cursor-default">
+                    <AvatarGroup showTooltip={false}>
+                      {cycle.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+
+            <Tooltip
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex items-center w-full">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between">
+              {isDateValid ? (
+                <span className="text-xs text-custom-text-300">
+                  {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                  {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                </span>
+              ) : (
+                <span className="text-xs text-custom-text-400">No due date</span>
+              )}
+              <div className="flex items-center gap-1.5 z-10">
+                {cycle.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  </button>
+                )}
+                <CustomMenu width="auto" ellipsis className="z-10">
+                  {!isCompleted && (
+                    <>
+                      <CustomMenu.MenuItem onClick={handleEditCycle}>
+                        <span className="flex items-center justify-start gap-2">
+                          <Pencil className="h-3 w-3" />
+                          <span>Edit cycle</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                        <span className="flex items-center justify-start gap-2">
+                          <Trash2 className="h-3 w-3" />
+                          <span>Delete module</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3 w-3" />
+                      <span>Copy cycle link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+};
diff --git a/web/components/cycles/cycles-board.tsx b/web/components/cycles/cycles-board.tsx
new file mode 100644
index 000000000..85033ff5f
--- /dev/null
+++ b/web/components/cycles/cycles-board.tsx
@@ -0,0 +1,70 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
+// types
+import { ICycle } from "types";
+
+export interface ICyclesBoard {
+  cycles: ICycle[];
+  filter: string;
+  workspaceSlug: string;
+  projectId: string;
+  peekCycle: string | undefined;
+}
+
+export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
+  const { cycles, filter, workspaceSlug, projectId, peekCycle } = props;
+
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
+  return (
+    <>
+      {cycles.length > 0 ? (
+        <div className="h-full w-full">
+          <div className="flex justify-between h-full w-full">
+            <div
+              className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
+                peekCycle
+                  ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                  : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+              } auto-rows-max transition-all `}
+            >
+              {cycles.map((cycle) => (
+                <CyclesBoardCard key={cycle.id} workspaceSlug={workspaceSlug} projectId={projectId} cycle={cycle} />
+              ))}
+            </div>
+            <CyclePeekOverview
+              projectId={projectId?.toString() ?? ""}
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+            />
+          </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={() => commandPaletteStore.toggleCreateCycleModal(true)}
+            >
+              Create a new cycle
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
new file mode 100644
index 000000000..f93e428e7
--- /dev/null
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -0,0 +1,263 @@
+import { FC, MouseEvent, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// stores
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+// ui
+import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar } from "@plane/ui";
+// icons
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
+// helpers
+import {
+  getDateRangeStatus,
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
+
+type TCyclesListItem = {
+  cycle: ICycle;
+  handleEditCycle?: () => void;
+  handleDeleteCycle?: () => void;
+  handleAddToFavorites?: () => void;
+  handleRemoveFromFavorites?: () => void;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const CyclesListItem: FC<TCyclesListItem> = (props) => {
+  const { cycle, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // computed
+  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 router = useRouter();
+
+  const cycleTotalIssues =
+    cycle.backlog_issues +
+    cycle.unstarted_issues +
+    cycle.started_issues +
+    cycle.completed_issues +
+    cycle.cancelled_issues;
+
+  const renderDate = cycle.start_date || cycle.end_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    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 handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).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).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setUpdateModal(true);
+  };
+
+  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
+    const { query } = router;
+    e.preventDefault();
+    e.stopPropagation();
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekCycle: cycle.id },
+    });
+  };
+
+  return (
+    <>
+      <CycleCreateUpdateModal
+        data={cycle}
+        isOpen={updateModal}
+        handleClose={() => setUpdateModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+      <CycleDeleteModal
+        cycle={cycle}
+        isOpen={deleteModal}
+        handleClose={() => setDeleteModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+        <a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+          <div className="flex items-center gap-3 w-full truncate">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {isCompleted ? (
+                    progress === 100 ? (
+                      <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                    ) : (
+                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    )
+                  ) : (
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                  )}
+                </CircularProgressIndicator>
+              </span>
+
+              <div className="flex items-center gap-2.5">
+                <span className="flex-shrink-0">
+                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+                </span>
+                <Tooltip tooltipContent={cycle.name} position="top">
+                  <span className="text-base font-medium truncate">{cycle.name}</span>
+                </Tooltip>
+              </div>
+            </div>
+            <button onClick={openCycleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
+            <div className="flex items-center justify-center">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
+                </span>
+              )}
+            </div>
+
+            {renderDate && (
+              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                {" - "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            )}
+
+            <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
+              <div className="flex items-center justify-center gap-1 cursor-default w-16">
+                {cycle.assignees.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {cycle.assignees.map((assignee) => (
+                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                    ))}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {cycle.is_favorite ? (
+              <button type="button" onClick={handleRemoveFromFavorites}>
+                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+              </button>
+            ) : (
+              <button type="button" onClick={handleAddToFavorites}>
+                <Star className="h-3.5 w-3.5 text-custom-text-200" />
+              </button>
+            )}
+
+            <CustomMenu width="auto" ellipsis>
+              {!isCompleted && (
+                <>
+                  <CustomMenu.MenuItem onClick={handleEditCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Edit cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </>
+              )}
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <span className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-3 w-3" />
+                  <span>Copy cycle link</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+};
diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx
new file mode 100644
index 000000000..0cff682af
--- /dev/null
+++ b/web/components/cycles/cycles-list.tsx
@@ -0,0 +1,77 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CyclePeekOverview, CyclesListItem } from "components/cycles";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { ICycle } from "types";
+
+export interface ICyclesList {
+  cycles: ICycle[];
+  filter: string;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CyclesList: FC<ICyclesList> = observer((props) => {
+  const { cycles, filter, workspaceSlug, projectId } = props;
+
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
+  return (
+    <>
+      {cycles ? (
+        <>
+          {cycles.length > 0 ? (
+            <div className="h-full overflow-y-auto">
+              <div className="flex justify-between h-full w-full">
+                <div className="flex flex-col h-full w-full overflow-y-auto">
+                  {cycles.map((cycle) => (
+                    <CyclesListItem cycle={cycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+                  ))}
+                </div>
+                <CyclePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </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={() => commandPaletteStore.toggleCreateCycleModal(true)}
+                >
+                  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>
+      )}
+    </>
+  );
+});
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.tsx b/web/components/cycles/cycles-view.tsx
index f6d0ab512..a4522f711 100644
--- a/web/components/cycles/cycles-view.tsx
+++ b/web/components/cycles/cycles-view.tsx
@@ -1,271 +1,93 @@
-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";
+import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles";
+// ui components
+import { Loader } from "@plane/ui";
 // 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 { TCycleLayout } from "types";
 
-type Props = {
-  cycles: ICycle[] | undefined;
-  mutateCycles: KeyedMutator<ICycle[]>;
-  viewType: string | null;
-};
+export interface ICyclesView {
+  filter: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete";
+  layout: TCycleLayout;
+  workspaceSlug: string;
+  projectId: string;
+  peekCycle: string | undefined;
+}
 
-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, layout, workspaceSlug, projectId, peekCycle } = props;
 
-  const [deleteCycleModal, setDeleteCycleModal] = useState(false);
-  const [selectedCycleToDelete, setSelectedCycleToDelete] = useState<ICycle | null>(null);
+  // store
+  const { cycle: cycleStore } = useMobxStore();
 
-  const { storedValue: cycleTab } = useLocalStorage("cycleTab", "All");
+  // api call to fetch cycles list
+  useSWR(
+    workspaceSlug && projectId && filter ? `CYCLES_LIST_${projectId}_${filter}` : null,
+    workspaceSlug && projectId && filter ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
+  );
 
-  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 =
+    filter === "completed"
+      ? cycleStore.projectCompletedCycles
+      : filter === "draft"
+      ? cycleStore.projectDraftCycles
+      : filter === "upcoming"
+      ? cycleStore.projectUpcomingCycles
+      : cycleStore.projectCycles;
 
   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>
+      {layout === "list" && (
+        <>
+          {cyclesList ? (
+            <CyclesList cycles={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
           ) : (
-            <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 p-8">
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+            </Loader>
+          )}
+        </>
+      )}
+
+      {layout === "board" && (
+        <>
+          {cyclesList ? (
+            <CyclesBoard
+              cycles={cyclesList}
+              filter={filter}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              peekCycle={peekCycle}
+            />
+          ) : (
+            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3 p-8">
+              <Loader.Item height="200px" />
+              <Loader.Item height="200px" />
+              <Loader.Item height="200px" />
+            </Loader>
+          )}
+        </>
+      )}
+
+      {layout === "gantt" && (
+        <>
+          {cyclesList ? (
+            <CyclesListGanttChartView cycles={cyclesList} workspaceSlug={workspaceSlug} />
+          ) : (
+            <Loader className="space-y-4">
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+            </Loader>
+          )}
+        </>
       )}
     </>
   );
-};
+});
diff --git a/web/components/cycles/delete-cycle-modal.tsx b/web/components/cycles/delete-cycle-modal.tsx
deleted file mode 100644
index 35b8e118e..000000000
--- a/web/components/cycles/delete-cycle-modal.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState } from "react";
-// next
-import { useRouter } from "next/router";
-// swr
-import { mutate } from "swr";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import cycleService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, ICycle, IProject } from "types";
-type TConfirmCycleDeletionProps = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: ICycle | null;
-  user: ICurrentUserResponse | undefined;
-};
-// fetch-keys
-import {
-  COMPLETED_CYCLES_LIST,
-  CURRENT_CYCLE_LIST,
-  CYCLES_LIST,
-  DRAFT_CYCLES_LIST,
-  PROJECT_DETAILS,
-  UPCOMING_CYCLES_LIST,
-} from "constants/fetch-keys";
-import { getDateRangeStatus } from "helpers/date-time.helper";
-
-export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
-  isOpen,
-  setIsOpen,
-  data,
-  user,
-}) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    if (!data || !workspaceSlug || !projectId) return;
-
-    setIsDeleteLoading(true);
-
-    await cycleService
-      .deleteCycle(workspaceSlug as string, data.project, data.id, user)
-      .then(() => {
-        const cycleType = getDateRangeStatus(data.start_date, data.end_date);
-        const fetchKey =
-          cycleType === "current"
-            ? CURRENT_CYCLE_LIST(projectId as string)
-            : cycleType === "upcoming"
-            ? UPCOMING_CYCLES_LIST(projectId as string)
-            : cycleType === "completed"
-            ? COMPLETED_CYCLES_LIST(projectId as string)
-            : DRAFT_CYCLES_LIST(projectId as string);
-
-        mutate<ICycle[]>(
-          fetchKey,
-          (prevData) => {
-            if (!prevData) return;
-
-            return prevData.filter((cycle) => cycle.id !== data?.id);
-          },
-          false
-        );
-
-        mutate(
-          CYCLES_LIST(projectId as string),
-          (prevData: any) => {
-            if (!prevData) return;
-            return prevData.filter((cycle: any) => cycle.id !== data?.id);
-          },
-          false
-        );
-
-        // update total cycles count in the project details
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              total_cycles: prevData.total_cycles - 1,
-            };
-          },
-          false
-        );
-
-        handleClose();
-
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Cycle deleted successfully",
-        });
-      })
-      .catch(() => {
-        setIsDeleteLoading(false);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete 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.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
new file mode 100644
index 000000000..f5024b3a2
--- /dev/null
+++ b/web/components/cycles/delete-modal.tsx
@@ -0,0 +1,122 @@
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import { AlertTriangle } from "lucide-react";
+// components
+import { Button } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { ICycle } from "types";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+interface ICycleDelete {
+  cycle: ICycle;
+  isOpen: boolean;
+  handleClose: () => void;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
+  const { isOpen, handleClose, cycle, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [loader, setLoader] = useState(false);
+
+  const formSubmit = async () => {
+    setLoader(true);
+    if (cycle?.id)
+      try {
+        await cycleStore.removeCycle(workspaceSlug, projectId, cycle?.id);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle deleted successfully.",
+        });
+        handleClose();
+      } catch (error) {
+        setToastAlert({
+          type: "error",
+          title: "Warning!",
+          message: "Something went wrong please try again later.",
+        });
+      }
+    else
+      setToastAlert({
+        type: "error",
+        title: "Warning!",
+        message: "Something went wrong please try again later.",
+      });
+
+    setLoader(false);
+  };
+
+  return (
+    <div>
+      <div>
+        <Transition.Root show={isOpen} as={Fragment}>
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+            <Transition.Child
+              as={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 transition-opacity" />
+            </Transition.Child>
+
+            <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={Fragment}
+                  enter="ease-out duration-300"
+                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                  enterTo="opacity-100 translate-y-0 sm:scale-100"
+                  leave="ease-in duration-200"
+                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                >
+                  <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                    <div className="flex flex-col gap-6 p-6">
+                      <div className="flex w-full items-center justify-start gap-4">
+                        <div className="flex-shrink-0 flex justify-center items-center rounded-full bg-red-500/20 w-12 h-12">
+                          <AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
+                        </div>
+                        <div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
+                      </div>
+                      <span>
+                        <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">{cycle?.name}</span>
+                          {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be
+                          undone.
+                        </p>
+                      </span>
+                      <div className="flex justify-end gap-2">
+                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                          Cancel
+                        </Button>
+
+                        <Button variant="danger" size="sm" tabIndex={1} onClick={formSubmit}>
+                          {loader ? "Deleting..." : "Delete Cycle"}
+                        </Button>
+                      </div>
+                    </div>
+                  </Dialog.Panel>
+                </Transition.Child>
+              </div>
+            </div>
+          </Dialog>
+        </Transition.Root>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 4643a58bc..492337c4a 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -1,50 +1,37 @@
-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";
+import { IssueProjectSelect } from "components/issues/select";
 // types
 import { ICycle } from "types";
 
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
   handleClose: () => void;
-  status: boolean;
+  projectId: string;
+  setActiveProject: (projectId: string) => void;
   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, projectId, setActiveProject, data } = props;
+  // form data
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
-    reset,
     watch,
   } = useForm<ICycle>({
-    defaultValues,
+    defaultValues: {
+      project: projectId,
+      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,86 +42,112 @@ 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>
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
+        </div>
         <div className="space-y-3">
-          <div>
-            <Input
-              autoComplete="off"
-              id="name"
-              name="name"
-              type="name"
-              className="resize-none text-xl"
-              placeholder="Title"
-              error={errors.name}
-              register={register}
-              validations={{
-                required: "Name is required",
-                maxLength: {
-                  value: 255,
-                  message: "Name should be less than 255 characters",
-                },
-              }}
-            />
-          </div>
-          <div>
-            <TextArea
-              id="description"
-              name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
-            />
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="mt-2 space-y-3">
             <div>
               <Controller
+                name="name"
                 control={control}
-                name="start_date"
+                rules={{
+                  required: "Name is required",
+                  maxLength: {
+                    value: 255,
+                    message: "Name should be less than 255 characters",
+                  },
+                }}
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect
-                    label="Start date"
+                  <Input
+                    id="cycle_name"
+                    name="name"
+                    type="text"
+                    placeholder="Cycle Title"
+                    className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
                     value={value}
-                    onChange={(val) => onChange(val)}
-                    minDate={new Date()}
-                    maxDate={maxDate ?? undefined}
+                    inputSize="md"
+                    onChange={onChange}
+                    hasError={Boolean(errors?.name)}
                   />
                 )}
               />
             </div>
             <div>
               <Controller
+                name="description"
                 control={control}
-                name="end_date"
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect
-                    label="End date"
+                  <TextArea
+                    id="cycle_description"
+                    name="description"
+                    placeholder="Description..."
+                    className="h-24 w-full resize-none text-sm"
+                    hasError={Boolean(errors?.description)}
                     value={value}
-                    onChange={(val) => onChange(val)}
-                    minDate={minDate}
+                    onChange={onChange}
                   />
                 )}
               />
             </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <div>
+                <Controller
+                  control={control}
+                  name="start_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DateSelect
+                      label="Start date"
+                      value={value}
+                      onChange={(val) => onChange(val)}
+                      minDate={new Date()}
+                      maxDate={maxDate ?? undefined}
+                    />
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="end_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
+                  )}
+                />
+              </div>
+            </div>
           </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}>
-          {status
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-100 ">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" 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..99a1d25e5 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "components/ui";
-// icons
-import { ContrastIcon } from "components/icons";
+import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
 import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
 // types
@@ -44,9 +42,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..d5bd4e140 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -5,21 +5,25 @@ 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";
 // components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
 import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
 // types
 import { ICycle } from "types";
 
 type Props = {
+  workspaceSlug: string;
   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 +33,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,
@@ -84,8 +85,8 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         loaderTitle="Cycles"
         blocks={cycles ? blockFormat(cycles) : null}
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
-        SidebarBlockRender={CycleGanttSidebarBlock}
-        BlockRender={CycleGanttBlock}
+        sidebarToRender={(props) => <CycleGanttSidebar {...props} />}
+        blockToRender={(data: ICycle) => <CycleGanttBlock data={data} />}
         enableBlockLeftResize={false}
         enableBlockRightResize={false}
         enableBlockMove={false}
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..db5e9de9e 100644
--- a/web/components/cycles/index.ts
+++ b/web/components/cycles/index.ts
@@ -1,14 +1,17 @@
-export * from "./cycles-list";
+export * from "./cycles-view";
 export * from "./active-cycle-details";
 export * from "./active-cycle-stats";
 export * from "./gantt-chart";
 export * from "./cycles-view";
-export * from "./delete-cycle-modal";
 export * from "./form";
 export * from "./modal";
-export * from "./select";
 export * from "./sidebar";
-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 "./delete-modal";
+export * from "./cycle-peek-overview";
+export * from "./cycles-list-item";
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index 703636256..d63201236 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -1,86 +1,39 @@
-import { Fragment } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
+import React, { useState } from "react";
 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";
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CycleForm } from "components/cycles";
-// helper
-import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
-import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IProject } from "types";
-// fetch keys
-import {
-  COMPLETED_CYCLES_LIST,
-  CURRENT_CYCLE_LIST,
-  CYCLES_LIST,
-  DRAFT_CYCLES_LIST,
-  INCOMPLETE_CYCLES_LIST,
-  PROJECT_DETAILS,
-  UPCOMING_CYCLES_LIST,
-} from "constants/fetch-keys";
+import type { CycleDateCheckData, ICycle } from "types";
 
 type CycleModalProps = {
   isOpen: boolean;
   handleClose: () => void;
   data?: ICycle | null;
-  user: ICurrentUserResponse | undefined;
+  workspaceSlug: string;
+  projectId: string;
 };
 
-export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
-  isOpen,
-  handleClose,
-  data,
-  user,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+// services
+const cycleService = new CycleService();
 
+export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
+  const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // states
+  const [activeProject, setActiveProject] = useState<string>(projectId);
+  // toast
   const { setToastAlert } = useToast();
 
-  const createCycle = async (payload: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    await cycleService
-      .createCycle(workspaceSlug.toString(), projectId.toString(), payload, user)
-      .then((res) => {
-        switch (getDateRangeStatus(res.start_date, res.end_date)) {
-          case "completed":
-            mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
-            break;
-          case "current":
-            mutate(CURRENT_CYCLE_LIST(projectId.toString()));
-            break;
-          case "upcoming":
-            mutate(UPCOMING_CYCLES_LIST(projectId.toString()));
-            break;
-          default:
-            mutate(DRAFT_CYCLES_LIST(projectId.toString()));
-        }
-        mutate(INCOMPLETE_CYCLES_LIST(projectId.toString()));
-        mutate(CYCLES_LIST(projectId.toString()));
-
-        // update total cycles count in the project details
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              total_cycles: prevData.total_cycles + 1,
-            };
-          },
-          false
-        );
-
+  const createCycle = async (payload: Partial<ICycle>) =>
+    cycleStore
+      .createCycle(workspaceSlug, projectId, payload)
+      .then(() => {
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -94,70 +47,31 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           message: "Error in creating cycle. Please try again.",
         });
       });
-  };
-
-  const updateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    await cycleService
-      .updateCycle(workspaceSlug.toString(), projectId.toString(), cycleId, payload, user)
-      .then((res) => {
-        switch (getDateRangeStatus(data?.start_date, data?.end_date)) {
-          case "completed":
-            mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
-            break;
-          case "current":
-            mutate(CURRENT_CYCLE_LIST(projectId.toString()));
-            break;
-          case "upcoming":
-            mutate(UPCOMING_CYCLES_LIST(projectId.toString()));
-            break;
-          default:
-            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)
-        ) {
-          switch (getDateRangeStatus(res.start_date, res.end_date)) {
-            case "completed":
-              mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
-              break;
-            case "current":
-              mutate(CURRENT_CYCLE_LIST(projectId.toString()));
-              break;
-            case "upcoming":
-              mutate(UPCOMING_CYCLES_LIST(projectId.toString()));
-              break;
-            default:
-              mutate(DRAFT_CYCLES_LIST(projectId.toString()));
-          }
-        }
 
+  const updateCycle = async (cycleId: string, payload: Partial<ICycle>) =>
+    cycleStore
+      .patchCycle(workspaceSlug, projectId, cycleId, payload)
+      .then(() => {
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "Cycle updated successfully.",
         });
       })
-      .catch((err) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Error in updating cycle. Please try again.",
         });
       });
-  };
 
   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;
   };
@@ -188,22 +102,20 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
     if (isDateValid) {
       if (data) await updateCycle(data.id, payload);
       else await createCycle(payload);
-
       handleClose();
     } else
       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.",
       });
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={Fragment}
+          as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -211,12 +123,13 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
-        <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">
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
-              as={Fragment}
+              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"
@@ -224,11 +137,12 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               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-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
-                  status={data ? true : false}
+                  projectId={activeProject}
+                  setActiveProject={setActiveProject}
                   data={data}
                 />
               </Dialog.Panel>
diff --git a/web/components/cycles/select.tsx b/web/components/cycles/select.tsx
deleted file mode 100644
index 9241c8a4d..000000000
--- a/web/components/cycles/select.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-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";
-// components
-import { CreateUpdateCycleModal } from "components/cycles";
-// fetch-keys
-import { CYCLES_LIST } from "constants/fetch-keys";
-
-export type IssueCycleSelectProps = {
-  projectId: string;
-  value: any;
-  onChange: (value: any) => void;
-  multiple?: boolean;
-};
-
-export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
-  projectId,
-  value,
-  onChange,
-  multiple = false,
-}) => {
-  // states
-  const [isCycleModalActive, setCycleModalActive] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: cycles } = useSWR(
-    workspaceSlug && projectId ? CYCLES_LIST(projectId) : null,
-    workspaceSlug && projectId
-      ? () => cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
-      : null
-  );
-
-  const options = cycles?.map((cycle) => ({ value: cycle.id, display: cycle.name }));
-
-  const openCycleModal = () => {
-    setCycleModalActive(true);
-  };
-
-  const closeCycleModal = () => {
-    setCycleModalActive(false);
-  };
-
-  return (
-    <>
-      <CreateUpdateCycleModal
-        isOpen={isCycleModalActive}
-        handleClose={closeCycleModal}
-        user={user}
-      />
-      <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
-        {({ open }) => (
-          <>
-            <Listbox.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-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
-            >
-              <CyclesIcon className="h-3 w-3 text-custom-text-200" />
-              <div className="flex items-center gap-2 truncate">
-                {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
-              </div>
-            </Listbox.Button>
-
-            <Transition
-              show={open}
-              as={React.Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options
-                className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-custom-background-80 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
-              >
-                <div className="py-1">
-                  {options ? (
-                    options.length > 0 ? (
-                      options.map((option) => (
-                        <Listbox.Option
-                          key={option.value}
-                          className={({ selected, active }) =>
-                            `${
-                              selected ||
-                              (Array.isArray(value)
-                                ? value.includes(option.value)
-                                : value === option.value)
-                                ? "bg-indigo-50 font-medium"
-                                : ""
-                            } ${
-                              active ? "bg-indigo-50" : ""
-                            } relative cursor-pointer select-none p-2 text-custom-text-100`
-                          }
-                          value={option.value}
-                        >
-                          <span className={` flex items-center gap-2 truncate`}>
-                            {option.display}
-                          </span>
-                        </Listbox.Option>
-                      ))
-                    ) : (
-                      <p className="text-center text-sm text-custom-text-200">No options</p>
-                    )
-                  ) : (
-                    <p className="text-center text-sm text-custom-text-200">Loading...</p>
-                  )}
-                  <button
-                    type="button"
-                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100"
-                    onClick={openCycleModal}
-                  >
-                    <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
-                    <span>Create cycle</span>
-                  </button>
-                </div>
-              </Listbox.Options>
-            </Transition>
-          </>
-        )}
-      </Listbox>
-    </>
-  );
-};
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index dafb1b6c2..3288dfe0b 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -1,66 +1,61 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm } from "react-hook-form";
-// headless ui
 import { Disclosure, Popover, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import cyclesService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
-import { DeleteCycleModal } from "components/cycles";
+import { CycleDeleteModal } from "components/cycles/delete-modal";
 // ui
-import { CustomMenu, CustomRangeDatePicker, Loader, ProgressBar } from "components/ui";
+import { CustomRangeDatePicker } from "components/ui";
+import { Avatar, CustomMenu, Loader, LayersIcon } from "@plane/ui";
 // icons
-import {
-  CalendarDaysIcon,
-  ChartPieIcon,
-  ArrowLongRightIcon,
-  TrashIcon,
-  UserCircleIcon,
-  ChevronDownIcon,
-  DocumentIcon,
-  LinkIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, MoveRight } from "lucide-react";
 // helpers
-import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
 import {
+  findHowManyDaysLeft,
+  getDateRangeStatus,
   isDateGreaterThanToday,
   renderDateFormat,
-  renderShortDateWithYearFormat,
+  renderShortDate,
+  renderShortMonthDate,
 } from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, ICycle } from "types";
+import { ICycle } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
+import { CYCLE_STATUS } from "constants/cycle";
 
 type Props = {
-  cycle: ICycle | undefined;
-  isOpen: boolean;
-  cycleStatus: string;
-  isCompleted: boolean;
-  user: ICurrentUserResponse | undefined;
+  cycleId: string;
+  handleClose: () => void;
 };
 
-export const CycleDetailsSidebar: React.FC<Props> = ({
-  cycle,
-  isOpen,
-  cycleStatus,
-  isCompleted,
-  user,
-}) => {
+// services
+const cycleService = new CycleService();
+
+// TODO: refactor the whole component
+export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { cycleId, handleClose } = props;
+
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query;
+  const { workspaceSlug, projectId, peekCycle } = router.query;
+
+  const { user: userStore, cycle: cycleDetailsStore } = useMobxStore();
+
+  const user = userStore.currentUser ?? undefined;
+  const cycleDetails = cycleDetailsStore.cycle_details[cycleId] ?? undefined;
 
   const { setToastAlert } = useToast();
 
@@ -76,23 +71,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 : "";
-
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`)
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`)
       .then(() => {
         setToastAlert({
           type: "success",
@@ -108,19 +96,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    if (cycle)
+    if (cycleDetails)
       reset({
-        ...cycle,
+        ...cycleDetails,
       });
-  }, [cycle, reset]);
+  }, [cycleDetails, reset]);
 
   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;
@@ -145,15 +129,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
         return;
       }
 
-      if (cycle?.start_date && cycle?.end_date) {
+      if (cycleDetails?.start_date && cycleDetails?.end_date) {
         const isDateValidForExistingCycle = await dateChecker({
           start_date: `${watch("start_date")}`,
           end_date: `${watch("end_date")}`,
-          cycle_id: cycle.id,
+          cycle_id: cycleDetails.id,
         });
 
         if (isDateValidForExistingCycle) {
-          await submitChanges({
+          submitChanges({
             start_date: renderDateFormat(`${watch("start_date")}`),
             end_date: renderDateFormat(`${watch("end_date")}`),
           });
@@ -219,15 +203,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
         return;
       }
 
-      if (cycle?.start_date && cycle?.end_date) {
+      if (cycleDetails?.start_date && cycleDetails?.end_date) {
         const isDateValidForExistingCycle = await dateChecker({
           start_date: `${watch("start_date")}`,
           end_date: `${watch("end_date")}`,
-          cycle_id: cycle.id,
+          cycle_id: cycleDetails.id,
         });
 
         if (isDateValidForExistingCycle) {
-          await submitChanges({
+          submitChanges({
             start_date: renderDateFormat(`${watch("start_date")}`),
             end_date: renderDateFormat(`${watch("end_date")}`),
           });
@@ -274,364 +258,298 @@ 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 cycleStatus =
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      : "draft";
+  const isCompleted = cycleStatus === "completed";
 
-  const progressPercentage = cycle
-    ? Math.round((cycle.completed_issues / cycle.total_issues) * 100)
+  const isStartValid = new Date(`${cycleDetails?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${cycleDetails?.end_date}`) >= new Date(`${cycleDetails?.start_date}`);
+
+  const progressPercentage = cycleDetails
+    ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
     : null;
 
+  if (!cycleDetails) return null;
+
+  const endDate = new Date(cycleDetails.end_date ?? "");
+  const startDate = new Date(cycleDetails.start_date ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const issueCount =
+    cycleDetails.total_issues === 0
+      ? "0 Issue"
+      : cycleDetails.total_issues === cycleDetails.completed_issues
+      ? cycleDetails.total_issues > 1
+        ? `${cycleDetails.total_issues}`
+        : `${cycleDetails.total_issues}`
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+
   return (
     <>
-      <DeleteCycleModal
-        isOpen={cycleDeleteModal}
-        setIsOpen={setCycleDeleteModal}
-        data={cycle}
-        user={user}
-      />
-      <div
-        className={`fixed top-[66px] ${
-          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`}
-      >
-        {cycle ? (
-          <>
-            <div className="flex flex-col items-start justify-center">
-              <div className="flex gap-2.5 px-5 text-sm">
-                <div className="flex items-center">
-                  <span className="flex items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
-                    {capitalizeFirstLetter(cycleStatus)}
-                  </span>
-                </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}
-                          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 ${
-                            cycle.start_date ? "" : "text-custom-text-200"
-                          }`}
-                        >
-                          <CalendarDaysIcon className="h-3 w-3" />
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(
-                                `${watch("start_date") ? watch("start_date") : cycle?.start_date}`
-                              ),
-                              "Start date"
-                            )}
-                          </span>
-                        </Popover.Button>
+      {cycleDetails && workspaceSlug && projectId && (
+        <CycleDeleteModal
+          cycle={cycleDetails}
+          isOpen={cycleDeleteModal}
+          handleClose={() => setCycleDeleteModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
 
-                        <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 -right-5 z-20  transform overflow-hidden">
-                            <CustomRangeDatePicker
-                              value={watch("start_date") ? watch("start_date") : cycle?.start_date}
-                              onChange={(val) => {
-                                if (val) {
-                                  handleStartDateChange(val);
-                                }
-                              }}
-                              startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                              endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                              maxDate={new Date(`${watch("end_date")}`)}
-                              selectsStart
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                  <span>
-                    <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}
-                          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 ${
-                            cycle.end_date ? "" : "text-custom-text-200"
-                          }`}
-                        >
-                          <CalendarDaysIcon className="h-3 w-3" />
+      {cycleDetails ? (
+        <>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              <button
+                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                onClick={() => handleClose()}
+              >
+                <ChevronRight className="h-3 w-3 text-white stroke-2" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3.5">
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+              {!isCompleted && (
+                <CustomMenu width="lg" placement="bottom-end" ellipsis>
+                  <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              )}
+            </div>
+          </div>
 
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(
-                                `${watch("end_date") ? watch("end_date") : cycle?.end_date}`
-                              ),
-                              "End date"
-                            )}
-                          </span>
-                        </Popover.Button>
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{cycleDetails.name}</h4>
+            <div className="flex items-center gap-5">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
+                </span>
+              )}
+              <div className="relative flex h-full w-52 items-center gap-2.5">
+                <Popover className="flex h-full items-center justify-center rounded-lg">
+                  <Popover.Button
+                    disabled={isCompleted ?? false}
+                    className="text-sm text-custom-text-300 font-medium cursor-default"
+                  >
+                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                  </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 -right-5 z-20 transform overflow-hidden">
-                            <CustomRangeDatePicker
-                              value={watch("end_date") ? watch("end_date") : cycle?.end_date}
-                              onChange={(val) => {
-                                if (val) {
-                                  handleEndDateChange(val);
-                                }
-                              }}
-                              startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                              endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                              minDate={new Date(`${watch("start_date")}`)}
-                              selectsEnd
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                </div>
-              </div>
+                  <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 -right-5 z-20  transform overflow-hidden">
+                      <CustomRangeDatePicker
+                        value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                        onChange={(val) => {
+                          if (val) {
+                            handleStartDateChange(val);
+                          }
+                        }}
+                        startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                        endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                        maxDate={new Date(`${watch("end_date")}`)}
+                        selectsStart
+                      />
+                    </Popover.Panel>
+                  </Transition>
+                </Popover>
+                <MoveRight className="h-4 w-4 text-custom-text-300" />
+                <Popover className="flex h-full items-center justify-center rounded-lg">
+                  <>
+                    <Popover.Button
+                      disabled={isCompleted ?? false}
+                      className="text-sm text-custom-text-300 font-medium cursor-default"
+                    >
+                      {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                    </Popover.Button>
 
-              <div className="flex w-full flex-col gap-6 px-6 py-6">
-                <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>
-                    </div>
-                    <CustomMenu width="lg" ellipsis>
-                      {!isCompleted && (
-                        <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
-                          <span className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
-                            <span>Delete</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 link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-
-                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
-                    {cycle.description}
-                  </span>
-                </div>
-
-                <div className="flex flex-col  gap-4  text-sm">
-                  <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <UserCircleIcon className="h-5 w-5" />
-                      <span>Lead</span>
-                    </div>
-
-                    <div className="flex items-center gap-2.5">
-                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                        <img
-                          src={cycle.owned_by.avatar}
-                          height={12}
-                          width={12}
-                          className="rounded-full"
-                          alt={cycle.owned_by.display_name}
+                    <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 -right-5 z-20 transform overflow-hidden">
+                        <CustomRangeDatePicker
+                          value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
+                          onChange={(val) => {
+                            if (val) {
+                              handleEndDateChange(val);
+                            }
+                          }}
+                          startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                          endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                          minDate={new Date(`${watch("start_date")}`)}
+                          selectsEnd
                         />
-                      ) : (
-                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 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>
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                </Popover>
+              </div>
+            </div>
+          </div>
 
-                  <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <ChartPieIcon className="h-5 w-5" />
-                      <span>Progress</span>
-                    </div>
+          {cycleDetails.description && (
+            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+              {cycleDetails.description}
+            </span>
+          )}
 
-                    <div className="flex items-center gap-2.5 text-custom-text-200">
-                      <span className="h-4 w-4">
-                        <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
-                      </span>
-                      {cycle.completed_issues}/{cycle.total_issues}
-                    </div>
-                  </div>
+          <div className="flex flex-col gap-5 pt-2.5 pb-6">
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <UserCircle2 className="h-4 w-4" />
+                <span className="text-base">Lead</span>
+              </div>
+              <div className="flex items-center w-1/2 rounded-sm">
+                <div className="flex items-center gap-2.5">
+                  <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
+                  <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
                 </div>
               </div>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
-              <Disclosure defaultOpen>
+
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <LayersIcon className="h-4 w-4" />
+                <span className="text-base">Issues</span>
+              </div>
+              <div className="flex items-center w-1/2">
+                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
                 {({ open }) => (
-                  <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={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
-                        {!open && progressPercentage ? (
-                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        {progressPercentage ? (
+                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
                             {progressPercentage ? `${progressPercentage}%` : ""}
                           </span>
                         ) : (
                           ""
                         )}
+                        {isStartValid && isEndValid ? (
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                        ) : (
+                          <div className="flex items-center gap-1">
+                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                            <span className="text-xs italic text-custom-text-200">
+                              Invalid date. Please enter valid date.
+                            </span>
+                          </div>
+                        )}
                       </div>
-                      {isStartValid && isEndValid ? (
-                        <Disclosure.Button>
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
-                        </Disclosure.Button>
-                      ) : (
-                        <div className="flex items-center gap-1">
-                          <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."
-                              : "Invalid date. Please enter valid date."}
-                          </span>
-                        </div>
-                      )}
-                    </div>
+                    </Disclosure.Button>
                     <Transition show={open}>
                       <Disclosure.Panel>
-                        {isStartValid && isEndValid ? (
-                          <div className=" h-full w-full py-4">
-                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-1">
-                                <span>
-                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
-                                </span>
-                                <span>
-                                  Pending Issues -{" "}
-                                  {cycle.total_issues -
-                                    (cycle.completed_issues + cycle.cancelled_issues)}
-                                </span>
+                        <div className="flex flex-col gap-3">
+                          {isStartValid && isEndValid ? (
+                            <div className="h-full w-full pt-4">
+                              <div className="flex  items-start  gap-4 py-2 text-xs">
+                                <div className="flex items-center gap-3 text-custom-text-100">
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                    <span>Ideal</span>
+                                  </div>
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                    <span>Current</span>
+                                  </div>
+                                </div>
                               </div>
-
-                              <div className="flex items-center gap-3 text-custom-text-100">
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                  <span>Ideal</span>
-                                </div>
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                  <span>Current</span>
-                                </div>
+                              <div className="relative h-40 w-80">
+                                <ProgressChart
+                                  distribution={cycleDetails.distribution?.completion_chart ?? {}}
+                                  startDate={cycleDetails.start_date ?? ""}
+                                  endDate={cycleDetails.end_date ?? ""}
+                                  totalIssues={cycleDetails.total_issues}
+                                />
                               </div>
                             </div>
-                            <div className="relative">
-                              <ProgressChart
-                                distribution={cycle.distribution.completion_chart}
-                                startDate={cycle.start_date ?? ""}
-                                endDate={cycle.end_date ?? ""}
-                                totalIssues={cycle.total_issues}
+                          ) : (
+                            ""
+                          )}
+                          {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
+                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
+                              <SidebarProgressStats
+                                distribution={cycleDetails.distribution}
+                                groupedIssues={{
+                                  backlog: cycleDetails.backlog_issues,
+                                  unstarted: cycleDetails.unstarted_issues,
+                                  started: cycleDetails.started_issues,
+                                  completed: cycleDetails.completed_issues,
+                                  cancelled: cycleDetails.cancelled_issues,
+                                }}
+                                totalIssues={cycleDetails.total_issues}
+                                isPeekView={Boolean(peekCycle)}
                               />
                             </div>
-                          </div>
-                        ) : (
-                          ""
-                        )}
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            </div>
-            <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="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>
-                      </div>
-
-                      {cycle.total_issues > 0 ? (
-                        <Disclosure.Button>
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
-                        </Disclosure.Button>
-                      ) : (
-                        <div className="flex items-center gap-1">
-                          <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>
+                          )}
                         </div>
-                      )}
-                    </div>
-                    <Transition show={open}>
-                      <Disclosure.Panel>
-                        {cycle.total_issues > 0 ? (
-                          <div className="h-full w-full py-4">
-                            <SidebarProgressStats
-                              distribution={cycle.distribution}
-                              groupedIssues={{
-                                backlog: cycle.backlog_issues,
-                                unstarted: cycle.unstarted_issues,
-                                started: cycle.started_issues,
-                                completed: cycle.completed_issues,
-                                cancelled: cycle.cancelled_issues,
-                              }}
-                              totalIssues={cycle.total_issues}
-                            />
-                          </div>
-                        ) : (
-                          ""
-                        )}
                       </Disclosure.Panel>
                     </Transition>
                   </div>
                 )}
               </Disclosure>
             </div>
-          </>
-        ) : (
-          <Loader className="px-5">
-            <div className="space-y-2">
-              <Loader.Item height="15px" width="50%" />
-              <Loader.Item height="15px" width="30%" />
-            </div>
-            <div className="mt-8 space-y-3">
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-            </div>
-          </Loader>
-        )}
-      </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="px-5">
+          <div className="space-y-2">
+            <Loader.Item height="15px" width="50%" />
+            <Loader.Item height="15px" width="30%" />
+          </div>
+          <div className="mt-8 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      )}
     </>
   );
-};
+});
diff --git a/web/components/cycles/single-cycle-card.tsx b/web/components/cycles/single-cycle-card.tsx
deleted file mode 100644
index 0822ba26a..000000000
--- a/web/components/cycles/single-cycle-card.tsx
+++ /dev/null
@@ -1,415 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { SingleProgressStats } from "components/core";
-// ui
-import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
-import { AssigneesList } from "components/ui/avatar";
-// 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";
-
-type TSingleStatProps = {
-  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 SingleCycleCard: React.FC<TSingleStatProps> = ({
-  cycle,
-  handleEditCycle,
-  handleDeleteCycle,
-  handleAddToFavorites,
-  handleRemoveFromFavorites,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  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,
-  };
-
-  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={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        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={(e) => {
-                        e.preventDefault();
-                        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={(e) => {
-                          e.preventDefault();
-                          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/single-cycle-list.tsx b/web/components/cycles/single-cycle-list.tsx
deleted file mode 100644
index a4c21128a..000000000
--- a/web/components/cycles/single-cycle-list.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, LinearProgressIndicator, Tooltip } 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";
-
-type TSingleStatProps = {
-  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",
-  },
-];
-
-type progress = {
-  progress: number;
-};
-
-function RadialProgressBar({ progress }: progress) {
-  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>
-  );
-}
-
-export const SingleCycleList: React.FC<TSingleStatProps> = ({
-  cycle,
-  handleEditCycle,
-  handleDeleteCycle,
-  handleAddToFavorites,
-  handleRemoveFromFavorites,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  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 completedIssues = cycle.completed_issues + cycle.cancelled_issues;
-
-  const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
-
-  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>{Math.round(percentage)} %</span>
-                        </span>
-                      ) : (
-                        <span className="flex gap-1">
-                          <RadialProgressBar
-                            progress={(cycle.total_issues / cycle.completed_issues) * 100}
-                          />
-                          {cycleStatus}
-                        </span>
-                      )}
-                    </span>
-                  </Tooltip>
-                  {cycle.is_favorite ? (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        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={(e) => {
-                            e.preventDefault();
-                            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={(e) => {
-                            e.preventDefault();
-                            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>
-            </div>
-          </a>
-        </Link>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index e4c26994d..bcbd8efef 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -1,21 +1,16 @@
-import React, { useState, useEffect } from "react";
-
+import React, { useState } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// component
+import useSWR from "swr";
 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";
 //icons
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { ContrastIcon, ExclamationIcon, TransferIcon } from "components/icons";
+import { ContrastIcon, TransferIcon } from "@plane/ui";
+import { AlertCircle, Search, X } from "lucide-react";
 // fetch-key
-import { CYCLE_ISSUES_WITH_PARAMS, INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys";
+import { INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys";
 // types
 import { ICycle } from "types";
 //helper
@@ -26,28 +21,27 @@ type Props = {
   handleClose: () => void;
 };
 
+const cycleService = new CycleService();
+
 export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) => {
   const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const { params } = useIssuesView();
-
   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) => {
-        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+      .then(() => {
         setToastAlert({
           type: "success",
           title: "Issues transfered successfully",
           message: "Issues have been transferred successfully",
         });
       })
-      .catch((err) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -59,29 +53,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}>
@@ -94,7 +82,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10">
@@ -108,19 +96,19 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               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 bg-custom-background-90 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 py-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-3">
-                      <TransferIcon className="h-4 w-5" color="#495057" />
+                      <TransferIcon className="h-4 w-4" color="#495057" />
                       <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
-                      <XMarkIcon className="h-4 w-4" />
+                      <X className="h-4 w-4" />
                     </button>
                   </div>
                   <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
-                    <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
+                    <Search className="h-4 w-4 text-custom-text-200" />
                     <input
                       className="bg-custom-background-90 outline-none"
                       placeholder="Search for a cycle..."
@@ -153,14 +141,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"
-                          />
+                          <AlertCircle className="h-3.5 w-3.5 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..5ec23cd70 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, TransferIcon } from "@plane/ui";
 // icon
-import { ExclamationIcon, TransferIcon } from "components/icons";
+import { AlertCircle } from "lucide-react";
 // services
-import cycleServices from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // fetch-key
 import { CYCLE_DETAILS } from "constants/fetch-keys";
 
@@ -17,38 +17,37 @@ type Props = {
   handleClick: () => void;
 };
 
-export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
+const cycleService = new CycleService();
+
+export const TransferIssues: React.FC<Props> = (props) => {
+  const { handleClick } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
   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
   );
 
   const transferableIssuesCount = cycleDetails
     ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
     : 0;
+
   return (
-    <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
+    <div className="-mt-2 mb-4 flex items-center justify-between px-4 pt-6">
       <div className="flex items-center gap-2 text-sm text-custom-text-200">
-        <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+        <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
         <span>Completed cycles are not editable.</span>
       </div>
 
       {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/dnd/StrictModeDroppable.tsx b/web/components/dnd/StrictModeDroppable.tsx
index 9ed01d3bf..9feba79b2 100644
--- a/web/components/dnd/StrictModeDroppable.tsx
+++ b/web/components/dnd/StrictModeDroppable.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 
 // react beautiful dnd
-import { Droppable, DroppableProps } from "react-beautiful-dnd";
+import { Droppable, DroppableProps } from "@hello-pangea/dnd";
 
 const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
   const [enabled, setEnabled] = useState(false);
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..b3116b767 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -1,45 +1,27 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
+import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import estimatesService from "services/estimates.service";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
-// fetch-keys
-import { ESTIMATES_LIST, ESTIMATE_DETAILS } from "constants/fetch-keys";
+import { IEstimate, IEstimateFormData } from "types";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IEstimate;
-  user: ICurrentUserResponse | undefined;
 };
 
-type FormValues = {
-  name: string;
-  description: string;
-  value1: string;
-  value2: string;
-  value3: string;
-  value4: string;
-  value5: string;
-  value6: string;
-};
-
-const defaultValues: Partial<FormValues> = {
+const defaultValues = {
   name: "",
   description: "",
   value1: "",
@@ -50,11 +32,22 @@ const defaultValues: Partial<FormValues> = {
   value6: "",
 };
 
-export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
+type FormValues = typeof defaultValues;
+
+export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
+  const { handleClose, data, isOpen } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectEstimates: projectEstimatesStore } = useMobxStore();
+
   const {
-    register,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<FormValues>({
     defaultValues,
@@ -65,77 +58,47 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
     reset();
   };
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
   const { setToastAlert } = useToast();
 
   const createEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId) return;
 
-    await estimatesService
-      .createEstimate(workspaceSlug as string, projectId as string, payload, user)
+    await projectEstimatesStore
+      .createEstimate(workspaceSlug.toString(), projectId.toString(), payload)
       .then(() => {
-        mutate(ESTIMATES_LIST(projectId as string));
         onClose();
       })
       .catch((err) => {
-        if (err.status === 400)
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Estimate with that name already exists. Please try again with another name.",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Estimate could not be created. Please try again.",
-          });
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message:
+            errorString ?? err.status === 400
+              ? "Estimate with that name already exists. Please try again with another name."
+              : "Estimate could not be created. Please try again.",
+        });
       });
   };
 
   const updateEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId || !data) return;
 
-    mutate<IEstimate[]>(
-      ESTIMATES_LIST(projectId.toString()),
-      (prevData) =>
-        prevData?.map((p) => {
-          if (p.id === data.id)
-            return {
-              ...p,
-              name: payload.estimate.name,
-              description: payload.estimate.description,
-              points: p.points.map((point, index) => ({
-                ...point,
-                value: payload.estimate_points[index].value,
-              })),
-            };
-
-          return p;
-        }),
-      false
-    );
-
-    await estimatesService
-      .patchEstimate(
-        workspaceSlug as string,
-        projectId as string,
-        data?.id as string,
-        payload,
-        user
-      )
+    await projectEstimatesStore
+      .updateEstimate(workspaceSlug.toString(), projectId.toString(), data.id, payload)
       .then(() => {
-        mutate(ESTIMATES_LIST(projectId.toString()));
-        mutate(ESTIMATE_DETAILS(data.id));
         handleClose();
       })
-      .catch(() => {
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Estimate could not be updated. Please try again.",
+          message: errorString ?? "Estimate could not be updated. Please try again.",
         });
       });
 
@@ -240,7 +203,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -254,134 +217,85 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                 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-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md 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>
+
+                      {/* list of all the points */}
+                      {/* since they are all the same, we can use a loop to render them */}
                       <div className="grid grid-cols-3 gap-3">
-                        <div className="flex items-center">
-                          <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"
-                                name="value1"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 1"
-                                autoComplete="off"
-                                register={register}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <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"
-                                name="value2"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 2"
-                                autoComplete="off"
-                                register={register}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <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"
-                                name="value3"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 3"
-                                autoComplete="off"
-                                register={register}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <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"
-                                name="value4"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 4"
-                                autoComplete="off"
-                                register={register}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <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"
-                                name="value5"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 5"
-                                autoComplete="off"
-                                register={register}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <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"
-                                name="value6"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 6"
-                                autoComplete="off"
-                                register={register}
-                              />
-                            </span>
-                          </span>
-                        </div>
+                        {Array(6)
+                          .fill(0)
+                          .map((_, i) => (
+                            <div className="flex items-center">
+                              <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">{i + 1}</span>
+                                <span className="rounded-r-lg bg-custom-background-100">
+                                  <Controller
+                                    control={control}
+                                    name={`value${i + 1}` as keyof FormValues}
+                                    render={({ field: { value, onChange, ref } }) => (
+                                      <Input
+                                        ref={ref}
+                                        type="text"
+                                        value={value}
+                                        onChange={onChange}
+                                        id={`value${i + 1}`}
+                                        name={`value${i + 1}`}
+                                        placeholder={`Point ${i + 1}`}
+                                        className="rounded-l-none w-full"
+                                        hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
+                                      />
+                                    )}
+                                  />
+                                </span>
+                              </span>
+                            </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" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                         {data
                           ? isSubmitting
                             ? "Updating Estimate..."
@@ -389,7 +303,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           : isSubmitting
                           ? "Creating Estimate..."
                           : "Create Estimate"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </form>
                 </Dialog.Panel>
@@ -400,4 +314,4 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
       </Transition.Root>
     </>
   );
-};
+});
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index b4c08b421..2df848020 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -1,30 +1,57 @@
 import React, { useEffect, useState } from "react";
-
-// headless ui
+import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
 // types
 import { IEstimate } from "types";
-
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
+  data: IEstimate | null;
   handleClose: () => void;
-  data: IEstimate;
-  handleDelete: () => void;
 };
 
-export const DeleteEstimateModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  handleDelete,
-}) => {
+export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, data } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectEstimates: projectEstimatesStore } = useMobxStore();
+
+  // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleEstimateDelete = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const estimateId = data?.id!;
+
+    projectEstimatesStore.deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId).catch((err) => {
+      const error = err?.error;
+      const errorString = Array.isArray(error) ? error[0] : error;
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: errorString ?? "Estimate could not be deleted. Please try again",
+      });
+    });
+  };
+
   useEffect(() => {
     setIsDeleteLoading(false);
   }, [isOpen]);
@@ -46,7 +73,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -60,14 +87,11 @@ export const DeleteEstimateModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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,24 +100,27 @@ 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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      tabIndex={1}
                       onClick={() => {
                         setIsDeleteLoading(true);
-                        handleDelete();
+                        handleEstimateDelete();
                       }}
                       loading={isDeleteLoading}
                     >
                       {isDeleteLoading ? "Deleting..." : "Delete Estimate"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -103,4 +130,4 @@ export const DeleteEstimateModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/estimate-list-item.tsx
similarity index 52%
rename from web/components/estimates/single-estimate.tsx
rename to web/components/estimates/estimate-list-item.tsx
index 43edfcb2c..beaa942d3 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -1,80 +1,66 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 
-// services
-import projectService from "services/project.service";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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, CustomMenu } from "@plane/ui";
 //icons
-import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Pencil, Trash2 } from "lucide-react";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { ICurrentUserResponse, IEstimate } from "types";
+import { IEstimate } from "types";
 
 type Props = {
-  user: ICurrentUserResponse | undefined;
   estimate: IEstimate;
   editEstimate: (estimate: IEstimate) => void;
-  handleEstimateDelete: (estimateId: string) => void;
+  deleteEstimate: (estimateId: string) => void;
 };
 
-export const SingleEstimate: React.FC<Props> = ({
-  user,
-  estimate,
-  editEstimate,
-  handleEstimateDelete,
-}) => {
-  const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
-
+export const EstimateListItem: React.FC<Props> = observer((props) => {
+  const { estimate, editEstimate, deleteEstimate } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // hooks
   const { setToastAlert } = useToast();
 
-  const { projectDetails, mutateProjectDetails } = useProjectDetails();
-
   const handleUseEstimate = async () => {
     if (!workspaceSlug || !projectId) return;
 
-    const payload = {
-      estimate: estimate.id,
-    };
+    await projectStore
+      .updateProject(workspaceSlug.toString(), projectId.toString(), {
+        estimate: estimate.id,
+      })
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
 
-    mutateProjectDetails((prevData: any) => {
-      if (!prevData) return prevData;
-
-      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.",
+          message: errorString ?? "Estimate points could not be used. Please try again.",
         });
       });
   };
 
   return (
     <>
-      <div className="gap-2 p-4 border-b border-custom-border-200">
+      <div className="gap-2 p-4 border-b border-custom-border-100">
         <div className="flex items-center justify-between">
           <div>
             <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>
+              {currentProjectDetails?.estimate && currentProjectDetails?.estimate === estimate.id && (
+                <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">
@@ -82,13 +68,10 @@ export const SingleEstimate: React.FC<Props> = ({
             </p>
           </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"
-              >
+            {currentProjectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
+              <Button variant="neutral-primary" onClick={handleUseEstimate}>
                 Use
-              </SecondaryButton>
+              </Button>
             )}
             <CustomMenu ellipsis>
               <CustomMenu.MenuItem
@@ -97,18 +80,18 @@ export const SingleEstimate: React.FC<Props> = ({
                 }}
               >
                 <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-3.5 w-3.5" />
+                  <Pencil className="h-3.5 w-3.5" />
                   <span>Edit estimate</span>
                 </div>
               </CustomMenu.MenuItem>
-              {projectDetails?.estimate !== estimate.id && (
+              {currentProjectDetails?.estimate !== estimate.id && (
                 <CustomMenu.MenuItem
                   onClick={() => {
-                    setIsDeleteEstimateModalOpen(true);
+                    deleteEstimate(estimate.id);
                   }}
                 >
                   <div className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-3.5 w-3.5" />
+                    <Trash2 className="h-3.5 w-3.5" />
                     <span>Delete estimate</span>
                   </div>
                 </CustomMenu.MenuItem>
@@ -116,7 +99,7 @@ export const SingleEstimate: React.FC<Props> = ({
             </CustomMenu>
           </div>
         </div>
-        {estimate.points.length > 0 ? (
+        {estimate?.points?.length > 0 ? (
           <div className="flex text-xs text-custom-text-200">
             Estimate points (
             <span className="flex gap-1">
@@ -135,16 +118,6 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
         )}
       </div>
-
-      <DeleteEstimateModal
-        isOpen={isDeleteEstimateModalOpen}
-        handleClose={() => setIsDeleteEstimateModalOpen(false)}
-        data={estimate}
-        handleDelete={() => {
-          handleEstimateDelete(estimate.id);
-          setIsDeleteEstimateModalOpen(false);
-        }}
-      />
     </>
   );
-};
+});
diff --git a/web/components/estimates/estimate-list.tsx b/web/components/estimates/estimate-list.tsx
new file mode 100644
index 000000000..07770b183
--- /dev/null
+++ b/web/components/estimates/estimate-list.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
+//hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
+// icons
+import { Plus } from "lucide-react";
+// images
+import emptyEstimate from "public/empty-state/estimate.svg";
+// types
+import { IEstimate } from "types";
+
+export const EstimatesList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // states
+  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
+  const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
+  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
+  // hooks
+  const { setToastAlert } = useToast();
+  // derived values
+  const estimatesList = projectStore.projectEstimates;
+
+  const editEstimate = (estimate: IEstimate) => {
+    setEstimateFormOpen(true);
+    setEstimateToUpdate(estimate);
+  };
+
+  const disableEstimates = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), { estimate: null }).catch((err) => {
+      const error = err?.error;
+      const errorString = Array.isArray(error) ? error[0] : error;
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: errorString ?? "Estimate could not be disabled. Please try again",
+      });
+    });
+  };
+
+  return (
+    <>
+      <CreateUpdateEstimateModal
+        isOpen={estimateFormOpen}
+        data={estimateToUpdate}
+        handleClose={() => {
+          setEstimateFormOpen(false);
+          setEstimateToUpdate(undefined);
+        }}
+      />
+
+      <DeleteEstimateModal
+        isOpen={!!estimateToDelete}
+        handleClose={() => setEstimateToDelete(null)}
+        data={projectStore.getProjectEstimateById(estimateToDelete!)}
+      />
+
+      <section className="flex items-center justify-between py-3.5 border-b border-custom-border-100">
+        <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">
+            <Button
+              variant="primary"
+              onClick={() => {
+                setEstimateFormOpen(true);
+                setEstimateToUpdate(undefined);
+              }}
+            >
+              Add Estimate
+            </Button>
+            {currentProjectDetails?.estimate && (
+              <Button variant="neutral-primary" onClick={disableEstimates}>
+                Disable Estimates
+              </Button>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {estimatesList ? (
+        estimatesList.length > 0 ? (
+          <section className="h-full bg-custom-background-100 overflow-y-auto">
+            {estimatesList.map((estimate) => (
+              <EstimateListItem
+                key={estimate.id}
+                estimate={estimate}
+                editEstimate={(estimate) => editEstimate(estimate)}
+                deleteEstimate={(estimateId) => setEstimateToDelete(estimateId)}
+              />
+            ))}
+          </section>
+        ) : (
+          <div className="h-full w-full overflow-y-auto">
+            <EmptyState
+              title="No estimates yet"
+              description="Estimates help you communicate the complexity of an issue."
+              image={emptyEstimate}
+              primaryButton={{
+                icon: <Plus className="h-4 w-4" />,
+                text: "Add Estimate",
+                onClick: () => {
+                  setEstimateFormOpen(true);
+                  setEstimateToUpdate(undefined);
+                },
+              }}
+            />
+          </div>
+        )
+      ) : (
+        <Loader className="mt-5 space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
+  );
+});
diff --git a/web/components/estimates/estimate-select.tsx b/web/components/estimates/estimate-select.tsx
new file mode 100644
index 000000000..e02cfaf89
--- /dev/null
+++ b/web/components/estimates/estimate-select.tsx
@@ -0,0 +1,160 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
+// types
+import { Tooltip } from "@plane/ui";
+import { Placement } from "@popperjs/core";
+// constants
+import { IEstimatePoint } from "types";
+
+type Props = {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  estimatePoints: IEstimatePoint[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const EstimateSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    estimatePoints,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options: { value: number | null; query: string; content: any }[] | undefined = estimatePoints?.map(
+    (estimate) => ({
+      value: estimate.key,
+      query: estimate.value,
+      content: (
+        <div className="flex items-center gap-2">
+          <Triangle className="h-3 w-3" strokeWidth={2} />
+          {estimate.value}
+        </div>
+      ),
+    })
+  );
+  options?.unshift({
+    value: null,
+    query: "none",
+    content: (
+      <div className="flex items-center gap-2">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        None
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = estimatePoints?.find((e) => e.key === value);
+  const label = (
+    <Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        <span className="truncate">{selectedEstimate?.value ?? "None"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={(val) => onChange(val as number | null)}
+      disabled={disabled}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/web/components/estimates/index.tsx b/web/components/estimates/index.ts
similarity index 54%
rename from web/components/estimates/index.tsx
rename to web/components/estimates/index.ts
index f20c74780..e9a22a53d 100644
--- a/web/components/estimates/index.tsx
+++ b/web/components/estimates/index.ts
@@ -1,3 +1,4 @@
 export * from "./create-update-estimate-modal";
-export * from "./single-estimate";
 export * from "./delete-estimate-modal";
+export * from "./estimate-select";
+export * from "./estimate-list-item";
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index df4729265..4cf99e0ce 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -1,39 +1,41 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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, CustomSearchSelect } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IImporterService } from "types";
-// fetch-keys
-import useProjects from "hooks/use-projects";
+import { IUser, IImporterService } from "types";
 
 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> = observer((props) => {
+  const { isOpen, handleClose, user, provider, mutateServices } = props;
+
   const [exportLoading, setExportLoading] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  const { projects } = useProjects();
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const { setToastAlert } = useToast();
 
   const options = projects?.map((project) => ({
@@ -60,7 +62,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 +72,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.`,
           });
         })
@@ -102,7 +99,7 @@ export const Exporter: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -116,19 +113,13 @@ export const Exporter: React.FC<Props> = ({
               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 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 gap-y-4 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <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>
@@ -137,7 +128,7 @@ export const Exporter: React.FC<Props> = ({
                       value={value ?? []}
                       onChange={(val: string[]) => onChange(val)}
                       options={options}
-                      input={true}
+                      input
                       label={
                         value && value.length > 0
                           ? projects &&
@@ -155,24 +146,22 @@ 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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
                       onClick={ExportCSVToMail}
                       disabled={exportLoading}
                       loading={exportLoading}
                     >
                       {exportLoading ? "Exporting..." : "Export"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -182,4 +171,4 @@ export const Exporter: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 2643a07cf..2d7eb9d65 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -9,18 +9,21 @@ 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";
 // icons
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // fetch-keys
 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 +35,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
   );
 
@@ -52,33 +53,24 @@ const IntegrationGuide = () => {
             {EXPORTERS_LIST.map((service) => (
               <div
                 key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
+                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
               >
                 <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" className="capitalize">
+                          {service.type}
+                        </Button>
                       </a>
                     </Link>
                   </div>
@@ -87,7 +79,7 @@ const IntegrationGuide = () => {
             ))}
           </div>
           <div>
-            <div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-200">
+            <div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-100">
               <div className="flex gap-2 items-center">
                 <h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>
 
@@ -96,35 +88,31 @@ 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" : ""}`} />{" "}
+                  <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
                   {refreshing ? "Refreshing..." : "Refresh status"}
                 </button>
               </div>
               <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"
                       : "cursor-not-allowed opacity-75"
                   }`}
                 >
-                  <Icon iconName="keyboard_arrow_left" className="!text-lg" />
+                  <MoveLeft className="h-4 w-4" />
                   <div className="pr-1">Prev</div>
                 </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"
@@ -132,7 +120,7 @@ const IntegrationGuide = () => {
                   }`}
                 >
                   <div className="pl-1">Next</div>
-                  <Icon iconName="keyboard_arrow_right" className="!text-lg" />
+                  <MoveRight className="h-4 w-4" />
                 </button>
               </div>
             </div>
@@ -147,9 +135,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">
@@ -164,14 +150,12 @@ const IntegrationGuide = () => {
         </>
         {provider && (
           <Exporter
-            isOpen={true}
+            isOpen
             handleClose={() => handleCsvClose()}
             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/blocks/blocks-display.tsx b/web/components/gantt-chart/blocks/blocks-display.tsx
index f0e7279be..586b0d5cc 100644
--- a/web/components/gantt-chart/blocks/blocks-display.tsx
+++ b/web/components/gantt-chart/blocks/blocks-display.tsx
@@ -11,7 +11,7 @@ import { IBlockUpdateData, IGanttBlock } from "../types";
 export const GanttChartBlocks: FC<{
   itemsContainerWidth: number;
   blocks: IGanttBlock[] | null;
-  BlockRender: React.FC<any>;
+  blockToRender: (data: any) => React.ReactNode;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
@@ -19,7 +19,7 @@ export const GanttChartBlocks: FC<{
 }> = ({
   itemsContainerWidth,
   blocks,
-  BlockRender,
+  blockToRender,
   blockUpdateHandler,
   enableBlockLeftResize,
   enableBlockRightResize,
@@ -49,11 +49,9 @@ export const GanttChartBlocks: FC<{
     const updatedTargetDate = new Date(originalTargetDate);
 
     // update the start date on left resize
-    if (dragDirection === "left")
-      updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
+    if (dragDirection === "left") updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
     // update the target date on right resize
-    else if (dragDirection === "right")
-      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
+    else if (dragDirection === "right") updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
     // update both the dates on x-axis move
     else if (dragDirection === "move") {
       updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts);
@@ -86,7 +84,7 @@ export const GanttChartBlocks: FC<{
               >
                 <ChartDraggable
                   block={block}
-                  BlockRender={BlockRender}
+                  blockToRender={blockToRender}
                   handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
                   enableBlockLeftResize={enableBlockLeftResize}
                   enableBlockRightResize={enableBlockRightResize}
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..c6df29452 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -1,11 +1,8 @@
 import { FC, useEffect, useState } from "react";
-// next
-import { useRouter } from "next/router";
 // icons
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
-import { GanttSidebar } from "../sidebar";
+// import { GanttSidebar } from "../sidebar";
 // import { HourChartView } from "./hours";
 // import { DayChartView } from "./day";
 // import { WeekChartView } from "./week";
@@ -14,22 +11,21 @@ import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
 // import { YearChartView } from "./year";
 // icons
-import { PlusIcon } from "lucide-react";
+import { Expand, Shrink } from "lucide-react";
 // views
 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";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
@@ -43,8 +39,8 @@ type ChartViewRootProps = {
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  SidebarBlockRender: React.FC<any>;
-  BlockRender: React.FC<any>;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
@@ -58,30 +54,20 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   blocks = null,
   loaderTitle,
   blockUpdateHandler,
-  SidebarBlockRender,
-  BlockRender,
+  sidebarToRender,
+  blockToRender,
   enableBlockLeftResize,
   enableBlockRightResize,
   enableBlockMove,
   enableReorder,
   bottomSpacing,
 }) => {
+  // states
   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();
-
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-
-  const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
-  const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
+  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 +78,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 +100,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 +139,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 +150,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) => {
@@ -183,6 +165,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
     const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
 
+    if (!scrollContainer) return;
+
     const clientVisibleWidth: number = scrollContainer?.clientWidth;
     let scrollWidth: number = 0;
     let daysDifference: number = 0;
@@ -202,8 +186,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;
   };
@@ -212,28 +195,25 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const onScroll = () => {
     const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
 
+    if (!scrollContainer) return;
+
     const scrollWidth: number = scrollContainer?.scrollWidth;
     const clientVisibleWidth: number = scrollContainer?.clientWidth;
     const currentScrollPosition: number = scrollContainer?.scrollLeft;
 
     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 +242,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)}
               >
@@ -290,11 +269,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setFullScreenMode((prevData) => !prevData)}
         >
-          {fullScreenMode ? (
-            <ArrowsPointingInIcon className="h-4 w-4" />
-          ) : (
-            <ArrowsPointingOutIcon className="h-4 w-4" />
-          )}
+          {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
         </div>
       </div>
 
@@ -305,59 +280,13 @@ 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>
           </div>
-          <GanttSidebar
-            title={title}
-            blockUpdateHandler={blockUpdateHandler}
-            blocks={chartBlocks}
-            SidebarBlockRender={SidebarBlockRender}
-            enableReorder={enableReorder}
-          />
-          {chartBlocks && !(isCyclePage || isModulePage) && (
-            <div className="pl-2.5 py-3">
-              <GanttInlineCreateIssueForm
-                isOpen={isCreateIssueFormOpen}
-                handleClose={() => setIsCreateIssueFormOpen(false)}
-                onSuccess={() => {
-                  const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
 
-                  const timeoutId = setTimeout(() => {
-                    if (ganttSidebar)
-                      ganttSidebar.scrollBy({
-                        top: ganttSidebar.scrollHeight,
-                        left: 0,
-                        behavior: "smooth",
-                      });
-                    clearTimeout(timeoutId);
-                  }, 10);
-                }}
-                prePopulatedData={{
-                  start_date: new Date(Date.now()).toISOString().split("T")[0],
-                  target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              />
-
-              {!isCreateIssueFormOpen && (
-                <button
-                  type="button"
-                  onClick={() => setIsCreateIssueFormOpen(true)}
-                  className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pl-[1.875rem] 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>
-          )}
+          {sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
@@ -377,7 +306,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             <GanttChartBlocks
               itemsContainerWidth={itemsContainerWidth}
               blocks={chartBlocks}
-              BlockRender={BlockRender}
+              blockToRender={blockToRender}
               blockUpdateHandler={blockUpdateHandler}
               enableBlockLeftResize={enableBlockLeftResize}
               enableBlockRightResize={enableBlockRightResize}
diff --git a/web/components/gantt-chart/chart/month.tsx b/web/components/gantt-chart/chart/month.tsx
index 2a4a67daf..ccfcf87d5 100644
--- a/web/components/gantt-chart/chart/month.tsx
+++ b/web/components/gantt-chart/chart/month.tsx
@@ -34,16 +34,8 @@ export const MonthChartView: FC<any> = () => {
                         style={{ width: `${currentViewData?.data.width}px` }}
                       >
                         <div className="text-xs space-x-1">
-                          <span className="text-custom-text-200">
-                            {monthDay.dayData.shortTitle[0]}
-                          </span>{" "}
-                          <span
-                            className={
-                              monthDay.today
-                                ? "bg-custom-primary-100 text-white px-1 rounded-full"
-                                : ""
-                            }
-                          >
+                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                          <span className={monthDay.today ? "bg-custom-primary-100 text-white px-1 rounded-full" : ""}>
                             {monthDay.day}
                           </span>
                         </div>
@@ -63,9 +55,7 @@ export const MonthChartView: FC<any> = () => {
                     >
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-90`
-                            : ``
+                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ? `bg-custom-background-90` : ``
                         }`}
                       >
                         {/* {monthDay?.today && (
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/data/index.ts b/web/components/gantt-chart/data/index.ts
index 4e1921434..58ac6e4b2 100644
--- a/web/components/gantt-chart/data/index.ts
+++ b/web/components/gantt-chart/data/index.ts
@@ -27,8 +27,7 @@ export const months: WeekMonthDataType[] = [
   { key: 11, shortTitle: "dec", title: "december" },
 ];
 
-export const charCapitalize = (word: string) =>
-  `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
+export const charCapitalize = (word: string) => `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
 
 export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`);
 
@@ -50,9 +49,7 @@ export const datePreview = (date: Date, includeTime: boolean = false) => {
   month = months[month as number] as WeekMonthDataType;
   const year = date.getFullYear();
 
-  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${
-    includeTime ? `, ${timePreview(date)}` : ``
-  }`;
+  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${includeTime ? `, ${timePreview(date)}` : ``}`;
 };
 
 // context data
@@ -137,8 +134,6 @@ export const allViewsWithData: ChartDataType[] = [
 ];
 
 export const currentViewDataWithView = (view: string = "month") => {
-  const currentView: ChartDataType | undefined = allViewsWithData.find(
-    (_viewData) => _viewData.key === view
-  );
+  const currentView: ChartDataType | undefined = allViewsWithData.find((_viewData) => _viewData.key === view);
   return currentView;
 };
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index 79dc2a72a..33483a847 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 // icons
-import { Icon } from "components/ui";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 // hooks
 import { useChart } from "../hooks";
 // types
@@ -9,7 +9,7 @@ import { IGanttBlock } from "../types";
 
 type Props = {
   block: IGanttBlock;
-  BlockRender: React.FC<any>;
+  blockToRender: (data: any) => React.ReactNode;
   handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
@@ -18,7 +18,7 @@ type Props = {
 
 export const ChartDraggable: React.FC<Props> = ({
   block,
-  BlockRender,
+  blockToRender,
   handleBlock,
   enableBlockLeftResize,
   enableBlockRightResize,
@@ -48,10 +48,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
-    if (
-      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
-      SCROLL_THRESHOLD
-    ) {
+    if (posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <= SCROLL_THRESHOLD) {
       if (e.movementX > 0) return 0;
 
       delWidth = -5;
@@ -82,8 +79,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const columnWidth = currentViewData.data.width;
 
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
+    const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
     let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
@@ -116,9 +112,7 @@ export const ChartDraggable: React.FC<Props> = ({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
 
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
+      const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
 
       handleBlock(totalBlockShifts, "left");
     };
@@ -137,8 +131,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const columnWidth = currentViewData.data.width;
 
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
+    const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
@@ -162,9 +155,7 @@ export const ChartDraggable: React.FC<Props> = ({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
 
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
+      const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
 
       handleBlock(totalBlockShifts, "right");
     };
@@ -254,7 +245,7 @@ export const ChartDraggable: React.FC<Props> = ({
           className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
-          <Icon iconName="arrow_back" />
+          <ArrowLeft className="h-3.5 w-3.5" />
         </div>
       )}
       {/* move to right side hidden block button */}
@@ -263,7 +254,7 @@ export const ChartDraggable: React.FC<Props> = ({
           className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
-          <Icon iconName="arrow_forward" />
+          <ArrowRight className="h-3.5 w-3.5" />
         </div>
       )}
       <div
@@ -292,12 +283,10 @@ export const ChartDraggable: React.FC<Props> = ({
           </>
         )}
         <div
-          className={`relative z-[2] rounded h-8 w-full flex items-center ${
-            isMoving ? "pointer-events-none" : ""
-          }`}
+          className={`relative z-[2] rounded h-8 w-full flex items-center ${isMoving ? "pointer-events-none" : ""}`}
           onMouseDown={handleBlockMove}
         >
-          <BlockRender data={block.data} />
+          {blockToRender(block.data)}
         </div>
         {/* right resize drag handle */}
         {enableBlockRightResize && (
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/index.ts b/web/components/gantt-chart/index.ts
index 4520ee194..ead696086 100644
--- a/web/components/gantt-chart/index.ts
+++ b/web/components/gantt-chart/index.ts
@@ -3,3 +3,4 @@ export * from "./helpers";
 export * from "./hooks";
 export * from "./root";
 export * from "./types";
+export * from "./sidebar";
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index 5acedd53e..10c00a363 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -12,8 +12,8 @@ type GanttChartRootProps = {
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  SidebarBlockRender: FC<any>;
-  BlockRender: FC<any>;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
   enableBlockLeftResize?: boolean;
   enableBlockRightResize?: boolean;
   enableBlockMove?: boolean;
@@ -27,8 +27,8 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
   blocks,
   loaderTitle = "blocks",
   blockUpdateHandler,
-  SidebarBlockRender,
-  BlockRender,
+  sidebarToRender,
+  blockToRender,
   enableBlockLeftResize = true,
   enableBlockRightResize = true,
   enableBlockMove = true,
@@ -42,8 +42,8 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
       blocks={blocks}
       loaderTitle={loaderTitle}
       blockUpdateHandler={blockUpdateHandler}
-      SidebarBlockRender={SidebarBlockRender}
-      BlockRender={BlockRender}
+      sidebarToRender={sidebarToRender}
+      blockToRender={blockToRender}
       enableBlockLeftResize={enableBlockLeftResize}
       enableBlockRightResize={enableBlockRightResize}
       enableBlockMove={enableBlockMove}
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
similarity index 81%
rename from web/components/gantt-chart/sidebar.tsx
rename to web/components/gantt-chart/sidebar/cycle-sidebar.tsx
index 2aec274d9..0103c7459 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
@@ -1,28 +1,28 @@
 import { useRouter } from "next/router";
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
 // hooks
-import { useChart } from "./hooks";
+import { useChart } from "components/gantt-chart/hooks";
 // ui
-import { Loader } from "components/ui";
-// icons
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { Loader } from "@plane/ui";
+// components
+import { CycleGanttSidebarBlock } from "components/cycles";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
-import { IBlockUpdateData, IGanttBlock } from "./types";
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
 
 type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  SidebarBlockRender: React.FC<any>;
   enableReorder: boolean;
 };
 
-export const GanttSidebar: React.FC<Props> = (props) => {
-  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+export const CycleGanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -55,8 +55,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 +94,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 +105,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}
@@ -130,13 +123,13 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                                 className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
-                                <EllipsisVerticalIcon className="h-4" />
-                                <EllipsisVerticalIcon className="h-4 -ml-5" />
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
                               <div className="flex-grow truncate">
-                                <SidebarBlockRender data={block.data} />
+                                <CycleGanttSidebarBlock data={block.data} />
                               </div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
diff --git a/web/components/gantt-chart/sidebar/index.ts b/web/components/gantt-chart/sidebar/index.ts
new file mode 100644
index 000000000..8b1d72237
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-sidebar";
+export * from "./module-sidebar";
+export * from "./sidebar";
+export * from "./project-view-sidebar";
diff --git a/web/components/gantt-chart/sidebar/module-sidebar.tsx b/web/components/gantt-chart/sidebar/module-sidebar.tsx
new file mode 100644
index 000000000..8e076d463
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/module-sidebar.tsx
@@ -0,0 +1,159 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "components/gantt-chart/hooks";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { ModuleGanttSidebarBlock } from "components/modules";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+};
+
+export const ModuleGanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // 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;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <ModuleGanttSidebarBlock data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
new file mode 100644
index 000000000..c327e1eac
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
@@ -0,0 +1,160 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "components/gantt-chart/hooks";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { IssueGanttSidebarBlock } from "components/issues";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // 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;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <IssueGanttSidebarBlock data={block.data} handleIssue={blockUpdateHandler} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
new file mode 100644
index 000000000..72fbe1267
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/sidebar.tsx
@@ -0,0 +1,161 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "components/gantt-chart/hooks";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { GanttInlineCreateIssueForm, IssueGanttSidebarBlock } from "components/issues";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const IssueGanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, enableReorder, enableQuickIssueCreate } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // 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;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <IssueGanttSidebarBlock data={block.data} handleIssue={blockUpdateHandler} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+            {enableQuickIssueCreate && <GanttInlineCreateIssueForm />}
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/views/bi-week-view.ts b/web/components/gantt-chart/views/bi-week-view.ts
index b8d8a0bfa..14c0aad15 100644
--- a/web/components/gantt-chart/views/bi-week-view.ts
+++ b/web/components/gantt-chart/views/bi-week-view.ts
@@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
 type GetAllDaysInMonthInMonthViewType = {
   date: any;
@@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       active: false,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -72,16 +65,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -96,16 +81,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -116,16 +93,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
diff --git a/web/components/gantt-chart/views/day-view.ts b/web/components/gantt-chart/views/day-view.ts
index 246ecd8b8..0801b7bb1 100644
--- a/web/components/gantt-chart/views/day-view.ts
+++ b/web/components/gantt-chart/views/day-view.ts
@@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
   const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
   const weekStart = new Date(firstWeekStart);
 
-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
 
   return weekNumber;
 };
@@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
   return date.getDate();
 };
 
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
 
 export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
   const months = [];
@@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
     months.push(new Date(currentYear, currentMonth));
     currentDate.setMonth(currentDate.getMonth() + 1);
   }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    months.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);
 
   return months;
 };
@@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
       weekNumber: getWeekNumberByDate(date),
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
   return monthPayload;
 };
 
-export const generateMonthDataByYear = (
-  monthPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
   let renderState = monthPayload;
   const renderPayload: any = [];
 
@@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
diff --git a/web/components/gantt-chart/views/helpers.ts b/web/components/gantt-chart/views/helpers.ts
index bfea64297..94b614286 100644
--- a/web/components/gantt-chart/views/helpers.ts
+++ b/web/components/gantt-chart/views/helpers.ts
@@ -1,6 +1,5 @@
 // Generating the date by using the year, month, and day
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
 
 // Getting the number of days in a month
 export const getNumberOfDaysInMonth = (month: number, year: number) => {
@@ -20,8 +19,7 @@ export const getWeekNumberByDate = (date: Date) => {
   const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
   const weekStart = new Date(firstWeekStart);
 
-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
 
   return weekNumber;
 };
@@ -86,8 +84,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
     dates.push(new Date(currentYear, currentMonth));
     currentDate.setMonth(currentDate.getMonth() + 1);
   }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    dates.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) dates.push(endDate);
 
   return dates;
 };
diff --git a/web/components/gantt-chart/views/hours-view.ts b/web/components/gantt-chart/views/hours-view.ts
index 246ecd8b8..0801b7bb1 100644
--- a/web/components/gantt-chart/views/hours-view.ts
+++ b/web/components/gantt-chart/views/hours-view.ts
@@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
   const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
   const weekStart = new Date(firstWeekStart);
 
-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
 
   return weekNumber;
 };
@@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
   return date.getDate();
 };
 
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
 
 export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
   const months = [];
@@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
     months.push(new Date(currentYear, currentMonth));
     currentDate.setMonth(currentDate.getMonth() + 1);
   }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    months.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);
 
   return months;
 };
@@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
       weekNumber: getWeekNumberByDate(date),
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
   return monthPayload;
 };
 
-export const generateMonthDataByYear = (
-  monthPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
   let renderState = monthPayload;
   const renderPayload: any = [];
 
@@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
diff --git a/web/components/gantt-chart/views/month-view.ts b/web/components/gantt-chart/views/month-view.ts
index db21e372b..fc145d69c 100644
--- a/web/components/gantt-chart/views/month-view.ts
+++ b/web/components/gantt-chart/views/month-view.ts
@@ -3,12 +3,7 @@ import { ChartDataType, IGanttBlock } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
 type GetAllDaysInMonthInMonthViewType = {
   date: any;
@@ -62,9 +57,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number): IMonthChild[
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       active: false,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -100,16 +93,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -124,16 +109,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -144,16 +121,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -191,10 +160,7 @@ export const getNumberOfDaysBetweenTwoDatesInMonth = (startDate: Date, endDate:
 };
 
 // calc item scroll position and width
-export const getMonthChartItemPositionWidthInMonth = (
-  chartData: ChartDataType,
-  itemData: IGanttBlock
-) => {
+export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType, itemData: IGanttBlock) => {
   let scrollPosition: number = 0;
   let scrollWidth: number = 0;
 
@@ -207,9 +173,7 @@ export const getMonthChartItemPositionWidthInMonth = (
 
   // position code starts
   const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
-  const positionDaysDifference: number = Math.abs(
-    Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24))
-  );
+  const positionDaysDifference: number = Math.abs(Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24)));
   scrollPosition = positionDaysDifference * chartData.data.width;
 
   var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
@@ -221,9 +185,7 @@ export const getMonthChartItemPositionWidthInMonth = (
 
   // width code starts
   const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
-  const widthDaysDifference: number = Math.abs(
-    Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24))
-  );
+  const widthDaysDifference: number = Math.abs(Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24)));
   scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
   // width code ends
 
diff --git a/web/components/gantt-chart/views/quater-view.ts b/web/components/gantt-chart/views/quater-view.ts
index 0714cb28a..ed25974a3 100644
--- a/web/components/gantt-chart/views/quater-view.ts
+++ b/web/components/gantt-chart/views/quater-view.ts
@@ -36,10 +36,7 @@ const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number)
   return weekPayload;
 };
 
-export const generateQuarterChart = (
-  quarterPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" | "right") => {
   let renderState = quarterPayload;
   const renderPayload: any = [];
 
diff --git a/web/components/gantt-chart/views/week-view.ts b/web/components/gantt-chart/views/week-view.ts
index 024b8d4e1..a65eb70b9 100644
--- a/web/components/gantt-chart/views/week-view.ts
+++ b/web/components/gantt-chart/views/week-view.ts
@@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
 type GetAllDaysInMonthInMonthViewType = {
   date: any;
@@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       active: false,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -72,16 +65,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -96,16 +81,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -116,16 +93,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
new file mode 100644
index 000000000..3f177cded
--- /dev/null
+++ b/web/components/headers/cycle-issues.tsx
@@ -0,0 +1,214 @@
+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";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
+// icons
+import { ArrowRight, Plus } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// 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,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    commandPalette: commandPaletteStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
+
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  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 cyclesList = cycleStore.projectCycles;
+  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <div className="relative w-full flex items-center z-10 h-[3.75rem] 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">
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Cycles"
+              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="component"
+              component={
+                <CustomMenu
+                  label={
+                    <>
+                      <ContrastIcon className="h-3 w-3" />
+                      {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+                    </>
+                  }
+                  className="ml-1.5 flex-shrink-0"
+                  width="auto"
+                  placement="bottom-start"
+                >
+                  {cyclesList?.map((cycle) => (
+                    <CustomMenu.MenuItem
+                      key={cycle.id}
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
+                    >
+                      {truncateText(cycle.name, 40)}
+                    </CustomMenu.MenuItem>
+                  ))}
+                </CustomMenu>
+              }
+            />
+          </Breadcrumbs>
+        </div>
+        <div className="flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={cycleIssueFilterStore.cycleFilters}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              members={projectMembers?.map((m) => m.member)}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <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={() => commandPaletteStore.toggleCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
+            Add Issue
+          </Button>
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            onClick={toggleSidebar}
+          >
+            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
new file mode 100644
index 000000000..471a2bc05
--- /dev/null
+++ b/web/components/headers/cycles.tsx
@@ -0,0 +1,61 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const CyclesHeader: FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Cycles"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <Button
+          variant="primary"
+          size="sm"
+          prependIcon={<Plus />}
+          onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
+        >
+          Add Cycle
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
new file mode 100644
index 000000000..52a60540f
--- /dev/null
+++ b/web/components/headers/global-issues.tsx
@@ -0,0 +1,173 @@
+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 { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
+// icons
+import { 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,
+    workspaceMember: { workspaceMembers },
+    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 z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                activeLayout === "spreadsheet" ? (
+                  <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                ) : (
+                  <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+                )
+              }
+              label={`Workspace ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
+            />
+          </Breadcrumbs>
+        </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" placement="bottom-end">
+                  <FilterSelection
+                    filters={storedFilters ?? {}}
+                    handleFiltersUpdate={handleFiltersUpdate}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    labels={workspaceStore.workspaceLabels ?? undefined}
+                    members={workspaceMembers?.map((m) => m.member) ?? undefined}
+                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  />
+                </FiltersDropdown>
+              )}
+
+              <FiltersDropdown title="Display" placement="bottom-end">
+                <DisplayFiltersSelection
+                  displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+                  displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+                  handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+                  handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                />
+              </FiltersDropdown>
+            </>
+          )}
+          <Button variant="primary" size="sm" 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..1a52dd4de
--- /dev/null
+++ b/web/components/headers/index.ts
@@ -0,0 +1,21 @@
+export * from "./cycle-issues";
+export * from "./global-issues";
+export * from "./module-issues";
+export * from "./project-inbox";
+export * from "./project-issues";
+export * from "./project-view-issues";
+export * from "./project-views";
+export * from "./workspace-analytics";
+export * from "./workspace-dashboard";
+export * from "./projects";
+export * from "./profile-preferences";
+export * from "./cycles";
+export * from "./modules-list";
+export * from "./project-settings";
+export * from "./workspace-settings";
+export * from "./pages";
+export * from "./project-draft-issues";
+export * from "./project-archived-issue-details";
+export * from "./project-archived-issues";
+export * from "./project-issue-details";
+export * from "./user-profile";
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
new file mode 100644
index 000000000..cea8093bf
--- /dev/null
+++ b/web/components/headers/module-issues.tsx
@@ -0,0 +1,213 @@
+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";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
+// icons
+import { ArrowRight, ContrastIcon, Plus } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// 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,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    commandPalette: commandPaletteStore,
+  } = useMobxStore();
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+  const { currentProjectDetails } = projectStore;
+
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  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 modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
+  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        moduleDetails={moduleDetails ?? undefined}
+      />
+      <div className="relative w-full flex items-center z-10 h-[3.75rem] 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">
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Modules"
+              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="component"
+              component={
+                <CustomMenu
+                  label={
+                    <>
+                      <ContrastIcon className="h-3 w-3" />
+                      {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
+                    </>
+                  }
+                  className="ml-1.5 flex-shrink-0"
+                  width="auto"
+                  placement="bottom-start"
+                >
+                  {modulesList?.map((module) => (
+                    <CustomMenu.MenuItem
+                      key={module.id}
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
+                    >
+                      {truncateText(module.name, 40)}
+                    </CustomMenu.MenuItem>
+                  ))}
+                </CustomMenu>
+              }
+            />
+          </Breadcrumbs>
+        </div>
+        <div className="flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={moduleFilterStore.moduleFilters}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              members={projectMembers?.map((m) => m.member)}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <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={() => commandPaletteStore.toggleCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
+            Add Issue
+          </Button>
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            onClick={toggleSidebar}
+          >
+            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
new file mode 100644
index 000000000..b1f1ce773
--- /dev/null
+++ b/web/components/headers/modules-list.tsx
@@ -0,0 +1,86 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// ui
+import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// constants
+import { MODULE_VIEW_LAYOUTS } from "constants/module";
+
+export const ModulesListHeader: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");
+
+  return (
+    <div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Modules"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+          {MODULE_VIEW_LAYOUTS.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 ${
+                  modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                }`}
+                onClick={() => setModulesView(layout.key)}
+              >
+                <layout.icon
+                  strokeWidth={2}
+                  className={`h-3.5 w-3.5 ${
+                    modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                  }`}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+        <Button
+          variant="primary"
+          size="sm"
+          prependIcon={<Plus />}
+          onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
+        >
+          Add Module
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
new file mode 100644
index 000000000..84681e768
--- /dev/null
+++ b/web/components/headers/page-details.tsx
@@ -0,0 +1,90 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { FileText, Plus } from "lucide-react";
+// services
+import { PageService } from "services/page.service";
+
+// constants
+import { PAGE_DETAILS } from "constants/fetch-keys";
+
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+import useSWR from "swr";
+
+export interface IPagesHeaderProps {
+  showButton?: boolean;
+}
+const pageService = new PageService();
+
+export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
+  const { showButton = false } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, pageId } = router.query;
+
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const { data: pageDetails } = useSWR(
+    workspaceSlug && currentProjectDetails?.id && pageId ? PAGE_DETAILS(pageId as string) : null,
+    workspaceSlug && currentProjectDetails?.id
+      ? () => pageService.getPageDetails(workspaceSlug as string, currentProjectDetails.id, pageId as string)
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label="Pages"
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label={pageDetails?.name ?? "Page"}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      {showButton && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => commandPaletteStore.toggleCreatePageModal(true)}
+          >
+            Create Page
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
new file mode 100644
index 000000000..7762458f2
--- /dev/null
+++ b/web/components/headers/pages.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { FileText, Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IPagesHeaderProps {
+  showButton?: boolean;
+}
+
+export const PagesHeader: FC<IPagesHeaderProps> = observer((props) => {
+  const { showButton = false } = props;
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label="Pages"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      {showButton && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => commandPaletteStore.toggleCreatePageModal(true)}
+          >
+            Create Page
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
new file mode 100644
index 000000000..78a651de5
--- /dev/null
+++ b/web/components/headers/profile-preferences.tsx
@@ -0,0 +1,14 @@
+// components
+import { Breadcrumbs } from "@plane/ui";
+
+export const ProfilePreferencesHeader = () => (
+  <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
+        </Breadcrumbs>
+      </div>
+    </div>
+  </div>
+);
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
new file mode 100644
index 000000000..3056934dc
--- /dev/null
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -0,0 +1,78 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+// services
+import { IssueArchiveService } from "services/issue";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+const issueArchiveService = new IssueArchiveService();
+
+export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, archivedIssueId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  const { data: issueDetails } = useSWR<IIssue | undefined>(
+    workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
+    workspaceSlug && projectId && archivedIssueId
+      ? () =>
+          issueArchiveService.retrieveArchivedIssue(
+            workspaceSlug as string,
+            projectId as string,
+            archivedIssueId as string
+          )
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Archived Issues"
+              link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={`${issueDetails?.project_detail.identifier}-${issueDetails?.sequence_id}` ?? "..."}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
new file mode 100644
index 000000000..4c2d9f354
--- /dev/null
+++ b/web/components/headers/project-archived-issues.tsx
@@ -0,0 +1,141 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// icons
+import { ArrowLeft } from "lucide-react";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+// types
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "types";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectArchivedIssuesHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    archivedIssueFilters: archivedIssueFiltersStore,
+    projectState: projectStateStore,
+  } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  // for archived issues list layout is the only option
+  const activeLayout = "list";
+
+  const handleFiltersUpdate = (key: keyof IIssueFilterOptions, value: string | string[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
+
+    if (Array.isArray(value)) {
+      value.forEach((val) => {
+        if (!newValues.includes(val)) newValues.push(val);
+      });
+    } else {
+      if (archivedIssueFiltersStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+      else newValues.push(value);
+    }
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        ...archivedIssueFiltersStore.userDisplayFilters,
+        ...updatedDisplayFilter,
+      },
+    });
+  };
+
+  const handleDisplayPropertiesUpdate = (property: Partial<IIssueDisplayProperties>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    archivedIssueFiltersStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+  };
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-14 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>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Archived Issues"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+
+      {/* filter options */}
+      <div className="flex items-center gap-2">
+        <FiltersDropdown title="Filters" placement="bottom-end">
+          <FilterSelection
+            filters={archivedIssueFiltersStore.userFilters}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectMembers?.map((m) => m.member)}
+            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="Display" placement="bottom-end">
+          <DisplayFiltersSelection
+            displayFilters={archivedIssueFiltersStore.userDisplayFilters}
+            displayProperties={archivedIssueFiltersStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
new file mode 100644
index 000000000..11c5d01ab
--- /dev/null
+++ b/web/components/headers/project-draft-issues.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectDraftIssueHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Draft Issues"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
new file mode 100644
index 000000000..15c067d66
--- /dev/null
+++ b/web/components/headers/project-inbox.tsx
@@ -0,0 +1,62 @@
+import { FC, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
+// components
+import { CreateInboxIssueModal } from "components/inbox";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectInboxHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+
+  const { project: projectStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Inbox Issues"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
+        <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => setCreateIssueModal(true)}>
+          Add Issue
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
new file mode 100644
index 000000000..6c89f7a09
--- /dev/null
+++ b/web/components/headers/project-issue-details.tsx
@@ -0,0 +1,72 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// services
+import { IssueService } from "services/issue";
+// constants
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+const issueService = new IssueService();
+
+export const ProjectIssueDetailsHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  const { data: issueDetails } = useSWR(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Issues"
+              link={`/${workspaceSlug}/projects/${projectId}/issues`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={`${issueDetails?.project_detail.identifier}-${issueDetails?.sequence_id}` ?? "..."}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
new file mode 100644
index 000000000..5b87b14c4
--- /dev/null
+++ b/web/components/headers/project-issues.tsx
@@ -0,0 +1,215 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react";
+// 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 { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    inbox: inboxStore,
+    commandPalette: commandPaletteStore,
+  } = 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 { currentProjectDetails } = projectStore;
+
+  const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
+
+  const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        projectDetails={currentProjectDetails ?? undefined}
+      />
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(currentProjectDetails.emoji)}
+                    </span>
+                  ) : currentProjectDetails?.icon_prop ? (
+                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                      {renderEmoji(currentProjectDetails.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
+                }
+                label={currentProjectDetails?.name ?? "Project"}
+                link={`/${workspaceSlug}/projects`}
+              />
+
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                label="Issues"
+              />
+            </Breadcrumbs>
+          </div>
+          {currentProjectDetails?.is_deployed && deployUrl && (
+            <a
+              href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
+              className="group bg-custom-primary-100/10 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+              Public
+              <ExternalLink className="h-3 w-3 hidden group-hover:block" strokeWidth={2} />
+            </a>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={issueFilterStore.userFilters}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              members={projectMembers?.map((m) => m.member)}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <DisplayFiltersSelection
+              displayFilters={issueFilterStore.userDisplayFilters}
+              displayProperties={issueFilterStore.userDisplayProperties}
+              handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+              handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+            />
+          </FiltersDropdown>
+          {projectId && inboxStore.isInboxEnabled && inboxDetails && (
+            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId.toString())}`}>
+              <a>
+                <Button variant="neutral-primary" size="sm" className="relative">
+                  Inbox
+                  {inboxDetails.pending_issue_count > 0 && (
+                    <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
+                      {inboxDetails.pending_issue_count}
+                    </span>
+                  )}
+                </Button>
+              </a>
+            </Link>
+          )}
+          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+            Analytics
+          </Button>
+          <Button onClick={() => commandPaletteStore.toggleCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
+            Add Issue
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
new file mode 100644
index 000000000..3dfb9da07
--- /dev/null
+++ b/web/components/headers/project-settings.tsx
@@ -0,0 +1,51 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+export interface IProjectSettingHeader {
+  title: string;
+}
+
+export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
+  const { title } = props;
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </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..7e899d851
--- /dev/null
+++ b/web/components/headers/project-view-issues.tsx
@@ -0,0 +1,185 @@
+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";
+// ui
+import { Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// 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,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    projectViews: projectViewsStore,
+  } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  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]
+  );
+
+  const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
+  const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
+
+  return (
+    <div className="relative w-full flex items-center z-10 h-[3.75rem] 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">
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            label={currentProjectDetails?.name ?? "Project"}
+            icon={
+              currentProjectDetails?.emoji ? (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                  {renderEmoji(currentProjectDetails.emoji)}
+                </span>
+              ) : currentProjectDetails?.icon_prop ? (
+                <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                  {renderEmoji(currentProjectDetails.icon_prop)}
+                </div>
+              ) : (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {currentProjectDetails?.name.charAt(0)}
+                </span>
+              )
+            }
+            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+            label="Views"
+            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="component"
+            component={
+              <CustomMenu
+                label={
+                  <>
+                    <PhotoFilterIcon height={12} width={12} />
+                    {viewDetails?.name && truncateText(viewDetails.name, 40)}
+                  </>
+                }
+                className="ml-1.5"
+                placement="bottom-start"
+              >
+                {viewsList?.map((view) => (
+                  <CustomMenu.MenuItem
+                    key={view.id}
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
+                  >
+                    {truncateText(view.name, 40)}
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu>
+            }
+          />
+        </Breadcrumbs>
+      </div>
+      <div className="flex items-center gap-2">
+        <LayoutSelection
+          layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+          onChange={(layout) => handleLayoutChange(layout)}
+          selectedLayout={activeLayout}
+        />
+        <FiltersDropdown title="Filters" placement="bottom-end">
+          <FilterSelection
+            filters={storedFilters ?? {}}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectMembers?.map((m) => m.member)}
+            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="Display" placement="bottom-end">
+          <DisplayFiltersSelection
+            displayFilters={issueFilterStore.userDisplayFilters}
+            displayProperties={issueFilterStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
new file mode 100644
index 000000000..66e320872
--- /dev/null
+++ b/web/components/headers/project-views.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateProjectViewModal } from "components/views";
+// components
+import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectViewsHeader: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateProjectViewModal
+          isOpen={createViewModal}
+          onClose={() => setCreateViewModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(currentProjectDetails.emoji)}
+                    </span>
+                  ) : currentProjectDetails?.icon_prop ? (
+                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                      {renderEmoji(currentProjectDetails.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
+                }
+                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+                label="Views"
+              />
+            </Breadcrumbs>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <div>
+            <Button
+              variant="primary"
+              size="sm"
+              prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
+              onClick={() => setCreateViewModal(true)}
+            >
+              Create View
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
new file mode 100644
index 000000000..0702ae22e
--- /dev/null
+++ b/web/components/headers/projects.tsx
@@ -0,0 +1,50 @@
+import { useRouter } from "next/router";
+import { Search, Plus, Briefcase } from "lucide-react";
+// ui
+import { Breadcrumbs, Button } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+export const ProjectsHeader = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // store
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+
+  const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
+              label="Projects"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        {projectsList?.length > 0 && (
+          <div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+            <Search className="h-3.5 w-3.5" />
+            <input
+              className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+              value={projectStore.searchQuery}
+              onChange={(e) => projectStore.setSearchQuery(e.target.value)}
+              placeholder="Search"
+            />
+          </div>
+        )}
+
+        <Button prependIcon={<Plus />} size="sm" onClick={() => commandPaletteStore.toggleCreateProjectModal(true)}>
+          Add Project
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
new file mode 100644
index 000000000..1883e631f
--- /dev/null
+++ b/web/components/headers/user-profile.tsx
@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+import { UserCircle2 } from "lucide-react";
+// hooks
+import { observer } from "mobx-react-lite";
+
+export interface IUserProfileHeader {
+  title: string;
+}
+
+export const UserProfileHeader: FC<IUserProfileHeader> = observer((props) => {
+  const { title } = props;
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label="Profile"
+              icon={<UserCircle2 className="h-4 w-4 text-custom-text-300" />}
+              link={`/${workspaceSlug}/me/profile`}
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
new file mode 100644
index 000000000..e25fc6d5b
--- /dev/null
+++ b/web/components/headers/workspace-analytics.tsx
@@ -0,0 +1,37 @@
+import { useRouter } from "next/router";
+import { ArrowLeft, BarChart2 } from "lucide-react";
+// ui
+import { Breadcrumbs } from "@plane/ui";
+
+export const WorkspaceAnalyticsHeader = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
+                label="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..76bd6bc30
--- /dev/null
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -0,0 +1,60 @@
+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";
+import { Breadcrumbs } from "@plane/ui";
+
+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 h-[3.75rem] 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 whitespace-nowrap overflow-ellipsis">
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />}
+                label="Dashboard"
+              />
+            </Breadcrumbs>
+          </div>
+        </div>
+        <div className="flex items-center gap-3 px-3">
+          <a
+            href="https://plane.so/changelog"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded flex-shrink-0"
+          >
+            <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
+            {"What's New?"}
+          </a>
+          <a
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded flex-shrink-0"
+            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/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
new file mode 100644
index 000000000..aff8925fd
--- /dev/null
+++ b/web/components/headers/workspace-settings.tsx
@@ -0,0 +1,39 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+import { Settings } from "lucide-react";
+
+// hooks
+import { observer } from "mobx-react-lite";
+
+export interface IWorkspaceSettingHeader {
+  title: string;
+}
+
+export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
+  const { title } = props;
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] 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>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label="Settings"
+              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+              link={`/${workspaceSlug}/settings`}
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+          </Breadcrumbs>
+        </div>
+      </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/icons/completed-cycle-icon.tsx b/web/components/icons/completed-cycle-icon.tsx
index 77d30b24b..d16009ad7 100644
--- a/web/components/icons/completed-cycle-icon.tsx
+++ b/web/components/icons/completed-cycle-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const CompletedCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const CompletedCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
     <path
       d="m21.65 36.6-6.9-6.85 2.1-2.1 4.8 4.7 9.2-9.2 2.1 2.15ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
diff --git a/web/components/icons/current-cycle-icon.tsx b/web/components/icons/current-cycle-icon.tsx
index 57b376780..c4cc42014 100644
--- a/web/components/icons/current-cycle-icon.tsx
+++ b/web/components/icons/current-cycle-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const CurrentCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const CurrentCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
     <path
       d="M15.3 28.3q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.85 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.5 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
diff --git a/web/components/icons/document-icon.tsx b/web/components/icons/document-icon.tsx
index b84dd4c39..8b62a5972 100644
--- a/web/components/icons/document-icon.tsx
+++ b/web/components/icons/document-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const DocumentIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/external-link-icon.tsx b/web/components/icons/external-link-icon.tsx
index 1782880b1..358a34f6c 100644
--- a/web/components/icons/external-link-icon.tsx
+++ b/web/components/icons/external-link-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const ExternalLinkIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const ExternalLinkIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/index.ts b/web/components/icons/index.ts
index bf3e94332..5add33fe6 100644
--- a/web/components/icons/index.ts
+++ b/web/components/icons/index.ts
@@ -84,4 +84,4 @@ export * from "./clock-icon";
 export * from "./bell-icon";
 export * from "./single-comment-icon";
 export * from "./related-icon";
-export * from "./module-icon";
\ No newline at end of file
+export * from "./module-icon";
diff --git a/web/components/icons/module-icon.tsx b/web/components/icons/module-icon.tsx
index dbe58eb53..9ac0d076b 100644
--- a/web/components/icons/module-icon.tsx
+++ b/web/components/icons/module-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const ModuleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "#F15B5B",
-}) => (
+export const ModuleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "#F15B5B" }) => (
   <svg
     width={width}
     height={height}
@@ -19,41 +14,41 @@ export const ModuleIcon: React.FC<Props> = ({
     <path
       d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z"
       stroke="#F15B5B"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M5.84925 4.66667H4.81221C4.73039 4.66667 4.66406 4.733 4.66406 4.81482V5.85185C4.66406 5.93367 4.73039 6 4.81221 6H5.84925C5.93107 6 5.9974 5.93367 5.9974 5.85185V4.81482C5.9974 4.733 5.93107 4.66667 5.84925 4.66667Z"
       fill={color}
       stroke="#F15B5B"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M5.84925 10H4.81221C4.73039 10 4.66406 10.0663 4.66406 10.1481V11.1852C4.66406 11.267 4.73039 11.3333 4.81221 11.3333H5.84925C5.93107 11.3333 5.9974 11.267 5.9974 11.1852V10.1481C5.9974 10.0663 5.93107 10 5.84925 10Z"
       fill={color}
       stroke="#F15B5B"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M11.1852 4.66667H10.1481C10.0663 4.66667 10 4.733 10 4.81482V5.85185C10 5.93367 10.0663 6 10.1481 6H11.1852C11.267 6 11.3333 5.93367 11.3333 5.85185V4.81482C11.3333 4.733 11.267 4.66667 11.1852 4.66667Z"
       fill={color}
       stroke="#F15B5B"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M11.1852 10H10.1481C10.0663 10 10 10.0663 10 10.1481V11.1852C10 11.267 10.0663 11.3333 10.1481 11.3333H11.1852C11.267 11.3333 11.3333 11.267 11.3333 11.1852V10.1481C11.3333 10.0663 11.267 10 11.1852 10Z"
       fill={color}
       stroke="#F15B5B"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
diff --git a/web/components/icons/module/cancelled.tsx b/web/components/icons/module/cancelled.tsx
index 6ea5fd694..f93017b29 100644
--- a/web/components/icons/module/cancelled.tsx
+++ b/web/components/icons/module/cancelled.tsx
@@ -7,11 +7,7 @@ type Props = {
   color?: string;
 };
 
-export const ModuleCancelledIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCancelledIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/module/completed.tsx b/web/components/icons/module/completed.tsx
index 4c50ed3ad..5396ce244 100644
--- a/web/components/icons/module/completed.tsx
+++ b/web/components/icons/module/completed.tsx
@@ -7,11 +7,7 @@ type Props = {
   color?: string;
 };
 
-export const ModuleCompletedIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCompletedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/module/in-progress.tsx b/web/components/icons/module/in-progress.tsx
index 5892a94d6..3279228dd 100644
--- a/web/components/icons/module/in-progress.tsx
+++ b/web/components/icons/module/in-progress.tsx
@@ -7,11 +7,7 @@ type Props = {
   color?: string;
 };
 
-export const ModuleInProgressIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleInProgressIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
   <svg
     width={width}
     height={height}
@@ -23,10 +19,7 @@ export const ModuleInProgressIcon: React.FC<Props> = ({
       <g id="Layer_1-2" data-name="Layer 1">
         <path fill="#f7b964" d="M0,111.14c.63.7.21,1.53.3,2.29-.07.26-.17.28-.3,0Z" />
         <path fill="#f6ab3e" d="M0,119.46a3.11,3.11,0,0,1,.3,2q-.19.33-.3,0Z" />
-        <path
-          fill="#facf96"
-          d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z"
-        />
+        <path fill="#facf96" d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z" />
         <path fill="#f5a939" d="M0,113.47l.3,0a2.39,2.39,0,0,1-.3,1.71Z" />
         <path fill="#f8ba67" d="M.27,123.16a.63.63,0,0,1-.27,0v-1.66l.3,0Z" />
         <path
diff --git a/web/components/icons/module/module-status-icon.tsx b/web/components/icons/module/module-status-icon.tsx
index e80497773..303d0f765 100644
--- a/web/components/icons/module/module-status-icon.tsx
+++ b/web/components/icons/module/module-status-icon.tsx
@@ -17,21 +17,12 @@ type Props = {
   width?: string;
 };
 
-export const ModuleStatusIcon: React.FC<Props> = ({
-  status,
-  className,
-  height = "12px",
-  width = "12px",
-}) => {
-  if (status === "backlog")
-    return <ModuleBacklogIcon className={className} height={height} width={width} />;
-  else if (status === "cancelled")
-    return <ModuleCancelledIcon className={className} height={height} width={width} />;
-  else if (status === "completed")
-    return <ModuleCompletedIcon className={className} height={height} width={width} />;
+export const ModuleStatusIcon: React.FC<Props> = ({ status, className, height = "12px", width = "12px" }) => {
+  if (status === "backlog") return <ModuleBacklogIcon className={className} height={height} width={width} />;
+  else if (status === "cancelled") return <ModuleCancelledIcon className={className} height={height} width={width} />;
+  else if (status === "completed") return <ModuleCompletedIcon className={className} height={height} width={width} />;
   else if (status === "in-progress")
     return <ModuleInProgressIcon className={className} height={height} width={width} />;
-  else if (status === "paused")
-    return <ModulePausedIcon className={className} height={height} width={width} />;
+  else if (status === "paused") return <ModulePausedIcon className={className} height={height} width={width} />;
   else return <ModulePlannedIcon className={className} height={height} width={width} />;
 };
diff --git a/web/components/icons/pencil-scribble-icon.tsx b/web/components/icons/pencil-scribble-icon.tsx
index 561a5bcc3..4d7489049 100644
--- a/web/components/icons/pencil-scribble-icon.tsx
+++ b/web/components/icons/pencil-scribble-icon.tsx
@@ -2,19 +2,8 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const PencilScribbleIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#000000",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 96 960 960"
-  >
+export const PencilScribbleIcon: React.FC<Props> = ({ width = "20", height = "20", className, color = "#000000" }) => (
+  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
     <path
       d="M560 936q-12 0-21-9t-9-21q0-13 9-21.5t21-8.5q59 0 99.5-24t40.5-56q0-23-29.5-45T591 717l47-47q63 19 92.5 52.5T760 796q0 67-61 103.5T560 936ZM240 642q-64-14-92-44t-28-62q0-35 26-63t120-62q66-24 85-39t19-35q0-25-22-43t-68-18q-27 0-46 7t-34 22q-8 8-20.5 9.5T157 308q-11-8-11.5-20t7.5-21q17-22 51-36.5t76-14.5q68 0 109 32.5t41 88.5q0 41-28.5 69.5T290 466q-67 25-88.5 39.5T180 536q0 16 27 30.5t81 27.5l-48 48Zm496-154L608 360l45-45q18-18 40-18t40 18l48 48q18 18 18 40t-18 40l-45 45ZM220 876h42l345-345-42-42-345 345v42Zm-60 60V808l405-405 128 128-405 405H160Zm405-447 42 42-42-42Z"
       fill={color}
diff --git a/web/components/icons/question-mark-circle-icon.tsx b/web/components/icons/question-mark-circle-icon.tsx
index f4abd903f..cd41cf8cc 100644
--- a/web/components/icons/question-mark-circle-icon.tsx
+++ b/web/components/icons/question-mark-circle-icon.tsx
@@ -2,11 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const QuestionMarkCircleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
+export const QuestionMarkCircleIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/single-comment-icon.tsx b/web/components/icons/single-comment-icon.tsx
index b770124a1..247e78b9e 100644
--- a/web/components/icons/single-comment-icon.tsx
+++ b/web/components/icons/single-comment-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const SingleCommentCard: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const SingleCommentCard: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/tag-icon.tsx b/web/components/icons/tag-icon.tsx
index d907aabce..d0d69dc4b 100644
--- a/web/components/icons/tag-icon.tsx
+++ b/web/components/icons/tag-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const TagIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const TagIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/triangle-exclamation-icon.tsx b/web/components/icons/triangle-exclamation-icon.tsx
index acf986021..52409b720 100644
--- a/web/components/icons/triangle-exclamation-icon.tsx
+++ b/web/components/icons/triangle-exclamation-icon.tsx
@@ -2,11 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const TriangleExclamationIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
+export const TriangleExclamationIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/icons/upcoming-cycle-icon.tsx b/web/components/icons/upcoming-cycle-icon.tsx
index e9bad7a42..616094f74 100644
--- a/web/components/icons/upcoming-cycle-icon.tsx
+++ b/web/components/icons/upcoming-cycle-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const UpcomingCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const UpcomingCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
     <path
       d="M28.3 44v-3H39V19.5H9v11H6V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9ZM16 47.3l-2.1-2.1 5.65-5.7H2.5v-3h17.05l-5.65-5.7 2.1-2.1 9.3 9.3ZM9 16.5h30V10H9Zm0 0V10v6.5Z"
diff --git a/web/components/icons/user-group-icon.tsx b/web/components/icons/user-group-icon.tsx
index 3cbac8a38..43141b594 100644
--- a/web/components/icons/user-group-icon.tsx
+++ b/web/components/icons/user-group-icon.tsx
@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const UserGroupIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const UserGroupIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
   <svg
     width={width}
     height={height}
diff --git a/web/components/inbox/inbox-action-headers.tsx b/web/components/inbox/actions-header.tsx
similarity index 51%
rename from web/components/inbox/inbox-action-headers.tsx
rename to web/components/inbox/actions-header.tsx
index 86bc15d01..be077df5c 100644
--- a/web/components/inbox/inbox-action-headers.tsx
+++ b/web/components/inbox/actions-header.tsx
@@ -1,47 +1,29 @@
 import { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-datepicker
+import { observer } from "mobx-react-lite";
 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";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
-import useInboxView from "hooks/use-inbox-view";
-import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // components
 import {
   AcceptIssueModal,
   DeclineIssueModal,
-  DeleteIssueModal,
+  DeleteInboxIssueModal,
   FiltersDropdown,
   SelectDuplicateInboxIssueModal,
 } from "components/inbox";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
-import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons";
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CheckCircleIcon,
-  ClockIcon,
-  XCircleIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react";
 // types
-import type { IInboxIssueDetail, TInboxStatus } from "types";
-// fetch-keys
-import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys";
+import type { TInboxStatus } from "types";
 
-export const InboxActionHeader = () => {
+export const InboxActionsHeader = observer(() => {
   const [date, setDate] = useState(new Date());
   const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
   const [acceptIssueModal, setAcceptIssueModal] = useState(false);
@@ -51,44 +33,24 @@ export const InboxActionHeader = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
 
-  const { user } = useUserAuth();
-  const { memberRole } = useProjectMyMembership();
-  const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView();
+  const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const userRole = userStore.currentProjectRole;
+  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null;
+
   const { setToastAlert } = useToast();
 
   const markInboxStatus = async (data: TInboxStatus) => {
-    if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return;
+    if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return;
 
-    mutate<IInboxIssueDetail>(
-      INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          issue_inbox: [{ ...prevData.issue_inbox[0], ...data }],
-        };
-      },
-      false
-    );
-    mutateInboxIssues(
-      (prevData: any) =>
-        (prevData ?? []).map((i: any) =>
-          i.bridge_id === inboxIssueId
-            ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
-            : i
-        ),
-      false
-    );
-
-    await inboxServices
-      .markInboxStatus(
+    await inboxIssueDetailsStore
+      .updateIssueStatus(
         workspaceSlug.toString(),
         projectId.toString(),
         inboxId.toString(),
-        inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!,
-        data,
-        user
+        issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!,
+        data
       )
       .catch(() =>
         setToastAlert({
@@ -96,16 +58,11 @@ export const InboxActionHeader = () => {
           title: "Error!",
           message: "Something went wrong while updating inbox status. Please try again.",
         })
-      )
-      .finally(() => {
-        mutate(INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string));
-        mutateInboxIssues();
-      });
+      );
   };
 
-  const issue = inboxIssues?.find((issue) => issue.bridge_id === inboxIssueId);
-  const currentIssueIndex =
-    inboxIssues?.findIndex((issue) => issue.bridge_id === inboxIssueId) ?? 0;
+  const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId);
+  const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;
 
   useEffect(() => {
     if (!issue?.issue_inbox[0].snoozed_till) return;
@@ -114,7 +71,7 @@ export const InboxActionHeader = () => {
   }, [issue]);
 
   const issueStatus = issue?.issue_inbox[0].status;
-  const isAllowed = memberRole.isMember || memberRole.isOwner;
+  const isAllowed = userRole === 15 || userRole === 20;
 
   const today = new Date();
   const tomorrow = new Date(today);
@@ -123,49 +80,46 @@ export const InboxActionHeader = () => {
 
   return (
     <>
-      <SelectDuplicateInboxIssueModal
-        isOpen={selectDuplicateIssue}
-        onClose={() => setSelectDuplicateIssue(false)}
-        value={
-          inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0]
-            .duplicate_to
-        }
-        onSubmit={(dupIssueId: string) => {
-          markInboxStatus({
-            status: 2,
-            duplicate_to: dupIssueId,
-          }).finally(() => setSelectDuplicateIssue(false));
-        }}
-      />
-      <AcceptIssueModal
-        isOpen={acceptIssueModal}
-        handleClose={() => setAcceptIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
-        onSubmit={async () => {
-          await markInboxStatus({
-            status: 1,
-          }).finally(() => setAcceptIssueModal(false));
-        }}
-      />
-      <DeclineIssueModal
-        isOpen={declineIssueModal}
-        handleClose={() => setDeclineIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
-        onSubmit={async () => {
-          await markInboxStatus({
-            status: -1,
-          }).finally(() => setDeclineIssueModal(false));
-        }}
-      />
-      <DeleteIssueModal
-        isOpen={deleteIssueModal}
-        handleClose={() => setDeleteIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
-      />
+      {issue && (
+        <>
+          <SelectDuplicateInboxIssueModal
+            isOpen={selectDuplicateIssue}
+            onClose={() => setSelectDuplicateIssue(false)}
+            value={issue?.issue_inbox[0].duplicate_to}
+            onSubmit={(dupIssueId) => {
+              markInboxStatus({
+                status: 2,
+                duplicate_to: dupIssueId,
+              }).finally(() => setSelectDuplicateIssue(false));
+            }}
+          />
+          <AcceptIssueModal
+            data={issue}
+            isOpen={acceptIssueModal}
+            onClose={() => setAcceptIssueModal(false)}
+            onSubmit={async () => {
+              await markInboxStatus({
+                status: 1,
+              }).finally(() => setAcceptIssueModal(false));
+            }}
+          />
+          <DeclineIssueModal
+            data={issue}
+            isOpen={declineIssueModal}
+            onClose={() => setDeclineIssueModal(false)}
+            onSubmit={async () => {
+              await markInboxStatus({
+                status: -1,
+              }).finally(() => setDeclineIssueModal(false));
+            }}
+          />
+          <DeleteInboxIssueModal data={issue} isOpen={deleteIssueModal} onClose={() => setDeleteIssueModal(false)} />
+        </>
+      )}
       <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">
           <div className="flex items-center gap-2">
-            <InboxIcon className="h-4 w-4 text-custom-text-200" />
+            <Inbox className="text-custom-text-200" size={16} strokeWidth={2} />
             <h3 className="font-medium">Inbox</h3>
           </div>
           <FiltersDropdown />
@@ -181,7 +135,7 @@ export const InboxActionHeader = () => {
                   document.dispatchEvent(e);
                 }}
               >
-                <ChevronUpIcon className="h-3.5 w-3.5" />
+                <ChevronUp size={14} strokeWidth={2} />
               </button>
               <button
                 type="button"
@@ -191,10 +145,10 @@ export const InboxActionHeader = () => {
                   document.dispatchEvent(e);
                 }}
               >
-                <ChevronDownIcon className="h-3.5 w-3.5" />
+                <ChevronDown size={14} strokeWidth={2} />
               </button>
               <div className="text-sm">
-                {currentIssueIndex + 1}/{inboxIssues?.length ?? 0}
+                {currentIssueIndex + 1}/{issuesList?.length ?? 0}
               </div>
             </div>
             <div className="flex items-center gap-3 flex-wrap">
@@ -202,12 +156,11 @@ 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={<Clock size={14} strokeWidth={2} />} 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">
+                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md bg-custom-background-100 shadow-lg">
                       {({ close }) => (
                         <div className="w-full h-full flex flex-col gap-y-1">
                           <DatePicker
@@ -220,8 +173,8 @@ export const InboxActionHeader = () => {
                             minDate={tomorrow}
                             inline
                           />
-                          <PrimaryButton
-                            className="ml-auto"
+                          <Button
+                            variant="primary"
                             onClick={() => {
                               close();
                               markInboxStatus({
@@ -231,7 +184,7 @@ export const InboxActionHeader = () => {
                             }}
                           >
                             Snooze
-                          </PrimaryButton>
+                          </Button>
                         </div>
                       )}
                     </Popover.Panel>
@@ -240,50 +193,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={<FileStack size={14} strokeWidth={2} />}
                     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={<CheckCircle2 className="text-green-500" size={14} strokeWidth={2} />}
                     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={<XCircle className="text-red-500" size={14} strokeWidth={2} />}
                     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={<Trash2 className="text-red-500" size={14} strokeWidth={2} />}
                     onClick={() => setDeleteIssueModal(true)}
                   >
-                    <TrashIcon className="h-4 w-4 text-red-500" />
-                    <span>Delete</span>
-                  </SecondaryButton>
+                    Delete
+                  </Button>
                 </div>
               )}
             </div>
@@ -292,4 +245,4 @@ export const InboxActionHeader = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx
index 9220db899..dc5e627a8 100644
--- a/web/components/inbox/filters-dropdown.tsx
+++ b/web/components/inbox/filters-dropdown.tsx
@@ -1,34 +1,53 @@
-// hooks
-import useInboxView from "hooks/use-inbox-view";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
-import { PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
+// types
+import { IInboxFilterOptions } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 import { INBOX_STATUS } from "constants/inbox";
 
-export const FiltersDropdown: React.FC = () => {
-  const { filters, setFilters, filtersLength } = useInboxView();
+export const FiltersDropdown: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+
+  const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
+
+  let filtersLength = 0;
+  Object.keys(filters ?? {}).forEach((key) => {
+    const filterKey = key as keyof IInboxFilterOptions;
+
+    if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
+  });
 
   return (
     <div className="relative">
       <MultiLevelDropdown
         label="Filters"
         onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
+          if (!workspaceSlug || !projectId || !inboxId) return;
 
-          const valueExists = (filters[key] as any[])?.includes(option.value);
+          const key = option.key as keyof IInboxFilterOptions;
+          const currentValue: any[] = filters?.[key] ?? [];
 
-          if (valueExists) {
-            setFilters({
-              [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
+          const valueExists = currentValue.includes(option.value);
+
+          if (valueExists)
+            inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
+              [option.key]: currentValue.filter((val) => val !== option.value),
             });
-          } else {
-            setFilters({
-              [option.key]: [...((filters[key] ?? []) as any[]), option.value],
+          else
+            inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
+              [option.key]: [...currentValue, option.value],
             });
-          }
         }}
         direction="right"
         height="rg"
@@ -76,4 +95,4 @@ export const FiltersDropdown: React.FC = () => {
       )}
     </div>
   );
-};
+});
diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx
index 7d07fb8d4..2f70db99d 100644
--- a/web/components/inbox/filters-list.tsx
+++ b/web/components/inbox/filters-list.tsx
@@ -1,34 +1,69 @@
-// hooks
-import useInboxView from "hooks/use-inbox-view";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon } from "components/icons";
+import { X } from "lucide-react";
+import { PriorityIcon } from "@plane/ui";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { TIssuePriorities } from "types";
+import { IInboxFilterOptions, TIssuePriorities } from "types";
 // constants
 import { INBOX_STATUS } from "constants/inbox";
 
-export const InboxFiltersList = () => {
-  const { filters, setFilters, clearAllFilters, filtersLength } = useInboxView();
+export const InboxFiltersList = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
 
-  if (filtersLength <= 0) return <></>;
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+
+  const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
+
+  const handleUpdateFilter = (filter: Partial<IInboxFilterOptions>) => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter);
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    const newFilters: IInboxFilterOptions = {};
+    Object.keys(filters ?? {}).forEach((key) => {
+      newFilters[key as keyof IInboxFilterOptions] = null;
+    });
+
+    inboxFiltersStore.updateInboxFilters(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      inboxId.toString(),
+      newFilters
+    );
+  };
+
+  let filtersLength = 0;
+  Object.keys(filters ?? {}).forEach((key) => {
+    const filterKey = key as keyof IInboxFilterOptions;
+
+    if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
+  });
+
+  if (!filters || filtersLength <= 0) return null;
 
   return (
     <div className="flex items-center gap-2 flex-wrap text-[0.65rem] p-3">
       {Object.keys(filters).map((key) => {
-        const filterKey = key as keyof typeof filters;
+        const filterKey = key as keyof IInboxFilterOptions;
 
-        if (filters[filterKey] !== null)
+        if (filters[filterKey])
           return (
             <div
               key={key}
               className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
             >
-              <span className="capitalize text-custom-text-200">
-                {replaceUnderscoreIfSnakeCase(key)}:
-              </span>
+              <span className="capitalize text-custom-text-200">{replaceUnderscoreIfSnakeCase(key)}:</span>
               {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
                 <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
               ) : (
@@ -57,24 +92,24 @@ export const InboxFiltersList = () => {
                             type="button"
                             className="cursor-pointer"
                             onClick={() =>
-                              setFilters({
+                              handleUpdateFilter({
                                 priority: filters.priority?.filter((p) => p !== priority),
                               })
                             }
                           >
-                            <XMarkIcon className="h-3 w-3" />
+                            <X className="h-3 w-3" />
                           </button>
                         </div>
                       ))}
                       <button
                         type="button"
                         onClick={() =>
-                          setFilters({
+                          handleUpdateFilter({
                             priority: null,
                           })
                         }
                       >
-                        <XMarkIcon className="h-3 w-3" />
+                        <X className="h-3 w-3" />
                       </button>
                     </div>
                   ) : filterKey === "inbox_status" ? (
@@ -89,24 +124,24 @@ export const InboxFiltersList = () => {
                             type="button"
                             className="cursor-pointer"
                             onClick={() =>
-                              setFilters({
+                              handleUpdateFilter({
                                 inbox_status: filters.inbox_status?.filter((p) => p !== status),
                               })
                             }
                           >
-                            <XMarkIcon className="h-3 w-3" />
+                            <X className="h-3 w-3" />
                           </button>
                         </div>
                       ))}
                       <button
                         type="button"
                         onClick={() =>
-                          setFilters({
+                          handleUpdateFilter({
                             inbox_status: null,
                           })
                         }
                       >
-                        <XMarkIcon className="h-3 w-3" />
+                        <X className="h-3 w-3" />
                       </button>
                     </div>
                   ) : (
@@ -119,12 +154,12 @@ export const InboxFiltersList = () => {
       })}
       <button
         type="button"
-        onClick={clearAllFilters}
+        onClick={handleClearAllFilters}
         className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
       >
         <span>Clear all</span>
-        <XMarkIcon className="h-3 w-3" />
+        <X className="h-3 w-3" />
       </button>
     </div>
   );
-};
+});
diff --git a/web/components/inbox/index.ts b/web/components/inbox/index.ts
index 8301d2570..ef1a9e92d 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 "./actions-header";
 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 55%
rename from web/components/inbox/inbox-issue-activity.tsx
rename to web/components/inbox/issue-activity.tsx
index dfcbf0262..61102f865 100644
--- a/web/components/inbox/inbox-issue-activity.tsx
+++ b/web/components/inbox/issue-activity.tsx
@@ -1,13 +1,13 @@
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
 // types
 import { IIssue, IIssueComment } from "types";
@@ -16,70 +16,50 @@ import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 type Props = { issueDetails: IIssue };
 
-export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
+// services
+const issueService = new IssueService();
+const issueCommentService = new IssueCommentService();
+
+export const InboxIssueActivity: React.FC<Props> = observer(({ issueDetails }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
 
+  const { user: userStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
-  const { user } = useUser();
-
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && projectId && inboxIssueId
-      ? PROJECT_ISSUES_ACTIVITY(inboxIssueId.toString())
-      : null,
-    workspaceSlug && projectId && inboxIssueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxIssueId.toString()
-          )
+    workspaceSlug && projectId && issueDetails ? PROJECT_ISSUES_ACTIVITY(issueDetails.id) : null,
+    workspaceSlug && projectId && issueDetails
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueDetails.id)
       : null
   );
 
-  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
-    if (!workspaceSlug || !projectId || !inboxIssueId) return;
+  const user = userStore.currentUser;
 
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        commentId,
-        data,
-        user
-      )
+  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
+    if (!workspaceSlug || !projectId || !inboxIssueId || !user) return;
+
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, data, user)
       .then(() => mutateIssueActivity());
   };
 
   const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !inboxIssueId) return;
+    if (!workspaceSlug || !projectId || !inboxIssueId || !user) return;
 
     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;
+    if (!workspaceSlug || !issueDetails || !user) 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));
       })
@@ -103,4 +83,4 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
       <AddComment onSubmit={handleAddComment} />
     </div>
   );
-};
+});
diff --git a/web/components/inbox/inbox-issue-card.tsx b/web/components/inbox/issue-card.tsx
similarity index 73%
rename from web/components/inbox/inbox-issue-card.tsx
rename to web/components/inbox/issue-card.tsx
index f23a4ca6e..56f6b6dcc 100644
--- a/web/components/inbox/inbox-issue-card.tsx
+++ b/web/components/inbox/issue-card.tsx
@@ -2,21 +2,13 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip, PriorityIcon } from "@plane/ui";
 // icons
-import { PriorityIcon } from "components/icons";
-import {
-  CalendarDaysIcon,
-  CheckCircleIcon,
-  ClockIcon,
-  DocumentDuplicateIcon,
-  ExclamationTriangleIcon,
-  XCircleIcon,
-} from "@heroicons/react/24/outline";
+import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import type { IInboxIssue } from "types";
+import { IInboxIssue } from "types";
 // constants
 import { INBOX_STATUS } from "constants/inbox";
 
@@ -34,9 +26,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.issue_inbox[0].id}`}>
       <a>
         <div
           id={issue.id}
@@ -55,17 +45,17 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               <div
                 className={`grid h-6 w-6 place-items-center rounded border items-center shadow-sm ${
                   issue.priority === "urgent"
-                    ? "border-red-500/20 bg-red-500/20 text-red-500"
+                    ? "border-red-500/20 bg-red-500/20"
                     : issue.priority === "high"
-                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    ? "border-orange-500/20 bg-orange-500/20"
                     : issue.priority === "medium"
-                    ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                    ? "border-yellow-500/20 bg-yellow-500/20"
                     : issue.priority === "low"
-                    ? "border-green-500/20 bg-green-500/20 text-green-500"
+                    ? "border-green-500/20 bg-green-500/20"
                     : "border-custom-border-200"
                 }`}
               >
-                <PriorityIcon priority={issue.priority ?? null} className="text-sm" />
+                <PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
               </div>
             </Tooltip>
             <Tooltip
@@ -73,7 +63,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
               <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
-                <CalendarDaysIcon className="h-3.5 w-3.5" />
+                <CalendarDays size={12} strokeWidth={1.5} />
                 <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
             </Tooltip>
@@ -87,31 +77,29 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
           >
             {issueStatus === -2 ? (
               <>
-                <ExclamationTriangleIcon className="h-3.5 w-3.5" />
+                <AlertTriangle size={14} strokeWidth={2} />
                 <span>Pending</span>
               </>
             ) : issueStatus === -1 ? (
               <>
-                <XCircleIcon className="h-3.5 w-3.5" />
+                <XCircle size={14} strokeWidth={2} />
                 <span>Declined</span>
               </>
             ) : issueStatus === 0 ? (
               <>
-                <ClockIcon className="h-3.5 w-3.5" />
+                <Clock size={14} strokeWidth={2} />
                 <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 ? (
               <>
-                <CheckCircleIcon className="h-3.5 w-3.5" />
+                <CheckCircle2 size={14} strokeWidth={2} />
                 <span>Accepted</span>
               </>
             ) : (
               <>
-                <DocumentDuplicateIcon className="h-3.5 w-3.5" />
+                <Copy size={14} strokeWidth={2} />
                 <span>Duplicate</span>
               </>
             )}
diff --git a/web/components/inbox/issues-list-sidebar.tsx b/web/components/inbox/issues-list-sidebar.tsx
index 5f0fd116a..305f4980e 100644
--- a/web/components/inbox/issues-list-sidebar.tsx
+++ b/web/components/inbox/issues-list-sidebar.tsx
@@ -1,36 +1,35 @@
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 
-// hooks
-import useInboxView from "hooks/use-inbox-view";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { InboxIssueCard, InboxFiltersList } from "components/inbox";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 
-export const IssuesListSidebar = () => {
+export const InboxIssuesListSidebar = observer(() => {
   const router = useRouter();
-  const { inboxIssueId } = router.query;
+  const { inboxId, inboxIssueId } = router.query;
 
-  const { issues: inboxIssues, filtersLength } = useInboxView();
+  const { inboxIssues: inboxIssuesStore } = useMobxStore();
+
+  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
       <InboxFiltersList />
-      {inboxIssues ? (
-        inboxIssues.length > 0 ? (
+      {issuesList ? (
+        issuesList.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}
-              />
+            {issuesList.map((issue) => (
+              <InboxIssueCard key={issue.id} active={issue.issue_inbox[0].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."}
+            {/* TODO: add filtersLength logic here */}
+            {/* {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} */}
           </div>
         )
       ) : (
@@ -43,4 +42,4 @@ export const IssuesListSidebar = () => {
       )}
     </div>
   );
-};
+});
diff --git a/web/components/inbox/inbox-main-content.tsx b/web/components/inbox/main-content.tsx
similarity index 58%
rename from web/components/inbox/inbox-main-content.tsx
rename to web/components/inbox/main-content.tsx
index 6c0960729..02ead34cb 100644
--- a/web/components/inbox/inbox-main-content.tsx
+++ b/web/components/inbox/main-content.tsx
@@ -1,69 +1,49 @@
 import { useCallback, useEffect } from "react";
-
 import Router, { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react hook form
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 import { useForm } from "react-hook-form";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import inboxServices from "services/inbox.service";
-// hooks
-import useInboxView from "hooks/use-inbox-view";
-import useUserAuth from "hooks/use-user-auth";
+import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle } from "lucide-react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
 import { InboxIssueActivity } from "components/inbox";
 // ui
-import { Loader } from "components/ui";
-// icons
-import {
-  ArrowTopRightOnSquareIcon,
-  CheckCircleIcon,
-  ClockIcon,
-  DocumentDuplicateIcon,
-  ExclamationTriangleIcon,
-  InboxIcon,
-  XCircleIcon,
-} from "@heroicons/react/24/outline";
+import { Loader } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import type { IInboxIssue, IIssue } from "types";
-// fetch-keys
-import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { IInboxIssue, IIssue } from "types";
 
 const defaultValues: Partial<IInboxIssue> = {
   name: "",
   description_html: "",
-  estimate_point: null,
-  assignees_list: [],
+  assignees: [],
   priority: "low",
   target_date: new Date().toString(),
-  labels_list: [],
+  labels: [],
 };
 
-export const InboxMainContent: React.FC = () => {
+export const InboxMainContent: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
 
-  const { user } = useUserAuth();
-  const { memberRole } = useProjectMyMembership();
-  const { params, issues: inboxIssues } = useInboxView();
+  const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+  const userRole = userStore.currentProjectRole;
 
   const { reset, control, watch } = useForm<IIssue>({
     defaultValues,
   });
 
-  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR(
-    workspaceSlug && projectId && inboxId && inboxIssueId
-      ? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString())
-      : null,
+  useSWR(
+    workspaceSlug && projectId && inboxId && inboxIssueId ? `INBOX_ISSUE_DETAILS_${inboxIssueId.toString()}` : null,
     workspaceSlug && projectId && inboxId && inboxIssueId
       ? () =>
-          inboxServices.getInboxIssueById(
+          inboxIssueDetailsStore.fetchIssueDetails(
             workspaceSlug.toString(),
             projectId.toString(),
             inboxId.toString(),
@@ -72,68 +52,29 @@ export const InboxMainContent: React.FC = () => {
       : null
   );
 
+  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
+  const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined;
+
   const submitChanges = useCallback(
     async (formData: Partial<IInboxIssue>) => {
       if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;
 
-      mutateIssueDetails((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          ...formData,
-        };
-      }, false);
-      mutate<IInboxIssue[]>(
-        INBOX_ISSUES(inboxId.toString(), params),
-        (prevData) =>
-          (prevData ?? []).map((i) => {
-            if (i.bridge_id === inboxIssueId) {
-              return {
-                ...i,
-                ...formData,
-              };
-            }
-
-            return i;
-          }),
-        false
+      await inboxIssueDetailsStore.updateIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        inboxId.toString(),
+        issueDetails.issue_inbox[0].id,
+        formData
       );
-
-      const payload = { issue: { ...formData } };
-
-      await inboxServices
-        .patchInboxIssue(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          inboxId.toString(),
-          issueDetails.issue_inbox[0].id,
-          payload,
-          user
-        )
-        .then(() => {
-          mutateIssueDetails();
-          mutate(INBOX_ISSUES(inboxId.toString(), params));
-          mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-        });
     },
-    [
-      workspaceSlug,
-      inboxIssueId,
-      projectId,
-      mutateIssueDetails,
-      inboxId,
-      user,
-      issueDetails,
-      params,
-    ]
+    [workspaceSlug, inboxIssueId, projectId, inboxId, issueDetails, inboxIssueDetailsStore]
   );
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if (!inboxIssues || !inboxIssueId) return;
+      if (!issuesList || !inboxIssueId) return;
 
-      const currentIssueIndex = inboxIssues.findIndex((issue) => issue.bridge_id === inboxIssueId);
+      const currentIssueIndex = issuesList.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId);
 
       switch (e.key) {
         case "ArrowUp":
@@ -142,8 +83,8 @@ export const InboxMainContent: React.FC = () => {
             query: {
               inboxIssueId:
                 currentIssueIndex === 0
-                  ? inboxIssues[inboxIssues.length - 1].bridge_id
-                  : inboxIssues[currentIssueIndex - 1].bridge_id,
+                  ? issuesList[issuesList.length - 1].issue_inbox[0].id
+                  : issuesList[currentIssueIndex - 1].issue_inbox[0].id,
             },
           });
           break;
@@ -152,9 +93,9 @@ export const InboxMainContent: React.FC = () => {
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
             query: {
               inboxIssueId:
-                currentIssueIndex === inboxIssues.length - 1
-                  ? inboxIssues[0].bridge_id
-                  : inboxIssues[currentIssueIndex + 1].bridge_id,
+                currentIssueIndex === issuesList.length - 1
+                  ? issuesList[0].issue_inbox[0].id
+                  : issuesList[currentIssueIndex + 1].issue_inbox[0].id,
             },
           });
           break;
@@ -162,7 +103,7 @@ export const InboxMainContent: React.FC = () => {
           break;
       }
     },
-    [workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues]
+    [workspaceSlug, projectId, inboxIssueId, inboxId, issuesList]
   );
 
   useEffect(() => {
@@ -178,9 +119,8 @@ export const InboxMainContent: React.FC = () => {
 
     reset({
       ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
-      labels_list: issueDetails.labels_list ?? issueDetails.labels,
+      assignees: issueDetails.assignees ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
+      labels: issueDetails.labels ?? issueDetails.labels,
     });
   }, [issueDetails, reset, inboxIssueId]);
 
@@ -191,18 +131,13 @@ export const InboxMainContent: React.FC = () => {
       <div className="h-full p-4 grid place-items-center text-custom-text-200">
         <div className="grid h-full place-items-center">
           <div className="my-5 flex flex-col items-center gap-4">
-            <InboxIcon height={60} width={60} />
-            {inboxIssues && inboxIssues.length > 0 ? (
+            <Inbox size={60} strokeWidth={1.5} />
+            {issuesList && issuesList.length > 0 ? (
               <span className="text-custom-text-200">
-                {inboxIssues?.length} issues found. Select an issue from the sidebar to view its
-                details.
+                {issuesList?.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
-                to create a new issue
-              </span>
+              <span className="text-custom-text-200">No issues found</span>
             )}
           </div>
         </div>
@@ -233,43 +168,37 @@ export const InboxMainContent: React.FC = () => {
             >
               {issueStatus === -2 ? (
                 <>
-                  <ExclamationTriangleIcon className="h-5 w-5" />
+                  <AlertTriangle size={18} strokeWidth={2} />
                   <p>This issue is still pending.</p>
                 </>
               ) : issueStatus === -1 ? (
                 <>
-                  <XCircleIcon className="h-5 w-5" />
+                  <XCircle size={18} strokeWidth={2} />
                   <p>This issue has been declined.</p>
                 </>
               ) : issueStatus === 0 ? (
                 <>
-                  <ClockIcon className="h-5 w-5" />
+                  <Clock size={18} strokeWidth={2} />
                   {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>
                   )}
                 </>
               ) : issueStatus === 1 ? (
                 <>
-                  <CheckCircleIcon className="h-5 w-5" />
+                  <CheckCircle2 size={18} strokeWidth={2} />
                   <p>This issue has been accepted.</p>
                 </>
               ) : issueStatus === 2 ? (
                 <>
-                  <DocumentDuplicateIcon className="h-5 w-5" />
+                  <Copy size={18} strokeWidth={2} />
                   <p className="flex items-center gap-1">
                     This issue has been marked as a duplicate of
                     <a
@@ -278,7 +207,7 @@ export const InboxMainContent: React.FC = () => {
                       rel="noreferrer"
                       className="underline flex items-center gap-2"
                     >
-                      this issue <ArrowTopRightOnSquareIcon className="h-3 w-3" />
+                      this issue <ExternalLink size={12} strokeWidth={2} />
                     </a>
                     .
                   </p>
@@ -293,22 +222,16 @@ export const InboxMainContent: React.FC = () => {
                   description_html: issueDetails.description_html,
                 }}
                 handleFormSubmit={submitChanges}
-                isAllowed={
-                  memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by
-                }
+                isAllowed={userRole === 15 || userRole === 20 || 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>
 
-          <div className="basis-1/3 space-y-5 border-custom-border-200 p-5">
+          <div className="basis-1/3 space-y-5 border-custom-border-200 py-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
@@ -336,4 +259,4 @@ export const InboxMainContent: React.FC = () => {
       )}
     </>
   );
-};
+});
diff --git a/web/components/inbox/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
similarity index 74%
rename from web/components/inbox/accept-issue-modal.tsx
rename to web/components/inbox/modals/accept-issue-modal.tsx
index be557536b..376ccbfdd 100644
--- a/web/components/inbox/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -1,27 +1,26 @@
 import React, { useState } from "react";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CheckCircle } from "lucide-react";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
 type Props = {
+  data: IInboxIssue;
   isOpen: boolean;
-  handleClose: () => void;
-  data: IInboxIssue | undefined;
+  onClose: () => void;
   onSubmit: () => Promise<void>;
 };
 
-export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => {
+export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
   const [isAccepting, setIsAccepting] = useState(false);
 
-  const onClose = () => {
+  const handleClose = () => {
     setIsAccepting(false);
-    handleClose();
+    onClose();
   };
 
   const handleAccept = () => {
@@ -32,7 +31,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -42,7 +41,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,11 +55,11 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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-green-500/20 p-4">
-                      <CheckCircleIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
+                      <CheckCircle className="h-6 w-6 text-green-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Accept Issue</h3>
@@ -76,10 +75,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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" tabIndex={1} onClick={handleAccept} loading={isAccepting}>
                       {isAccepting ? "Accepting..." : "Accept Issue"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
new file mode 100644
index 000000000..28bde21e4
--- /dev/null
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -0,0 +1,194 @@
+import React, { useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { Controller, useForm } from "react-hook-form";
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { FileService } from "services/file.service";
+// components
+import { IssuePrioritySelect } from "components/issues/select";
+// ui
+import { Button, Input, ToggleSwitch } from "@plane/ui";
+// types
+import { IIssue } from "types";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description_html: "<p></p>",
+  parent: null,
+  priority: "none",
+};
+
+// services
+const fileService = new FileService();
+
+export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose } = props;
+
+  // states
+  const [createMore, setCreateMore] = useState(false);
+
+  const editorRef = useRef<any>(null);
+
+  const editorSuggestion = useEditorSuggestions();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm({ defaultValues });
+
+  const handleClose = () => {
+    onClose();
+    reset(defaultValues);
+  };
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    await inboxIssueDetailsStore
+      .createIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), formData)
+      .then((res) => {
+        if (!createMore) {
+          router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`);
+          handleClose();
+        } else reset(defaultValues);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" 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 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <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 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+                <form onSubmit={handleSubmit(handleFormSubmit)}>
+                  <div className="space-y-5">
+                    <h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
+                    <div className="space-y-3">
+                      <div className="mt-2 space-y-3">
+                        <div>
+                          <Controller
+                            control={control}
+                            name="name"
+                            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>
+                          <Controller
+                            name="description_html"
+                            control={control}
+                            render={({ field: { value, onChange } }) => (
+                              <RichTextEditorWithRef
+                                cancelUploadImage={fileService.cancelUpload}
+                                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                                deleteFile={fileService.deleteImage}
+                                ref={editorRef}
+                                debouncedUpdatesEnabled={false}
+                                value={!value || value === "" ? "<p></p>" : value}
+                                customClassName="min-h-[150px]"
+                                onChange={(description, description_html: string) => {
+                                  onChange(description_html);
+                                }}
+                                mentionSuggestions={editorSuggestion.mentionSuggestions}
+                                mentionHighlights={editorSuggestion.mentionHighlights}
+                              />
+                            )}
+                          />
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Controller
+                            control={control}
+                            name="priority"
+                            render={({ field: { value, onChange } }) => (
+                              <IssuePrioritySelect value={value ?? "none"} onChange={onChange} />
+                            )}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+                    <div
+                      className="flex cursor-pointer items-center gap-1"
+                      onClick={() => setCreateMore((prevData) => !prevData)}
+                    >
+                      <span className="text-xs">Create more</span>
+                      <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button variant="neutral-primary" size="sm" onClick={() => handleClose()}>
+                        Discard
+                      </Button>
+                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+                        {isSubmitting ? "Adding Issue..." : "Add Issue"}
+                      </Button>
+                    </div>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/inbox/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
similarity index 72%
rename from web/components/inbox/decline-issue-modal.tsx
rename to web/components/inbox/modals/decline-issue-modal.tsx
index b3168915a..5267f747b 100644
--- a/web/components/inbox/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -1,27 +1,26 @@
 import React, { useState } from "react";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
 type Props = {
+  data: IInboxIssue;
   isOpen: boolean;
-  handleClose: () => void;
-  data: IInboxIssue | undefined;
+  onClose: () => void;
   onSubmit: () => Promise<void>;
 };
 
-export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => {
+export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
   const [isDeclining, setIsDeclining] = useState(false);
 
-  const onClose = () => {
+  const handleClose = () => {
     setIsDeclining(false);
-    handleClose();
+    onClose();
   };
 
   const handleDecline = () => {
@@ -32,7 +31,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -42,7 +41,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,14 +55,11 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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 +75,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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" size="sm" tabIndex={1} 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 66%
rename from web/components/inbox/delete-issue-modal.tsx
rename to web/components/inbox/modals/delete-issue-modal.tsx
index a00057113..eb135fb7a 100644
--- a/web/components/inbox/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -1,67 +1,48 @@
 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 inboxServices from "services/inbox.service";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
-import useInboxView from "hooks/use-inbox-view";
-import useUser from "hooks/use-user";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
-// fetch-keys
-import { INBOX_ISSUES } from "constants/fetch-keys";
 
 type Props = {
+  data: IInboxIssue;
   isOpen: boolean;
-  handleClose: () => void;
-  data: IInboxIssue | undefined;
+  onClose: () => void;
 };
 
-export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClose, data }) => {
   const [isDeleting, setIsDeleting] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query;
 
-  const { user } = useUser();
-  const { setToastAlert } = useToast();
-  const { params } = useInboxView();
+  const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
 
-  const onClose = () => {
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
     setIsDeleting(false);
-    handleClose();
+    onClose();
   };
 
   const handleDelete = () => {
-    if (!workspaceSlug || !projectId || !inboxId || !data) return;
+    if (!workspaceSlug || !projectId || !inboxId) return;
 
     setIsDeleting(true);
 
-    inboxServices
-      .deleteInboxIssue(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        data.bridge_id.toString(),
-        user
-      )
+    inboxIssueDetailsStore
+      .deleteIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), data.issue_inbox[0].id)
       .then(() => {
-        mutate<IInboxIssue[]>(
-          INBOX_ISSUES(inboxId.toString(), params),
-          (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
-          false
-        );
-
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -73,7 +54,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
         });
 
-        onClose();
+        handleClose();
       })
       .catch(() =>
         setToastAlert({
@@ -97,7 +78,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -111,14 +92,11 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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 +108,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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}>
                       {isDeleting ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -148,4 +127,4 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/inbox/modals/index.ts b/web/components/inbox/modals/index.ts
new file mode 100644
index 000000000..12ce68578
--- /dev/null
+++ b/web/components/inbox/modals/index.ts
@@ -0,0 +1,5 @@
+export * from "./accept-issue-modal";
+export * from "./create-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 77%
rename from web/components/inbox/select-duplicate.tsx
rename to web/components/inbox/modals/select-duplicate.tsx
index 1cc905080..e746d0df8 100644
--- a/web/components/inbox/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -1,22 +1,16 @@
 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, LayersIcon } from "@plane/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Search } from "lucide-react";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
@@ -27,6 +21,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 +35,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 +65,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>
@@ -88,7 +81,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+              <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
             </Transition.Child>
 
             <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -101,7 +94,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                   <Combobox
                     value={selectedItem}
                     onChange={(value) => {
@@ -109,7 +102,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                     }}
                   >
                     <div className="relative m-1">
-                      <MagnifyingGlassIcon
+                      <Search
                         className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
@@ -128,9 +121,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 +131,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 +143,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>
@@ -168,13 +154,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                         </li>
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="56" width="56" />
+                          <LayersIcon 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 +166,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" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" size="sm" 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..8d222c4db 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";
+import { AlertTriangle } from "lucide-react";
 // 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",
@@ -74,7 +78,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -88,14 +92,11 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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,41 @@ 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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      tabIndex={1}
                       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..9d5816f3b 100644
--- a/web/components/integration/github/auth.tsx
+++ b/web/components/integration/github/auth.tsx
@@ -1,27 +1,39 @@
 // hooks
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { IWorkspaceIntegration } from "types";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   workspaceIntegration: false | IWorkspaceIntegration | undefined;
   provider: string | undefined;
 };
 
-export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider }) => {
-  const { startAuth, isConnecting } = useIntegrationPopup(provider);
+export const GithubAuth: React.FC<Props> = observer(({ workspaceIntegration, provider }) => {
+  const {
+    appConfig: { envConfig },
+  } = useMobxStore();
+  // hooks
+  const { startAuth, isConnecting } = useIntegrationPopup({
+    provider,
+    github_app_name: envConfig?.github_app_name || "",
+    slack_client_id: envConfig?.slack_client_id || "",
+  });
 
   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..53592420d 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -1,13 +1,13 @@
 import { FC } from "react";
-
-// react-hook-form
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormWatch } from "react-hook-form";
-// hooks
-import useProjects from "hooks/use-projects";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { Button, CustomSearchSelect, ToggleSwitch } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -20,8 +20,15 @@ type Props = {
   watch: UseFormWatch<TFormValues>;
 };
 
-export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
-  const { projects } = useProjects();
+export const GithubImportData: FC<Props> = observer((props) => {
+  const { handleStepChange, integration, control, watch } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const options = projects
     ? projects.map((project) => ({
@@ -51,11 +58,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 +71,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 +100,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,14 +114,17 @@ 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..aac2b10e9 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
@@ -22,25 +21,16 @@ import {
   GithubImportConfirm,
 } from "components/integration";
 // icons
-import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
-import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
+import { UserGroupIcon } from "@plane/ui";
+import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
 // 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;
 }
@@ -69,30 +59,34 @@ const integrationWorkflowData = [
   {
     title: "Configure",
     key: "import-configure",
-    icon: CogIcon,
+    icon: Settings,
   },
   {
     title: "Import Data",
     key: "import-data",
-    icon: CloudUploadIcon,
+    icon: UploadCloud,
   },
-  { title: "Issues", key: "repo-details", icon: ListBulletIcon },
+  { title: "Issues", key: "repo-details", icon: List },
   {
     title: "Users",
     key: "import-users",
-    icon: UsersIcon,
+    icon: UserGroupIcon,
   },
   {
     title: "Confirm",
     key: "import-confirm",
-    icon: CheckIcon,
+    icon: Check,
   },
 ];
 
 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));
@@ -177,10 +163,10 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
 
   return (
     <form onSubmit={handleSubmit(createGithubImporterService)}>
-      <div className="space-y-2">
+      <div className="space-y-2 mt-4">
         <Link href={`/${workspaceSlug}/settings/imports`}>
           <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
-            <ArrowLeftIcon className="h-3 w-3" />
+            <ArrowLeft className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </div>
         </Link>
@@ -205,18 +191,14 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                     }`}
                   >
                     <integration.icon
-                      width="18px"
-                      height="18px"
-                      color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
+                      className={`w-5 h-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
                     />
                   </div>
                   {index < integrationWorkflowData.length - 1 && (
                     <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 b46942e6d..9d086c894 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";
+import { CustomSearchSelect } from "@plane/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);
@@ -92,7 +80,6 @@ export const SelectRepository: React.FC<Props> = ({
           )}
         </>
       }
-      position="right"
       optionsClassName="w-full"
     />
   );
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index 13671ac89..0bba7b85d 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -1,11 +1,9 @@
 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, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
@@ -34,13 +32,16 @@ const importOptions = [
   },
 ];
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { data: members } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
+    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null
   );
 
   const options = members?.map((member) => ({
@@ -48,7 +49,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -69,11 +70,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 +89,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 +99,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..e521ca8f5 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -1,32 +1,27 @@
 import { useState } from "react";
-
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
 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";
+import { RefreshCw } from "lucide-react";
 // types
 import { IImporterService } from "types";
 // fetch-keys
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 // constants
-import { IMPORTERS_EXPORTERS_LIST } from "constants/workspace";
+import { IMPORTERS_LIST } from "constants/workspace";
+
+// services
+const integrationService = new IntegrationService();
 
 const IntegrationGuide = () => {
   const [refreshing, setRefreshing] = useState(false);
@@ -40,7 +35,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) => {
@@ -78,40 +73,31 @@ const IntegrationGuide = () => {
                 </div>
               </a>
             </div> */}
-            {IMPORTERS_EXPORTERS_LIST.map((service) => (
+            {IMPORTERS_LIST.map((service) => (
               <div
                 key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
+                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
               >
                 <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>
               </div>
             ))}
             <div>
-              <div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-200">
+              <div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-100">
                 <h3 className="flex gap-2 text-xl font-medium">
                   Previous Imports
                   <button
@@ -119,12 +105,10 @@ 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" : ""}`} />{" "}
+                    <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
                     {refreshing ? "Refreshing..." : "Refresh status"}
                   </button>
                 </h3>
@@ -145,9 +129,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/confirm-import.tsx b/web/components/integration/jira/confirm-import.tsx
index 54c599151..d69009af3 100644
--- a/web/components/integration/jira/confirm-import.tsx
+++ b/web/components/integration/jira/confirm-import.tsx
@@ -37,9 +37,7 @@ export const JiraConfirmImport: React.FC = () => {
             <p className="text-sm text-custom-text-200">Labels</p>
           </div>
           <div>
-            <h4 className="mb-2 text-lg font-semibold">
-              {watch("data.users").filter((user) => user.import).length}
-            </h4>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.users").filter((user) => user.import).length}</h4>
             <p className="text-sm text-custom-text-200">User</p>
           </div>
         </div>
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index 3fc5d9641..04d6453db 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -1,31 +1,29 @@
 import React from "react";
-
-// next
+import { useRouter } from "next/router";
 import Link from "next/link";
-
-// react hook form
+import { observer } from "mobx-react-lite";
 import { useFormContext, Controller } from "react-hook-form";
-
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
-import { PlusIcon } from "@heroicons/react/20/solid";
-
-// hooks
-import useProjects from "hooks/use-projects";
-
+import { Plus } from "lucide-react";
 // components
-import { Input, CustomSelect } from "components/ui";
-
+import { CustomSelect, Input } from "@plane/ui";
+// types
 import { IJiraImporterForm } from "types";
 
-export const JiraGetImportDetail: React.FC = () => {
+export const JiraGetImportDetail: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const {
-    register,
     control,
     formState: { errors },
   } = useFormContext<IJiraImporterForm>();
 
-  const { projects } = useProjects();
-
   return (
     <div className="h-full w-full space-y-8 overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
@@ -42,15 +40,25 @@ 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"
+                autoComplete="off"
+              />
+            )}
           />
         </div>
       </div>
@@ -61,15 +69,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 +95,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 Email 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 +127,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 +153,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
@@ -143,7 +175,6 @@ export const JiraGetImportDetail: React.FC = () => {
                     )}
                   </span>
                 }
-                verticalPosition="top"
               >
                 {projects && projects.length > 0 ? (
                   projects.map((project) => (
@@ -159,13 +190,10 @@ export const JiraGetImportDetail: React.FC = () => {
                 <div>
                   <button
                     type="button"
-                    onClick={() => {
-                      const event = new KeyboardEvent("keydown", { key: "p" });
-                      document.dispatchEvent(event);
-                    }}
+                    onClick={() => commandPaletteStore.toggleCreateProjectModal(true)}
                     className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
                   >
-                    <PlusIcon className="h-4 w-4 text-custom-text-200" />
+                    <Plus className="h-4 w-4 text-custom-text-200" />
                     <span>Create new project</span>
                   </button>
                 </div>
@@ -176,4 +204,4 @@ export const JiraGetImportDetail: React.FC = () => {
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index bb3057f1e..93e0e0ec0 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -1,30 +1,25 @@
 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";
-
-// components
-import { ToggleSwitch, Input, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
-
+import { WorkspaceService } from "services/workspace.service";
+// ui
+import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
+// types
 import { IJiraImporterForm } from "types";
+// fetch keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+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 +28,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 ? WORKSPACE_MEMBERS(workspaceSlug?.toString() ?? "") : null,
+    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug?.toString() ?? "") : null
   );
 
   const options = members?.map((member) => ({
@@ -48,7 +38,7 @@ export const JiraImportUsers: FC = () => {
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -59,17 +49,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 +83,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 +94,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..4cd3c2490 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -1,28 +1,17 @@
 import React, { useState } from "react";
-
-// next
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
-// react hook form
 import { FormProvider, useForm } from "react-hook-form";
-
 // icons
-import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
-import { CogIcon, UsersIcon, CheckIcon } from "components/icons";
-
+import { ArrowLeft, Check, List, Settings, Users2 } from "lucide-react";
 // 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, UserGroupIcon } from "@plane/ui";
 import {
   JiraGetImportDetail,
   JiraProjectDetail,
@@ -32,10 +21,10 @@ import {
   TJiraIntegrationSteps,
   IJiraIntegrationData,
 } from ".";
-
-import JiraLogo from "public/services/jira.png";
-
-import { ICurrentUserResponse, IJiraImporterForm } from "types";
+// assets
+import JiraLogo from "public/services/jira.svg";
+// types
+import { IUser, IJiraImporterForm } from "types";
 
 const integrationWorkflowData: Array<{
   title: string;
@@ -45,29 +34,32 @@ const integrationWorkflowData: Array<{
   {
     title: "Configure",
     key: "import-configure",
-    icon: CogIcon,
+    icon: Settings,
   },
   {
     title: "Import Data",
     key: "display-import-data",
-    icon: ListBulletIcon,
+    icon: List,
   },
   {
     title: "Users",
     key: "import-users",
-    icon: UsersIcon,
+    icon: UserGroupIcon,
   },
   {
     title: "Confirm",
     key: "import-confirmation",
-    icon: CheckIcon,
+    icon: Check,
   },
 ];
 
 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,19 +92,17 @@ 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;
   };
 
   return (
-    <div className="flex h-full flex-col space-y-2">
+    <div className="flex h-full flex-col space-y-2 mt-4">
       <Link href={`/${workspaceSlug}/settings/imports`}>
         <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
           <div>
-            <ArrowLeftIcon className="h-3 w-3" />
+            <ArrowLeft className="h-3 w-3" />
           </div>
           <div>Cancel import & go back</div>
         </div>
@@ -146,18 +136,14 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                   }`}
                 >
                   <integration.icon
-                    width="18px"
-                    height="18px"
-                    color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
+                    className={`w-5 h-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
                   />
                 </button>
                 {index < integrationWorkflowData.length - 1 && (
                   <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 +160,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 +168,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 +180,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 +198,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-import.tsx b/web/components/integration/single-import.tsx
index 9ebe1ad22..f084e652d 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -1,13 +1,13 @@
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { Trash2 } from "lucide-react";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IImporterService } from "types";
 // constants
-import { IMPORTERS_EXPORTERS_LIST } from "constants/workspace";
+import { IMPORTERS_LIST } from "constants/workspace";
 
 type Props = {
   service: IImporterService;
@@ -21,10 +21,8 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
       <h4 className="flex items-center gap-2 text-sm">
         <span>
           Import from{" "}
-          <span className="font-medium">
-            {IMPORTERS_EXPORTERS_LIST.find((i) => i.provider === service.service)?.title}
-          </span>{" "}
-          to <span className="font-medium">{service.project_detail.name}</span>
+          <span className="font-medium">{IMPORTERS_LIST.find((i) => i.provider === service.service)?.title}</span> to{" "}
+          <span className="font-medium">{service.project_detail.name}</span>
         </span>
         <span
           className={`rounded px-2 py-0.5 text-xs capitalize ${
@@ -48,7 +46,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
     <CustomMenu ellipsis>
       <CustomMenu.MenuItem onClick={handleDelete}>
         <span className="flex items-center justify-start gap-2">
-          <TrashIcon className="h-3.5 w-3.5" />
+          <Trash2 className="h-3.5 w-3.5" />
           Delete import
         </span>
       </CustomMenu.MenuItem>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index fab37b0c8..f5ff2b326 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -6,20 +6,22 @@ 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";
-import { CheckCircle2 } from "lucide-react";
+import { CheckCircle } from "lucide-react";
 // types
 import { IAppIntegration, IWorkspaceIntegration } from "types";
 // fetch-keys
 import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   integration: IAppIntegration;
@@ -38,7 +40,14 @@ const integrationDetails: { [key: string]: any } = {
   },
 };
 
-export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
+// services
+const integrationService = new IntegrationService();
+
+export const SingleIntegrationCard: React.FC<Props> = observer(({ integration }) => {
+  const {
+    appConfig: { envConfig },
+  } = useMobxStore();
+
   const [deletingIntegration, setDeletingIntegration] = useState(false);
 
   const router = useRouter();
@@ -46,29 +55,26 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
 
   const { setToastAlert } = useToast();
 
-  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup(integration.provider);
+  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup({
+    provider: integration.provider,
+    github_app_name: envConfig?.github_app_name || "",
+    slack_client_id: envConfig?.slack_client_id || "",
+  });
 
   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,24 +100,19 @@ 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-center justify-between gap-2 border-b border-custom-border-100 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">
             {integration.title}
             {workspaceIntegrations
-              ? isInstalled && <CheckCircle2 className="h-3.5 w-3.5 text-white fill-green-500" />
+              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 text-green-500 fill-transparent" />
               : null}
           </h3>
           <p className="text-sm text-custom-text-200 tracking-tight">
@@ -126,13 +127,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>
@@ -141,4 +142,4 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
       )}
     </div>
   );
-};
+});
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 712c168df..eaaa3daee 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -1,33 +1,44 @@
-import React, { useState, useEffect } from "react";
-
+import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
 // 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";
 // fetch-keys
 import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   integration: IWorkspaceIntegration;
 };
 
-export const SelectChannel: React.FC<Props> = ({ integration }) => {
-  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] =
-    useState<boolean>(false);
+const appInstallationService = new AppInstallationService();
+
+export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
+  // store
+  const {
+    appConfig: { envConfig },
+  } = useMobxStore();
+  // states
+  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] = useState<boolean>(false);
   const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { startAuth } = useIntegrationPopup("slackChannel", integration.id);
+  const { startAuth } = useIntegrationPopup({
+    provider: "slackChannel",
+    stateParams: integration.id,
+    github_app_name: envConfig?.github_client_id || "",
+    slack_client_id: envConfig?.slack_client_id || "",
+  });
 
   const { data: projectIntegration } = useSWR(
     workspaceSlug && projectId && integration.id
@@ -35,7 +46,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 +75,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));
   };
 
@@ -104,4 +110,4 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
       )}
     </>
   );
-};
+});
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx
index e6f54f512..b49e11972 100644
--- a/web/components/issues/activity.tsx
+++ b/web/components/issues/activity.tsx
@@ -7,11 +7,12 @@ 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 { Loader, Tooltip } from "@plane/ui";
 // helpers
 import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
 // types
 import { IIssueActivity, IIssueComment } from "types";
+import { History } from "lucide-react";
 
 type Props = {
   activity: IIssueActivity[] | undefined;
@@ -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 (
@@ -75,18 +72,17 @@ export const IssueActivitySection: React.FC<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" />
+                                <History className="h-3.5 w-3.5 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}
                                 height={24}
                                 width={24}
-                                className="rounded-full"
+                                className="rounded-full h-full w-full object-cover"
                               />
                             ) : (
                               <div
@@ -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..ae3b4534d 100644
--- a/web/components/issues/attachment/attachments.tsx
+++ b/web/components/issues/attachment/attachments.tsx
@@ -1,19 +1,16 @@
 import { useState } from "react";
-
 import Link from "next/link";
 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";
+import { getFileIcon } from "components/icons";
+import { AlertCircle, X } from "lucide-react";
 // services
-import issuesService from "services/issues.service";
-import projectService from "services/project.service";
+import { IssueAttachmentService } from "services/issue";
+import { ProjectMemberService } from "services/project";
 // fetch-key
 import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
@@ -23,6 +20,10 @@ import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attac
 // type
 import { IIssueAttachment } from "types";
 
+// services
+const issueAttachmentService = new IssueAttachmentService();
+const projectMemberService = new ProjectMemberService();
+
 export const IssueAttachments = () => {
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
   const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
@@ -33,19 +34,14 @@ 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
   );
 
   const { data: people } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -70,18 +66,15 @@ 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>
-                          <ExclamationIcon className="h-3 w-3 fill-current" />
+                          <AlertCircle className="h-3 w-3" />
                         </span>
                       </Tooltip>
                     </div>
@@ -101,7 +94,7 @@ export const IssueAttachments = () => {
                 setAttachmentDeleteModal(true);
               }}
             >
-              <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+              <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
             </button>
           </div>
         ))}
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 7c0495dd6..82ced8319 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -7,13 +7,13 @@ 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";
+import { AlertTriangle } from "lucide-react";
 // helper
 import { getFileName } from "helpers/attachment.helper";
 // types
@@ -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({
@@ -76,7 +74,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-75 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -90,43 +88,41 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                  <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+                  <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon
-                          className="h-6 w-6 text-red-600"
-                          aria-hidden="true"
-                        />
+                        <AlertTriangle 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
+                  <div className="flex justify-end gap-2 p-4 sm:px-6">
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      tabIndex={1}
                       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 33d7f2289..ee7805ef7 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -1,13 +1,18 @@
 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 { TipTapEditor } from "components/tiptap";
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // ui
-import { Icon, SecondaryButton, Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
+import { Globe2, Lock } from "lucide-react";
+
 // types
 import type { IIssueComment } from "types";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",
@@ -20,29 +25,35 @@ type Props = {
   showAccessSpecifier?: boolean;
 };
 
-const commentAccess = [
+type commentAccessType = {
+  icon: any;
+  key: string;
+  label: "Private" | "Public";
+};
+const commentAccess: commentAccessType[] = [
   {
-    icon: "lock",
+    icon: Lock,
     key: "INTERNAL",
     label: "Private",
   },
   {
-    icon: "public",
+    icon: Globe2,
     key: "EXTERNAL",
     label: "Public",
   },
 ];
 
-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();
   const { workspaceSlug } = router.query;
 
+  const editorSuggestions = useEditorSuggestions();
+
   const {
     control,
     formState: { isSubmitting },
@@ -63,58 +74,47 @@ export const AddComment: React.FC<Props> = ({
     <div>
       <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}
+            render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+              <Controller
+                name="comment_html"
+                control={control}
+                render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
+                  <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleAddComment)}
+                    cancelUploadImage={fileService.cancelUpload}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                    deleteFile={fileService.deleteImage}
+                    ref={editorRef}
+                    value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
+                    customClassName="p-2 h-full"
+                    editorContentCustomClassNames="min-h-[35px]"
+                    debouncedUpdatesEnabled={false}
+                    onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
+                    commentAccessSpecifier={
+                      showAccessSpecifier
+                        ? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
+                        : undefined
+                    }
+                    mentionSuggestions={editorSuggestions.mentionSuggestions}
+                    mentionHighlights={editorSuggestions.mentionHighlights}
+                    submitButton={
+                      <Button
+                        variant="primary"
+                        type="submit"
+                        className="!px-2.5 !py-1.5 !text-xs"
+                        disabled={isSubmitting || disabled}
+                      >
+                        {isSubmitting ? "Adding..." : "Comment"}
+                      </Button>
+                    }
+                  />
+                )}
+              />
             )}
-            <Controller
-              name="comment_html"
-              control={control}
-              render={({ field: { value, onChange } }) => (
-                <TipTapEditor
-                  workspaceSlug={workspaceSlug as string}
-                  ref={editorRef}
-                  value={!value || value === "" ? "<p></p>" : value}
-                  customClassName="p-3 min-h-[100px] shadow-sm"
-                  debouncedUpdatesEnabled={false}
-                  onChange={(comment_json: Object, comment_html: string) => onChange(comment_html)}
-                />
-              )}
-            />
-          </div>
-
-          <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
-            {isSubmitting ? "Adding..." : "Comment"}
-          </SecondaryButton>
+          />
         </div>
       </form>
     </div>
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
index 3d3e43b39..577050572 100644
--- a/web/components/issues/comment/comment-card.tsx
+++ b/web/components/issues/comment/comment-card.tsx
@@ -1,19 +1,24 @@
 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";
+import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu, Icon } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 import { CommentReaction } from "components/issues";
-import { TipTapEditor } from "components/tiptap";
+import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+// services
+const fileService = new FileService();
 
 type Props = {
   comment: IIssueComment;
@@ -35,6 +40,8 @@ export const CommentCard: React.FC<Props> = ({
   const editorRef = React.useRef<any>(null);
   const showEditorRef = React.useRef<any>(null);
 
+  const editorSuggestions = useEditorSuggestions();
+
   const [isEditing, setIsEditing] = useState(false);
 
   const {
@@ -68,18 +75,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)}
@@ -87,31 +90,24 @@ 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"
-          />
+          <MessageSquare 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"}`}
-            onSubmit={handleSubmit(onEnter)}
-          >
+          <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
             <div>
-              <TipTapEditor
-                workspaceSlug={workspaceSlug as string}
+              <LiteTextEditorWithRef
+                onEnterKeyPress={handleSubmit(onEnter)}
+                cancelUploadImage={fileService.cancelUpload}
+                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                deleteFile={fileService.deleteImage}
                 ref={editorRef}
                 value={watch("comment_html")}
                 debouncedUpdatesEnabled={false}
@@ -120,40 +116,39 @@ export const CommentCard: React.FC<Props> = ({
                   setValue("comment_json", comment_json);
                   setValue("comment_html", comment_html);
                 }}
+                mentionSuggestions={editorSuggestions.mentionSuggestions}
+                mentionHighlights={editorSuggestions.mentionHighlights}
               />
             </div>
             <div className="flex gap-1 self-end">
               <button
-                type="submit"
+                type="button"
+                onClick={handleSubmit(onEnter)}
                 disabled={isSubmitting}
                 className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
               >
-                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
               </button>
               <button
                 type="button"
                 className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                 onClick={() => setIsEditing(false)}
               >
-                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
               </button>
             </div>
           </form>
           <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"
-                />
+              <div className="absolute top-2.5 right-2.5 z-[1] text-custom-text-300">
+                {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
               </div>
             )}
-            <TipTapEditor
-              workspaceSlug={workspaceSlug as string}
+            <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
               value={comment.comment_html}
-              editable={false}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={editorSuggestions.mentionHighlights}
             />
             <CommentReaction projectId={comment.project} commentId={comment.id} />
           </div>
@@ -161,31 +156,26 @@ export const CommentCard: React.FC<Props> = ({
       </div>
       {user?.id === comment.actor && (
         <CustomMenu ellipsis>
-          <CustomMenu.MenuItem
-            onClick={() => setIsEditing(true)}
-            className="flex items-center gap-1"
-          >
-            <Icon iconName="edit" />
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
+            <Pencil className="h-3 w-3" />
             Edit comment
           </CustomMenu.MenuItem>
           {showAccessSpecifier && (
             <>
               {comment.access === "INTERNAL" ? (
                 <CustomMenu.MenuItem
-                  renderAs="button"
                   onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                   className="flex items-center gap-1"
                 >
-                  <Icon iconName="public" />
+                  <Globe2 className="h-3 w-3" />
                   Switch to public comment
                 </CustomMenu.MenuItem>
               ) : (
                 <CustomMenu.MenuItem
-                  renderAs="button"
                   onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                   className="flex items-center gap-1"
                 >
-                  <Icon iconName="lock" />
+                  <Lock className="h-3 w-3" />
                   Switch to private comment
                 </CustomMenu.MenuItem>
               )}
@@ -197,7 +187,7 @@ export const CommentCard: React.FC<Props> = ({
             }}
             className="flex items-center gap-1"
           >
-            <Icon iconName="delete" />
+            <Trash2 className="h-3 w-3" />
             Delete comment
           </CustomMenu.MenuItem>
         </CustomMenu>
diff --git a/web/components/issues/comment/comment-reaction.tsx b/web/components/issues/comment/comment-reaction.tsx
index b6ce3bbbc..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,33 +7,33 @@ 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[];
   commentId: string;
+  readonly?: boolean;
 };
 
-export const CommentReaction: React.FC<Props> = (props) => {
-  const { projectId, commentId } = props;
+export const CommentReaction: FC<Props> = (props) => {
+  const { projectId, commentId, readonly = false } = props;
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   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) {
@@ -47,16 +45,18 @@ export const CommentReaction: React.FC<Props> = (props) => {
 
   return (
     <div className="flex gap-1.5 items-center mt-2">
-      <ReactionSelector
-        size="md"
-        position="top"
-        value={
-          commentReactions
-            ?.filter((reaction) => reaction.actor === user?.id)
-            .map((r) => r.reaction) || []
-        }
-        onSelect={handleReactionClick}
-      />
+      {!readonly && (
+        <ReactionSelector
+          size="md"
+          position="top"
+          value={
+            commentReactions
+              ?.filter((reaction: IssueCommentReaction) => reaction.actor === user?.id)
+              .map((r: IssueCommentReaction) => r.reaction) || []
+          }
+          onSelect={handleReactionClick}
+        />
+      )}
 
       {Object.keys(groupedReactions || {}).map(
         (reaction) =>
@@ -64,12 +64,13 @@ export const CommentReaction: React.FC<Props> = (props) => {
           groupedReactions[reaction].length > 0 && (
             <button
               type="button"
+              disabled={readonly}
               onClick={() => {
                 handleReactionClick(reaction);
               }}
               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"
               }`}
@@ -77,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..f38ccb067 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;
@@ -40,7 +40,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -54,33 +54,32 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="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" size="sm" onClick={onDiscard}>
+                      Discard
+                    </Button>
                   </div>
-                  <div className="space-x-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleDeletion} loading={isLoading}>
+                  <div className="flex items-center gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
                       {isLoading ? "Saving..." : "Save Draft"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/delete-archived-issue-modal.tsx b/web/components/issues/delete-archived-issue-modal.tsx
new file mode 100644
index 000000000..14ecd7edd
--- /dev/null
+++ b/web/components/issues/delete-archived-issue-modal.tsx
@@ -0,0 +1,137 @@
+import { useEffect, useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IIssue;
+  onSubmit?: () => Promise<void>;
+};
+
+export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, handleClose, onSubmit } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { archivedIssueDetail: archivedIssueDetailStore } = useMobxStore();
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  const handleIssueDelete = async () => {
+    if (!workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
+    await archivedIssueDetailStore
+      .deleteArchivedIssue(workspaceSlug.toString(), data.project, data.id)
+      .then(() => {
+        if (onSubmit) onSubmit();
+      })
+      .catch((err) => {
+        const error = err?.detail;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          title: "Error",
+          type: "error",
+          message: errorString || "Something went wrong.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+        onClose();
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={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 transition-opacity" />
+        </Transition.Child>
+
+        <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={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <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">
+                      <AlertTriangle 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 Archived Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm text-custom-text-200">
+                      Are you sure you want to delete issue{" "}
+                      <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 archived issue will be permanently removed. This action
+                      cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      tabIndex={1}
+                      onClick={handleIssueDelete}
+                      loading={isDeleteLoading}
+                    >
+                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index 8347f555b..955d8ac78 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -1,26 +1,19 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-import useUser from "hooks/use-user";
-
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
+import { AlertTriangle } from "lucide-react";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IIssue } from "types";
-// fetch-keys
-import { PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -29,20 +22,21 @@ type Props = {
   onSubmit?: () => Promise<void> | void;
 };
 
-export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
+const issueDraftService = new IssueDraftService();
+
+export const DeleteDraftIssueModal: React.FC<Props> = observer((props) => {
   const { isOpen, handleClose, data, onSubmit } = props;
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
 
-  const { params } = useIssuesView();
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { user } = useUser();
-
   useEffect(() => {
     setIsDeleteLoading(false);
   }, [isOpen]);
@@ -57,12 +51,12 @@ 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();
-        mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+
         setToastAlert({
           title: "Success",
           message: "Draft Issue deleted successfully",
@@ -94,7 +88,7 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -108,14 +102,11 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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 +118,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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
                       {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -145,4 +138,4 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 62fc04723..38d0a33d1 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -1,62 +1,31 @@
-import React, { useEffect, useState } from "react";
-
+import { useEffect, useState, Fragment } 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 issueServices from "services/issues.service";
-// 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";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import type { IIssue, ICurrentUserResponse, ISubIssueResponse } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
+import type { IIssue } from "types";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
-  data: IIssue | null;
-  user: ICurrentUserResponse | undefined;
+  data: IIssue;
   onSubmit?: () => Promise<void>;
-  redirection?: boolean;
 };
 
-export const DeleteIssueModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  user,
-  onSubmit,
-  redirection = true,
-}) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+export const DeleteIssueModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, handleClose, onSubmit } = props;
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, issueId } = router.query;
-  const isArchivedIssues = router.pathname.includes("archived-issues");
+  const { workspaceSlug } = router.query;
 
-  const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
+  const { issueDetail: issueDetailStore } = useMobxStore();
 
-  const { setToastAlert } = useToast();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   useEffect(() => {
     setIsDeleteLoading(false);
@@ -67,112 +36,21 @@ export const DeleteIssueModal: React.FC<Props> = ({
     handleClose();
   };
 
-  const handleDeletion = async () => {
-    if (!workspaceSlug || !data) return;
+  const handleIssueDelete = async () => {
+    if (!workspaceSlug) return;
 
     setIsDeleteLoading(true);
 
-    await issueServices
-      .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);
+    await issueDetailStore.deleteIssue(workspaceSlug.toString(), data.project, data.id);
 
-          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 (data.parent) {
-            mutate<ISubIssueResponse>(
-              SUB_ISSUES(data.parent.toString()),
-              (prevData) => {
-                if (!prevData) return prevData;
-                const updatedArray = (prevData.sub_issues ?? []).filter((i) => i.id !== data.id);
-
-                return {
-                  ...prevData,
-                  sub_issues: updatedArray,
-                };
-              },
-              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));
-          else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-          else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, params));
-        }
-
-        if (onSubmit) onSubmit();
-
-        handleClose();
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Issue deleted successfully",
-        });
-
-        if (issueId && redirection) router.back();
-      })
-      .catch((error) => {
-        console.log(error);
-        setIsDeleteLoading(false);
-      });
-    if (onSubmit) await onSubmit();
+    if (onSubmit) await onSubmit().finally(() => setIsDeleteLoading(false));
   };
 
-  const handleArchivedIssueDeletion = async () => {
-    setIsDeleteLoading(true);
-    if (!workspaceSlug || !projectId || !data) return;
-
-    await issueServices
-      .deleteArchivedIssue(workspaceSlug as string, projectId as string, data.id)
-      .then(() => {
-        mutate(PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
-        handleClose();
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Issue deleted successfully",
-        });
-        router.back();
-      })
-      .catch((error) => {
-        console.log(error);
-        setIsDeleteLoading(false);
-      });
-  };
-
-  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"
@@ -180,13 +58,13 @@ export const DeleteIssueModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <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"
@@ -194,14 +72,11 @@ export const DeleteIssueModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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 +88,23 @@ 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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      tabIndex={1}
+                      onClick={handleIssueDelete}
+                      loading={isDeleteLoading}
+                    >
                       {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -231,4 +114,4 @@ export const DeleteIssueModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index 54ea0a976..8c6a75d30 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -1,15 +1,16 @@
-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 { TipTapEditor } from "components/tiptap";
+import { TextArea } from "@plane/ui";
+import { RichTextEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types";
+// services
+import { FileService } from "services/file.service";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -20,28 +21,29 @@ export interface IssueDetailsProps {
   issue: {
     name: string;
     description_html: string;
+    project_id?: string;
   };
   workspaceSlug: string;
   handleFormSubmit: (value: IssueDescriptionFormValues) => Promise<void>;
   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);
 
   const { setShowAlert } = useReloadConfirmations();
 
+  const editorSuggestion = useEditorSuggestions();
+
   const {
     handleSubmit,
     watch,
     reset,
-    register,
     control,
     formState: { errors },
   } = useForm<IIssue>({
@@ -51,6 +53,14 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     },
   });
 
+  const [localTitleValue, setLocalTitleValue] = useState("");
+  const issueTitleCurrentValue = watch("name");
+  useEffect(() => {
+    if (localTitleValue === "" && issueTitleCurrentValue !== "") {
+      setLocalTitleValue(issueTitleCurrentValue);
+    }
+  }, [issueTitleCurrentValue, localTitleValue]);
+
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<IIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
@@ -83,42 +93,45 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     });
   }, [issue, reset]);
 
-  const debouncedTitleSave = useDebouncedCallback(async () => {
-    setTimeout(async () => {
-      handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
-    }, 500);
-  }, 1000);
+  const debouncedFormSave = useDebouncedCallback(async () => {
+    handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+  }, 1500);
 
   return (
     <div className="relative">
       <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-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: { onChange } }) => (
+              <TextArea
+                value={localTitleValue}
+                id="name"
+                name="name"
+                placeholder="Enter issue name"
+                onFocus={() => setCharacterLimit(true)}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+                  setCharacterLimit(false);
+                  setIsSubmitting("submitting");
+                  setLocalTitleValue(e.target.value);
+                  onChange(e.target.value);
+                  debouncedFormSave();
+                }}
+                required
+                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
@@ -130,38 +143,26 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         <Controller
           name="description_html"
           control={control}
-          render={({ field: { value, onChange } }) => {
-            if (!value) return <></>;
-
-            return (
-              <TipTapEditor
-                value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
-                    ? "<p></p>"
-                    : value
-                }
-                workspaceSlug={workspaceSlug}
-                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")
-                  );
-                }}
-                editable={isAllowed}
-              />
-            );
-          }}
+          render={({ field: { value, onChange } }) => (
+            <RichTextEditor
+              cancelUploadImage={fileService.cancelUpload}
+              uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+              deleteFile={fileService.deleteImage}
+              value={value}
+              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);
+                debouncedFormSave();
+              }}
+              mentionSuggestions={editorSuggestion.mentionSuggestions}
+              mentionHighlights={editorSuggestion.mentionHighlights}
+            />
+          )}
         />
         <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 ${
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index 4a653dd86..e42d8aab3 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,12 +22,18 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
+import {} from "components/ui";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
 // icons
-import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Sparkle, X } from "lucide-react";
 // types
-import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+import type { IUser, IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+const aiService = new AIService();
+const fileService = new FileService();
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -48,9 +52,7 @@ const defaultValues: Partial<IIssue> = {
   parent: null,
   priority: "none",
   assignees: [],
-  assignees_list: [],
   labels: [],
-  labels_list: [],
   start_date: null,
   target_date: null,
 };
@@ -70,7 +72,7 @@ interface IssueFormProps {
   handleClose: () => void;
   handleDiscard: () => void;
   status: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   fieldsToShow: (
     | "project"
     | "name"
@@ -97,7 +99,6 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     setActiveProject,
     createMore,
     setCreateMore,
-    handleClose,
     status,
     user,
     fieldsToShow,
@@ -121,8 +122,9 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
 
   const { setToastAlert } = useToast();
 
+  const editorSuggestions = useEditorSuggestions();
+
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
@@ -165,9 +167,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>,
@@ -240,9 +257,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({
@@ -285,21 +300,12 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     <>
       {projectId && (
         <>
-          <CreateStateModal
-            isOpen={stateModal}
-            handleClose={() => setStateModal(false)}
-            projectId={projectId}
-            user={user}
-          />
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            user={user}
-            onSuccess={(response) => {
-              setValue("labels", [...watch("labels"), response.id]);
-              setValue("labels_list", [...watch("labels_list"), response.id]);
-            }}
+            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
           />
         </>
       )}
@@ -343,10 +349,8 @@ 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>
-                  <XMarkIcon
+                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
+                  <X
                     className="h-3 w-3 cursor-pointer"
                     onClick={() => {
                       setValue("parent", null);
@@ -360,21 +364,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>
               )}
@@ -394,7 +406,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                           "Generating response..."
                         ) : (
                           <>
-                            <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                           </>
                         )}
                       </button>
@@ -404,36 +416,34 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                       className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                       onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     >
-                      <SparklesIcon className="h-4 w-4" />
+                      <Sparkle className="h-4 w-4" />
                       AI
                     </button>
                   </div>
                   <Controller
                     name="description_html"
                     control={control}
-                    render={({ field: { value, onChange } }) => {
-                      if (!value && !watch("description_html")) return <></>;
-
-                      return (
-                        <TipTapEditor
-                          workspaceSlug={workspaceSlug as string}
-                          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);
-                          }}
-                        />
-                      );
-                    }}
+                    render={({ field: { value, onChange } }) => (
+                      <RichTextEditorWithRef
+                        cancelUploadImage={fileService.cancelUpload}
+                        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);
+                        }}
+                        mentionHighlights={editorSuggestions.mentionHighlights}
+                        mentionSuggestions={editorSuggestions.mentionSuggestions}
+                      />
+                    )}
                   />
                   <GptAssistantModal
                     isOpen={gptAssistantModal}
@@ -481,11 +491,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} />
                     )}
                   />
                 )}
@@ -567,24 +573,15 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                   <CustomMenu ellipsis>
                     {watch("parent") ? (
                       <>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setParentIssueListModalOpen(true)}
-                        >
+                        <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
                           Change parent issue
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setValue("parent", null)}
-                        >
+                        <CustomMenu.MenuItem onClick={() => setValue("parent", null)}>
                           Remove parent issue
                         </CustomMenu.MenuItem>
                       </>
                     ) : (
-                      <CustomMenu.MenuItem
-                        renderAs="button"
-                        onClick={() => setParentIssueListModalOpen(true)}
-                      >
+                      <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
                         Select Parent Issue
                       </CustomMenu.MenuItem>
                     )}
@@ -603,23 +600,29 @@ 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" size="sm" onClick={handleDiscard}>
+              Discard
+            </Button>
+            <Button
+              variant="neutral-primary"
+              size="sm"
               loading={isSubmitting}
               onClick={handleSubmit((formData) =>
                 handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
               )}
             >
               {isSubmitting ? "Saving..." : "Save Draft"}
-            </SecondaryButton>
-            <PrimaryButton
+            </Button>
+            <Button
               loading={isSubmitting}
+              variant="primary"
+              size="sm"
               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..189706cef 100644
--- a/web/components/issues/draft-issue-modal.tsx
+++ b/web/components/issues/draft-issue-modal.tsx
@@ -1,40 +1,22 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
 // components
 import { DraftIssueForm } from "components/issues";
 // types
 import type { IIssue } from "types";
 // fetch-keys
-import {
-  PROJECT_ISSUES_DETAILS,
-  USER_ISSUE,
-  SUB_ISSUES,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  VIEW_ISSUES,
-  PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-} from "constants/fetch-keys";
-import modulesService from "services/modules.service";
+import { PROJECT_ISSUES_DETAILS, USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
 
 interface IssuesModalProps {
   data?: IIssue | null;
@@ -59,7 +41,12 @@ interface IssuesModalProps {
   onSubmit?: (data: Partial<IIssue>) => Promise<void> | void;
 }
 
-export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) => {
+// services
+const issueService = new IssueService();
+const issueDraftService = new IssueDraftService();
+const moduleService = new ModuleService();
+
+export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer((props) => {
   const {
     data,
     handleClose,
@@ -76,20 +63,15 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const [prePopulateData, setPreloadedData] = useState<Partial<IIssue> | undefined>(undefined);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
-  const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
-  const { ...viewGanttParams } = params;
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
+  const { project: projectStore, user: userStore } = useMobxStore();
 
-  const { user } = useUser();
-  const { projects } = useProjects();
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { clearValue: clearDraftIssueLocalStorage } = useLocalStorage("draftedIssue", {});
 
-  const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
-
   const { setToastAlert } = useToast();
 
   const onClose = () => {
@@ -131,6 +113,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 +154,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,48 +164,19 @@ 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
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), viewGanttParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "");
-
   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));
-
-        if (groupedIssues) mutateMyIssues();
-
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "Issue created successfully.",
         });
 
-        if (payload.assignees_list?.some((assignee) => assignee === user?.id))
-          mutate(USER_ISSUE(workspaceSlug as string));
+        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug.toString()));
       })
       .catch(() => {
         setToastAlert({
@@ -212,17 +192,13 @@ 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));
         }
 
         if (!payload.is_draft) {
@@ -248,66 +224,42 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   };
 
   const addIssueToCycle = async (issueId: string, cycleId: string) => {
-    if (!workspaceSlug || !activeProject) return;
+    if (!workspaceSlug || !activeProject || !user) return;
 
-    await issuesService
-      .addIssueToCycle(
-        workspaceSlug as string,
-        activeProject ?? "",
-        cycleId,
-        {
-          issues: [issueId],
-        },
-        user
-      )
-      .then(() => {
-        if (cycleId) {
-          mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
-          mutate(CYCLE_DETAILS(cycleId as string));
-        }
-      });
+    await issueService.addIssueToCycle(
+      workspaceSlug as string,
+      activeProject ?? "",
+      cycleId,
+      {
+        issues: [issueId],
+      },
+      user
+    );
   };
 
   const addIssueToModule = async (issueId: string, moduleId: string) => {
-    if (!workspaceSlug || !activeProject) return;
+    if (!workspaceSlug || !activeProject || !user) return;
 
-    await modulesService
-      .addIssuesToModule(
-        workspaceSlug as string,
-        activeProject ?? "",
-        moduleId as string,
-        {
-          issues: [issueId],
-        },
-        user
-      )
-      .then(() => {
-        if (moduleId) {
-          mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-          mutate(MODULE_DETAILS(moduleId as string));
-        }
-      });
+    await moduleService.addIssuesToModule(
+      workspaceSlug as string,
+      activeProject ?? "",
+      moduleId as string,
+      {
+        issues: [issueId],
+      },
+      user
+    );
   };
 
   const createIssue = async (payload: Partial<IIssue>) => {
-    if (!workspaceSlug || !activeProject) return;
+    if (!workspaceSlug || !activeProject || !user) return;
 
-    await issuesService
-      .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
+    await issueService
+      .createIssue(workspaceSlug.toString(), 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({
           type: "success",
           title: "Success!",
@@ -316,8 +268,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
 
         if (!createMore) onClose();
 
-        if (payload.assignees_list?.some((assignee) => assignee === user?.id))
-          mutate(USER_ISSUE(workspaceSlug as string));
+        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
 
         if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
       })
@@ -338,15 +289,12 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
 
     const payload: Partial<IIssue> = {
       ...formData,
-      assignees_list: formData.assignees ?? [],
-      labels_list: formData.labels ?? [],
       description: formData.description ?? "",
       description_html: formData.description_html ?? "<p></p>",
     };
 
     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();
@@ -369,7 +317,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -383,7 +331,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
                 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 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                   <DraftIssueForm
                     isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}
@@ -396,7 +344,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
                     projectId={activeProject ?? ""}
                     setActiveProject={setActiveProject}
                     status={data ? true : false}
-                    user={user}
+                    user={user ?? undefined}
                     fieldsToShow={fieldsToShow}
                   />
                 </Dialog.Panel>
@@ -407,4 +355,4 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
       </Transition.Root>
     </>
   );
-};
+});
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index 4dcd03874..d2c91d47d 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -1,11 +1,12 @@
 import React, { FC, useState, useEffect, useRef } from "react";
-
 import { useRouter } from "next/router";
-
-// react-hook-form
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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
@@ -19,37 +20,31 @@ import {
   IssuePrioritySelect,
   IssueProjectSelect,
   IssueStateSelect,
+  IssueModuleSelect,
+  IssueCycleSelect,
 } from "components/issues/select";
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
 // icons
-import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { LayoutPanelTop, Sparkle, X } from "lucide-react";
 // types
-import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+import type { IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
   name: "",
-  description: {
-    type: "doc",
-    content: [
-      {
-        type: "paragraph",
-      },
-    ],
-  },
   description_html: "<p></p>",
   estimate_point: null,
   state: "",
   parent: null,
   priority: "none",
   assignees: [],
-  assignees_list: [],
   labels: [],
-  labels_list: [],
   start_date: null,
   target_date: null,
 };
@@ -63,7 +58,6 @@ export interface IssueFormProps {
   setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
   handleDiscardClose: () => void;
   status: boolean;
-  user: ICurrentUserResponse | undefined;
   handleFormDirty: (payload: Partial<IIssue> | null) => void;
   fieldsToShow: (
     | "project"
@@ -78,10 +72,16 @@ export interface IssueFormProps {
     | "estimate"
     | "parent"
     | "all"
+    | "module"
+    | "cycle"
   )[];
 }
 
-export const IssueForm: FC<IssueFormProps> = (props) => {
+// services
+const aiService = new AIService();
+const fileService = new FileService();
+
+export const IssueForm: FC<IssueFormProps> = observer((props) => {
   const {
     handleFormSubmit,
     initialData,
@@ -91,7 +91,6 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
     setCreateMore,
     handleDiscardClose,
     status,
-    user,
     fieldsToShow,
     handleFormDirty,
   } = props;
@@ -109,10 +108,15 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+
+  const editorSuggestion = useEditorSuggestions();
+
   const { setToastAlert } = useToast();
 
   const {
-    register,
     formState: { errors, isSubmitting, isDirty },
     handleSubmit,
     reset,
@@ -129,19 +133,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(() => {
@@ -180,7 +183,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   };
 
   const handleAutoGenerateDescription = async () => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !user) return;
 
     setIAmFeelingLucky(true);
 
@@ -211,9 +214,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({
@@ -255,21 +256,12 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
     <>
       {projectId && (
         <>
-          <CreateStateModal
-            isOpen={stateModal}
-            handleClose={() => setStateModal(false)}
-            projectId={projectId}
-            user={user}
-          />
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            user={user}
-            onSuccess={(response) => {
-              setValue("labels", [...watch("labels"), response.id]);
-              setValue("labels_list", [...watch("labels_list"), response.id]);
-            }}
+            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
           />
         </>
       )}
@@ -280,9 +272,13 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
               <Controller
                 control={control}
                 name="project"
-                render={({ field: { value, onChange } }) => (
+                rules={{
+                  required: true,
+                }}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
                   <IssueProjectSelect
                     value={value}
+                    error={error}
                     onChange={(val: string) => {
                       onChange(val);
                       setActiveProject(val);
@@ -309,10 +305,8 @@ 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>
-                  <XMarkIcon
+                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
+                  <X
                     className="h-3 w-3 cursor-pointer"
                     onClick={() => {
                       setValue("parent", null);
@@ -326,27 +320,35 @@ 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="Issue Title"
+                        className="resize-none text-xl w-full focus:border-blue-400"
+                      />
+                    )}
                   />
                 </div>
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
                 <div className="relative">
-                  <div className="flex justify-end">
+                  <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex rounded bg-custom-background-80">
                     {issueName && issueName !== "" && (
                       <button
                         type="button"
@@ -360,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                           "Generating response..."
                         ) : (
                           <>
-                            <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                           </>
                         )}
                       </button>
@@ -370,36 +372,34 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                       className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                       onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     >
-                      <SparklesIcon className="h-4 w-4" />
+                      <Sparkle className="h-4 w-4" />
                       AI
                     </button>
                   </div>
                   <Controller
                     name="description_html"
                     control={control}
-                    render={({ field: { value, onChange } }) => {
-                      if (!value && !watch("description_html")) return <></>;
-
-                      return (
-                        <TipTapEditor
-                          workspaceSlug={workspaceSlug as string}
-                          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);
-                          }}
-                        />
-                      );
-                    }}
+                    render={({ field: { value, onChange } }) => (
+                      <RichTextEditorWithRef
+                        cancelUploadImage={fileService.cancelUpload}
+                        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-[7rem] border-custom-border-100"
+                        onChange={(description: Object, description_html: string) => {
+                          onChange(description_html);
+                          setValue("description", description);
+                        }}
+                        mentionHighlights={editorSuggestion.mentionHighlights}
+                        mentionSuggestions={editorSuggestion.mentionSuggestions}
+                      />
+                    )}
                   />
                   <GptAssistantModal
                     isOpen={gptAssistantModal}
@@ -447,11 +447,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} />
                     )}
                   />
                 )}
@@ -501,8 +497,40 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                     />
                   </div>
                 )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
+                  <Controller
+                    control={control}
+                    name="module"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueModuleSelect
+                        workspaceSlug={workspaceSlug as string}
+                        projectId={projectId}
+                        value={value}
+                        onChange={(val: string) => {
+                          onChange(val);
+                        }}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
+                  <Controller
+                    control={control}
+                    name="cycle"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueCycleSelect
+                        workspaceSlug={workspaceSlug as string}
+                        projectId={projectId}
+                        value={value}
+                        onChange={(val: string) => {
+                          onChange(val);
+                        }}
+                      />
+                    )}
+                  />
+                )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
-                  <div>
+                  <>
                     <Controller
                       control={control}
                       name="estimate_point"
@@ -510,73 +538,92 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                         <IssueEstimateSelect value={value} onChange={onChange} />
                       )}
                     />
-                  </div>
+                  </>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <Controller
-                    control={control}
-                    name="parent"
-                    render={({ field: { onChange } }) => (
-                      <ParentIssuesListModal
-                        isOpen={parentIssueListModalOpen}
-                        handleClose={() => setParentIssueListModalOpen(false)}
-                        onChange={(issue) => {
-                          onChange(issue.id);
-                          setSelectedParentIssue(issue);
-                        }}
-                        projectId={projectId}
-                      />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <CustomMenu ellipsis>
-                    {watch("parent") ? (
-                      <>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setParentIssueListModalOpen(true)}
+                  <>
+                    <CustomMenu
+                      customButton={
+                        <button
+                          type="button"
+                          className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
                         >
-                          Change parent issue
+                          {watch("parent") ? (
+                            <div className="flex items-center gap-1 text-custom-text-200">
+                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                              <span className="whitespace-nowrap">
+                                {selectedParentIssue &&
+                                  `${selectedParentIssue.project__identifier}-
+                                  ${selectedParentIssue.sequence_id}`}
+                              </span>
+                            </div>
+                          ) : (
+                            <div className="flex items-center gap-1 text-custom-text-300">
+                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                              <span className="whitespace-nowrap">Add Parent</span>
+                            </div>
+                          )}
+                        </button>
+                      }
+                      placement="bottom-start"
+                    >
+                      {watch("parent") ? (
+                        <>
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                            Change parent issue
+                          </CustomMenu.MenuItem>
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
+                            Remove parent issue
+                          </CustomMenu.MenuItem>
+                        </>
+                      ) : (
+                        <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                          Select Parent Issue
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setValue("parent", null)}
-                        >
-                          Remove parent issue
-                        </CustomMenu.MenuItem>
-                      </>
-                    ) : (
-                      <CustomMenu.MenuItem
-                        renderAs="button"
-                        onClick={() => setParentIssueListModalOpen(true)}
-                      >
-                        Select Parent Issue
-                      </CustomMenu.MenuItem>
-                    )}
-                  </CustomMenu>
+                      )}
+                    </CustomMenu>
+                    <Controller
+                      control={control}
+                      name="parent"
+                      render={({ field: { onChange } }) => (
+                        <ParentIssuesListModal
+                          isOpen={parentIssueListModalOpen}
+                          handleClose={() => setParentIssueListModalOpen(false)}
+                          onChange={(issue) => {
+                            onChange(issue.id);
+                            setSelectedParentIssue(issue);
+                          }}
+                          projectId={projectId}
+                        />
+                      )}
+                    />
+                  </>
                 )}
               </div>
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
           <div
-            className="flex cursor-pointer items-center gap-1"
+            className="flex cursor-default items-center gap-1.5"
             onClick={() => setCreateMore((prevData) => !prevData)}
           >
+            <div className="flex cursor-pointer items-center justify-center">
+              <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
+            </div>
             <span className="text-xs">Create more</span>
-            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <SecondaryButton
+            <Button
+              variant="neutral-primary"
+              size="sm"
               onClick={() => {
                 handleDiscardClose();
               }}
             >
               Discard
-            </SecondaryButton>
-            <PrimaryButton type="submit" loading={isSubmitting}>
+            </Button>
+            <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
               {status
                 ? isSubmitting
                   ? "Updating Issue..."
@@ -584,10 +631,10 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                 : isSubmitting
                 ? "Adding Issue..."
                 : "Add Issue"}
-            </PrimaryButton>
+            </Button>
           </div>
         </div>
       </form>
     </>
   );
-};
+});
diff --git a/web/components/issues/gantt-chart/blocks.tsx b/web/components/issues/gantt-chart/blocks.tsx
deleted file mode 100644
index 3364565a3..000000000
--- a/web/components/issues/gantt-chart/blocks.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { StateGroupIcon } from "components/icons";
-// helpers
-import { renderShortDate } from "helpers/date-time.helper";
-// types
-import { IIssue } from "types";
-
-export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
-  const router = useRouter();
-
-  const openPeekOverview = () => {
-    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: data.id },
-    });
-  };
-
-  return (
-    <div
-      className="flex items-center relative h-full w-full rounded cursor-pointer"
-      style={{ backgroundColor: data?.state_detail?.color }}
-      onClick={openPeekOverview}
-    >
-      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{data?.name}</h5>
-            <div>
-              {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>
-      </Tooltip>
-    </div>
-  );
-};
-
-// rendering issues on gantt sidebar
-export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
-  const router = useRouter();
-
-  const openPeekOverview = () => {
-    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: data.id },
-    });
-  };
-
-  return (
-    <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}
-      </div>
-      <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
-    </div>
-  );
-};
diff --git a/web/components/issues/gantt-chart/layout.tsx b/web/components/issues/gantt-chart/layout.tsx
deleted file mode 100644
index ed4cd3d70..000000000
--- a/web/components/issues/gantt-chart/layout.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useRouter } from "next/router";
-
-// 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";
-
-type Props = {
-  disableUserActions: boolean;
-};
-
-export const IssueGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
-  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 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())
-          }
-          BlockRender={IssueGanttBlock}
-          SidebarBlockRender={IssueGanttSidebarBlock}
-          enableBlockLeftResize={isAllowed}
-          enableBlockRightResize={isAllowed}
-          enableBlockMove={isAllowed}
-          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-          bottomSpacing
-        />
-      </div>
-    </>
-  );
-};
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index 6b83e7ef4..3768d66cd 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -1,13 +1,12 @@
 export * from "./attachment";
 export * from "./comment";
-export * from "./my-issues";
 export * from "./sidebar-select";
 export * from "./view-select";
 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";
@@ -21,3 +20,6 @@ export * from "./confirm-issue-discard";
 export * from "./draft-issue-form";
 export * from "./draft-issue-modal";
 export * from "./delete-draft-issue-modal";
+
+// archived issue
+export * from "./delete-archived-issue-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..bdc0a786e
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -0,0 +1,72 @@
+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";
+import { IIssue } from "types";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+  layout: "month" | "week" | undefined;
+  showWeekends: boolean;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+};
+
+export const CalendarChart: React.FC<Props> = observer((props) => {
+  const { issues, layout, showWeekends, handleIssues, quickActions } = 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 isLoading={!issues} showWeekends={showWeekends} />
+        <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}
+                    enableQuickIssueCreate
+                    handleIssues={handleIssues}
+                    quickActions={quickActions}
+                  />
+                ))}
+            </div>
+          )}
+          {layout === "week" && (
+            <CalendarWeekDays
+              week={calendarStore.allDaysOfActiveWeek}
+              issues={issues}
+              enableQuickIssueCreate
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+            />
+          )}
+        </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..87a28a320
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -0,0 +1,86 @@
+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, CalendarInlineCreateIssueForm } from "components/issues";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+import { IIssue } from "types";
+
+type Props = {
+  date: ICalendarDate;
+  issues: IIssueGroupedStructure | null;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const CalendarDayTile: React.FC<Props> = observer((props) => {
+  const { date, issues, handleIssues, quickActions, enableQuickIssueCreate } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const issuesList = issues ? (issues as IIssueGroupedStructure)[renderDateFormat(date.date)] : null;
+
+  return (
+    <>
+      <div className="group w-full h-full relative flex flex-col bg-custom-background-90">
+        {/* header */}
+        <div
+          className={`text-xs text-right flex-shrink-0 py-1 px-2 ${
+            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.getDay() === 0 || date.date.getDay() === 6
+              ? "bg-custom-background-90"
+              : "bg-custom-background-100"
+          }`}
+        >
+          {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
+          {date.date.getDate()}
+        </div>
+
+        {/* content */}
+        <div className="w-full h-full">
+          <Droppable droppableId={renderDateFormat(date.date)} isDropDisabled={false}>
+            {(provided, snapshot) => (
+              <div
+                className={`h-full w-full overflow-y-auto select-none ${
+                  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}
+              >
+                <CalendarIssueBlocks issues={issuesList} handleIssues={handleIssues} quickActions={quickActions} />
+                {enableQuickIssueCreate && (
+                  <div className="py-1 px-2">
+                    <CalendarInlineCreateIssueForm
+                      groupId={renderDateFormat(date.date)}
+                      prePopulatedData={{
+                        target_date: renderDateFormat(date.date),
+                      }}
+                    />
+                  </div>
+                )}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </div>
+      </div>
+    </>
+  );
+});
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..ba72bfc26
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// 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 [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  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 as={React.Fragment}>
+        <button
+          type="button"
+          ref={setReferenceElement}
+          className="outline-none text-xl font-semibold"
+          disabled={calendarLayout === "week"}
+        >
+          {calendarLayout === "month"
+            ? `${MONTHS_LIST[activeMonthDate.getMonth() + 1].title} ${activeMonthDate.getFullYear()}`
+            : getWeekLayoutHeader()}
+        </button>
+      </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="fixed z-50">
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className="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..f9fb48f21
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Popover, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// 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 [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  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 }) => (
+        <>
+          <Popover.Button as={React.Fragment}>
+            <button
+              type="button"
+              ref={setReferenceElement}
+              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>
+            </button>
+          </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="fixed z-50">
+              <div
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+                className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-sm 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..a33cf557b
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/index.ts
@@ -0,0 +1,10 @@
+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";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
new file mode 100644
index 000000000..ddab04b0a
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
+// icons
+import { PlusIcon } from "lucide-react";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-xs 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-1.5 rounded-md bg-transparent text-xs font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLDivElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div
+          ref={ref}
+          className={`transition-all z-20 w-full ${
+            isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
+          }`}
+        >
+          <form
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex w-full px-2 border-[0.5px] border-custom-border-200 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs transition-opacity"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      )}
+
+      {!isOpen && (
+        <div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
+          <button
+            type="button"
+            className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1.5 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </>
+  );
+});
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..931abd081
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -0,0 +1,70 @@
+import { observer } from "mobx-react-lite";
+import { Draggable } from "@hello-pangea/dnd";
+// components
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issues: IIssue[] | null;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+};
+
+export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
+  const { issues, handleIssues, quickActions } = props;
+
+  return (
+    <>
+      {issues?.map((issue, index) => (
+        <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          {(provided, snapshot) => (
+            <div
+              className="p-1 px-2 relative"
+              {...provided.draggableProps}
+              {...provided.dragHandleProps}
+              ref={provided.innerRef}
+            >
+              {issue?.tempId !== undefined && (
+                <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+              )}
+
+              <div
+                className={`group/calendar-block 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"
+                }`}
+              >
+                <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>
+                <IssuePeekOverview
+                  workspaceSlug={issue?.workspace_detail?.slug}
+                  projectId={issue?.project_detail?.id}
+                  issueId={issue?.id}
+                  // TODO: add the logic here
+                  handleIssue={(issueToUpdate) => {
+                    handleIssues(issue.target_date ?? "", { ...issue, ...issueToUpdate }, "update");
+                  }}
+                >
+                  <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                    <div className="text-xs truncate">{issue.name}</div>
+                  </Tooltip>
+                </IssuePeekOverview>
+                <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
+              </div>
+            </div>
+          )}
+        </Draggable>
+      ))}
+    </>
+  );
+});
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..a340f534e
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -0,0 +1,80 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+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, CycleIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const CycleCalendarLayout: React.FC = observer(() => {
+  const {
+    cycleIssue: cycleIssueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    cycleIssueCalendarView: cycleIssueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+
+  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;
+
+    cycleIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = cycleIssueStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !cycleId) return;
+
+      if (action === "update") {
+        cycleIssueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") cycleIssueStore.deleteIssue(date, null, issue);
+      if (action === "remove" && issue.bridge_id) {
+        cycleIssueStore.deleteIssue(date, null, issue);
+        cycleIssueStore.removeIssueFromCycle(
+          workspaceSlug.toString(),
+          issue.project,
+          cycleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
+  );
+
+  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}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <CycleIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+              handleRemoveFromCycle={async () => handleIssues(issue.target_date ?? "", issue, "remove")}
+            />
+          )}
+        />
+      </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..a5f3b9cc1
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -0,0 +1,82 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+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, ModuleIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ModuleCalendarLayout: React.FC = observer(() => {
+  const {
+    moduleIssue: moduleIssueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    moduleIssueCalendarView: moduleIssueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+
+  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;
+
+    moduleIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = moduleIssueStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        moduleIssueStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(date, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
+  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}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <ModuleIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+              handleRemoveFromModule={async () => handleIssues(issue.target_date ?? "", issue, "remove")}
+            />
+          )}
+        />
+      </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..dfd0208a6
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+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, ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const CalendarLayout: React.FC = observer(() => {
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    issueCalendarView: issueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  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;
+
+    issueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = issueStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        issueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        issueStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+    },
+    [issueStore, issueDetailStore, workspaceSlug]
+  );
+
+  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}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <ProjectIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+            />
+          )}
+        />
+      </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..2d5ed50bb
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+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, ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ProjectViewCalendarLayout: React.FC = observer(() => {
+  const {
+    projectViewIssues: projectViewIssuesStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  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;
+
+    projectViewIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = projectViewIssuesStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        projectViewIssuesStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        projectViewIssuesStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+    },
+    [projectViewIssuesStore, issueDetailStore, workspaceSlug]
+  );
+
+  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}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <ProjectIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+            />
+          )}
+        />
+      </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..6762d9db5
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -0,0 +1,54 @@
+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";
+import { IIssue } from "types";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+  week: ICalendarWeek | undefined;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const CalendarWeekDays: React.FC<Props> = observer((props) => {
+  const { issues, week, handleIssues, quickActions, enableQuickIssueCreate } = 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}
+            handleIssues={handleIssues}
+            quickActions={quickActions}
+            enableQuickIssueCreate={enableQuickIssueCreate}
+          />
+        );
+      })}
+    </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..52e64e5ae
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -0,0 +1,34 @@
+import { observer } from "mobx-react-lite";
+
+// constants
+import { DAYS_LIST } from "constants/calendar";
+
+type Props = {
+  isLoading: boolean;
+  showWeekends: boolean;
+};
+
+export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
+  const { isLoading, showWeekends } = props;
+
+  return (
+    <div
+      className={`relative grid text-sm font-medium divide-x-[0.5px] divide-custom-border-200 ${
+        showWeekends ? "grid-cols-7" : "grid-cols-5"
+      }`}
+    >
+      {isLoading && (
+        <div className="absolute h-[1.5px] w-3/4 bg-custom-primary-100 animate-[bar-loader_2s_linear_infinite]" />
+      )}
+      {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/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
new file mode 100644
index 000000000..7d4a5104f
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { EmptyState } from "components/common";
+import { ExistingIssuesListModal } from "components/core";
+// ui
+import { Button } from "@plane/ui";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+// types
+import { ISearchIssueResponse } from "types";
+
+type Props = {
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  cycleId: string | undefined;
+};
+
+export const CycleEmptyState: React.FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, cycleId } = props;
+  // states
+  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+
+  const { cycleIssue: cycleIssueStore, commandPalette: commandPaletteStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    const issueIds = data.map((i) => i.id);
+
+    await cycleIssueStore
+      .addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={cycleIssuesListModal}
+        handleClose={() => setCycleIssuesListModal(false)}
+        searchParams={{ cycle: true }}
+        handleOnSubmit={handleAddIssuesToCycle}
+      />
+      <div className="h-full w-full grid place-items-center">
+        <EmptyState
+          title="Cycle issues will appear here"
+          description="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."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => commandPaletteStore.toggleCreateIssueModal(true),
+          }}
+          secondaryButton={
+            <Button
+              variant="neutral-primary"
+              prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+              onClick={() => setCycleIssuesListModal(true)}
+            >
+              Add an existing issue
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/global-view.tsx b/web/components/issues/issue-layouts/empty-states/global-view.tsx
new file mode 100644
index 000000000..bbe5f16a5
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -0,0 +1,49 @@
+// next
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { EmptyState } from "components/common";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+import emptyProject from "public/empty-state/project.svg";
+// icons
+import { Plus, PlusIcon } from "lucide-react";
+
+export const GlobalViewEmptyState: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { commandPalette: commandPaletteStore, project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  return (
+    <div className="h-full w-full grid place-items-center">
+      {!projects || projects?.length === 0 ? (
+        <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: () => commandPaletteStore.toggleCreateProjectModal(true),
+          }}
+        />
+      ) : (
+        <EmptyState
+          title="View issues will appear here"
+          description="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."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => commandPaletteStore.toggleCreateIssueModal(true),
+          }}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/index.ts b/web/components/issues/issue-layouts/empty-states/index.ts
new file mode 100644
index 000000000..0373709d2
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle";
+export * from "./global-view";
+export * from "./module";
+export * from "./project-view";
+export * from "./project";
diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx
new file mode 100644
index 000000000..26e34dd28
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@@ -0,0 +1,76 @@
+import { PlusIcon } from "lucide-react";
+// components
+import { EmptyState } from "components/common";
+import { Button } from "@plane/ui";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+import { ExistingIssuesListModal } from "components/core";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { ISearchIssueResponse } from "types";
+import useToast from "hooks/use-toast";
+import { useState } from "react";
+
+type Props = {
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  moduleId: string | undefined;
+};
+
+export const ModuleEmptyState: React.FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, moduleId } = props;
+  // states
+  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
+
+  const { moduleIssue: moduleIssueStore, commandPalette: commandPaletteStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const issueIds = data.map((i) => i.id);
+
+    await moduleIssueStore
+      .addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={moduleIssuesListModal}
+        handleClose={() => setModuleIssuesListModal(false)}
+        searchParams={{ module: true }}
+        handleOnSubmit={handleAddIssuesToModule}
+      />
+      <div className="h-full w-full grid place-items-center">
+        <EmptyState
+          title="Module issues will appear here"
+          description="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."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => commandPaletteStore.toggleCreateIssueModal(true),
+          }}
+          secondaryButton={
+            <Button
+              variant="neutral-primary"
+              prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+              onClick={() => setModuleIssuesListModal(true)}
+            >
+              Add an existing issue
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/project-view.tsx b/web/components/issues/issue-layouts/empty-states/project-view.tsx
new file mode 100644
index 000000000..eb019f859
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -0,0 +1,27 @@
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { EmptyState } from "components/common";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+
+export const ProjectViewEmptyState: React.FC = observer(() => {
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
+  return (
+    <div className="h-full w-full grid place-items-center">
+      <EmptyState
+        title="View issues will appear here"
+        description="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."
+        image={emptyIssue}
+        primaryButton={{
+          text: "New issue",
+          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+          onClick: () => commandPaletteStore.toggleCreateIssueModal(true),
+        }}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/project.tsx b/web/components/issues/issue-layouts/empty-states/project.tsx
new file mode 100644
index 000000000..3d9b6c3d4
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/project.tsx
@@ -0,0 +1,27 @@
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { EmptyState } from "components/common";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+
+export const ProjectEmptyState: React.FC = observer(() => {
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
+  return (
+    <div className="h-full w-full grid place-items-center">
+      <EmptyState
+        title="Project issues will appear here"
+        description="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."
+        image={emptyIssue}
+        primaryButton={{
+          text: "New issue",
+          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+          onClick: () => commandPaletteStore.toggleCreateIssueModal(true),
+        }}
+      />
+    </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..cf3525838
--- /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 (
+    <>
+      {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>
+      ))}
+    </>
+  );
+});
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..f7672ac75
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -0,0 +1,115 @@
+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, IState, 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?: IState[] | undefined;
+};
+
+const membersFilters = ["assignees", "mentions", "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>
+            <div className="flex items-center gap-1 flex-wrap">
+              {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" && states && (
+                <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>
+          </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..ee597575f
--- /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 (
+    <>
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(labelId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/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..dc8ac397c
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -0,0 +1,40 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// ui
+import { Avatar } from "@plane/ui";
+// 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 (
+    <>
+      {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 name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <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>
+        );
+      })}
+    </>
+  );
+});
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..2ea704b84
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -0,0 +1,37 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { PriorityIcon } from "@plane/ui";
+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 (
+    <>
+      {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={`h-3 w-3`}
+          />
+          {priority}
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(priority)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/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..51b49fbff
--- /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 (
+    <>
+      {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>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
new file mode 100644
index 000000000..32e5a4a21
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@@ -0,0 +1,86 @@
+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 ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    archivedIssueFilters: archivedIssueFiltersStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+  } = useMobxStore();
+
+  const userFilters = archivedIssueFiltersStore.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) {
+      archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: null,
+        },
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    archivedIssueFiltersStore.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;
+    });
+
+    archivedIssueFiltersStore.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={projectMembers?.map((m) => m.member)}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </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..2bd0ffdfe
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-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 CycleAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    cycleIssueFilter: cycleIssueFilterStore,
+    projectState: projectStateStore,
+  } = 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={projectMembers?.map((m) => m.member)}
+        states={projectStateStore.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..9bc94b0c9
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -0,0 +1,115 @@
+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,
+    workspaceMember: { workspaceMembers },
+  } = 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={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..e5030d7c4
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
@@ -0,0 +1,6 @@
+export * from "./cycle-root";
+export * from "./global-view-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./project-root";
+export * from "./archived-issue";
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..6a5cd6944
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -0,0 +1,82 @@
+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,
+    projectState: projectStateStore,
+    projectMember: { projectMembers },
+  } = 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={projectMembers?.map((m) => m.member)}
+        states={projectStateStore.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..26f475733
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -0,0 +1,86 @@
+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,
+    projectState: projectStateStore,
+    projectMember: { projectMembers },
+  } = 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={projectMembers?.map((m) => m.member)}
+        states={projectStateStore.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..5f797a6ce
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -0,0 +1,115 @@
+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 ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    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={projectMembers?.map((m) => m.member)}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
+      />
+      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
+        <div className="flex items-center justify-center flex-shrink-0">
+          <Button variant="primary" size="sm" onClick={handleUpdateView}>
+            Update view
+          </Button>
+        </div>
+      )}
+    </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..eadf34005
--- /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 "@plane/ui";
+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 (
+    <>
+      {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>
+      ))}
+    </>
+  );
+});
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..c307d21c5
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -0,0 +1,41 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { StateGroupIcon } from "@plane/ui";
+import { X } from "lucide-react";
+// types
+import { IState } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  states: IState[];
+  values: string[];
+};
+
+export const AppliedStateFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, states, values } = props;
+
+  return (
+    <>
+      {values.map((stateId) => {
+        const stateDetails = states?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
+            {stateDetails.name}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/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..0133f9015
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -0,0 +1,126 @@
+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
+            displayFilters={displayFilters}
+            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
+              displayFilters={displayFilters}
+              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 ?? true,
+              sub_issue: displayFilters.sub_issue ?? true,
+            }}
+            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..aa057e417
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/group-by.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, TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  groupByOptions: TIssueGroupByOptions[];
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+};
+
+export const FilterGroupBy: React.FC<Props> = observer((props) => {
+  const { displayFilters, groupByOptions, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const selectedGroupBy = displayFilters.group_by ?? null;
+  const selectedSubGroupBy = displayFilters.sub_group_by ?? null;
+
+  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 (displayFilters.layout === "kanban" && 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..a6fa2bf06
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
@@ -0,0 +1,45 @@
+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);
+
+  const activeIssueType = selectedIssueType ?? null;
+
+  return (
+    <>
+      <FilterHeader
+        title="Issue Type"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_FILTER_OPTIONS.map((issueType) => (
+            <FilterOption
+              key={issueType?.key}
+              isChecked={activeIssueType === 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..004d1b6e9
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
@@ -0,0 +1,46 @@
+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);
+
+  const activeOrderBy = selectedOrderBy ?? "-created_at";
+
+  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={activeOrderBy === 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..f66422427
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+  subGroupByOptions: TIssueGroupByOptions[];
+};
+
+export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
+  const { displayFilters, handleUpdate, subGroupByOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const selectedGroupBy = displayFilters.group_by ?? null;
+  const selectedSubGroupBy = displayFilters.sub_group_by ?? null;
+
+  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..7c92b0ed9
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterAssignees: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, members, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  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 name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
+                    title={member.display_name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/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..90873cb7b
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterCreatedBy: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, members, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  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 name={member.display_name} src={member.avatar} size="sm" />}
+                    title={member.display_name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/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..781e7fcd5
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+// components
+import {
+  FilterAssignees,
+  FilterMentions,
+  FilterCreatedBy,
+  FilterLabels,
+  FilterPriority,
+  FilterProjects,
+  FilterStartDate,
+  FilterState,
+  FilterStateGroup,
+  FilterTargetDate,
+} from "components/issues";
+// types
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
+// constants
+import { ILayoutDisplayFiltersOptions } from "constants/issue";
+
+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?: IState[] | undefined;
+};
+
+export const FilterSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, members, projects, states } = props;
+
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="p-2.5 pb-0 bg-custom-background-100">
+        <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
+        {/* priority */}
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("priority", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state group */}
+        {isFilterEnabled("state_group") && (
+          <div className="py-2">
+            <FilterStateGroup
+              appliedFilters={filters.state_group ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state */}
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state", val)}
+              searchQuery={filtersSearchQuery}
+              states={states}
+            />
+          </div>
+        )}
+
+        {/* assignees */}
+        {isFilterEnabled("assignees") && (
+          <div className="py-2">
+            <FilterAssignees
+              appliedFilters={filters.assignees ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
+              members={members}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* assignees */}
+        {isFilterEnabled("mentions") && (
+          <div className="py-2">
+            <FilterMentions
+              appliedFilters={filters.mentions ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("mentions", val)}
+              members={members}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* created_by */}
+        {isFilterEnabled("created_by") && (
+          <div className="py-2">
+            <FilterCreatedBy
+              appliedFilters={filters.created_by ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
+              members={members}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* labels */}
+        {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("labels", val)}
+              labels={labels}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* project */}
+        {isFilterEnabled("project") && (
+          <div className="py-2">
+            <FilterProjects
+              appliedFilters={filters.project ?? null}
+              projects={projects}
+              handleUpdate={(val) => handleFiltersUpdate("project", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* start_date */}
+        {isFilterEnabled("start_date") && (
+          <div className="py-2">
+            <FilterStartDate
+              appliedFilters={filters.start_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* target_date */}
+        {isFilterEnabled("target_date") && (
+          <div className="py-2">
+            <FilterTargetDate
+              appliedFilters={filters.target_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+              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..2d3a04d0f
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/index.ts
@@ -0,0 +1,11 @@
+export * from "./assignee";
+export * from "./mentions";
+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..764d29951
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -0,0 +1,83 @@
+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;
+  labels: IIssueLabels[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
new file mode 100644
index 000000000..5d7a63097
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader, Avatar } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMentions: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, members, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Mention${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
+                  <FilterOption
+                    key={`mentions-${member.id}`}
+                    isChecked={appliedFilters?.includes(member.id) ? true : false}
+                    onClick={() => handleUpdate(member.id)}
+                    icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />}
+                    title={member.display_name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/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..660897100
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -0,0 +1,92 @@
+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;
+  searchQuery: string;
+};
+
+export const FilterPriority: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = 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.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}
+              />
+            ))
+          ) : (
+            <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..9dcc6b542
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -0,0 +1,95 @@
+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;
+  projects: IProject[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterProjects: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, projects, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  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}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/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..e58533270
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -0,0 +1,63 @@
+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;
+  searchQuery: string;
+};
+
+export const FilterStartDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, 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.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..fb4bd6e10
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// icons
+import { StateGroupIcon } from "@plane/ui";
+// constants
+import { ISSUE_STATE_GROUPS } from "constants/issue";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStateGroup: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_STATE_GROUPS.filter((s) => s.key.includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  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}
+                />
+              ))}
+              {filteredOptions.length > 5 && (
+                <button
+                  type="button"
+                  className="text-custom-primary-100 text-xs font-medium ml-8"
+                  onClick={handleViewToggle}
+                >
+                  {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                </button>
+              )}
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </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..6f193d029
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader, StateGroupIcon } from "@plane/ui";
+// types
+import { IState } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+  states: IState[] | undefined;
+};
+
+export const FilterState: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, searchQuery, states } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
+                    title={state.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/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..f914eb194
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -0,0 +1,63 @@
+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;
+  searchQuery: string;
+};
+
+export const FilterTargetDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, 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.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..0f93b75c9
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -0,0 +1,72 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ChevronUp } from "lucide-react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  placement?: Placement;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown", placement } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button
+                ref={setReferenceElement}
+                variant="neutral-primary"
+                size="sm"
+                appendIcon={
+                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                }
+              >
+                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                  <span>{title}</span>
+                </div>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/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..8212471a5
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -0,0 +1,42 @@
+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={`h-3.5 w-3.5 ${
+                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/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
new file mode 100644
index 000000000..7cf8cc664
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -0,0 +1,71 @@
+// ui
+import { Tooltip, StateGroupIcon } from "@plane/ui";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { IBlockUpdateData } from "components/gantt-chart";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+export const IssueGanttBlock = ({
+  data,
+  handleIssue,
+}: {
+  data: IIssue;
+  handleIssue: (block: IIssue, payload: IBlockUpdateData) => void;
+}) => (
+  <IssuePeekOverview
+    workspaceSlug={data?.workspace_detail?.slug}
+    projectId={data?.project_detail?.id}
+    issueId={data?.id}
+    handleIssue={(issueToUpdate) => handleIssue({ ...data, ...issueToUpdate }, {})}
+  >
+    <div
+      className="flex items-center relative h-full w-full rounded cursor-pointer"
+      style={{ backgroundColor: data?.state_detail?.color }}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <Tooltip tooltipHeading="Title" tooltipContent={data.name}>
+          <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
+        </Tooltip>
+      </Tooltip>
+    </div>
+  </IssuePeekOverview>
+);
+
+// rendering issues on gantt sidebar
+export const IssueGanttSidebarBlock = ({
+  data,
+  handleIssue,
+}: {
+  data: IIssue;
+  handleIssue: (block: IIssue, payload: IBlockUpdateData) => void;
+}) => (
+  <IssuePeekOverview
+    workspaceSlug={data?.workspace_detail?.slug}
+    projectId={data?.project_detail?.id}
+    issueId={data?.id}
+    handleIssue={(issueToUpdate) => handleIssue({ ...data, ...issueToUpdate }, {})}
+  >
+    <div className="relative w-full flex items-center gap-2 h-full cursor-pointer">
+      <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}
+      </div>
+      <Tooltip tooltipHeading="Title" tooltipContent={data.name}>
+        <span className="text-sm font-medium flex-grow truncate">{data?.name}</span>
+      </Tooltip>
+    </div>
+  </IssuePeekOverview>
+);
diff --git a/web/components/issues/issue-layouts/gantt/cycle-root.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
new file mode 100644
index 000000000..56a17db15
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -0,0 +1,57 @@
+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 { IssueGanttBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  IssueGanttSidebar,
+} from "components/gantt-chart";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const CycleGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = cycleIssueStore.getIssues;
+
+  const updateIssue = (block: any, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !cycleId) return;
+
+    cycleIssueStore.updateGanttIssueStructure(workspaceSlug.toString(), cycleId.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(props) => <IssueGanttSidebar {...props} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={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..87899ae83
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/index.ts
@@ -0,0 +1,6 @@
+export * from "./blocks";
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./root";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
new file mode 100644
index 000000000..0c87e6950
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
+
+type Props = {
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <input
+      type="text"
+      autoComplete="off"
+      placeholder="Issue Title"
+      {...register("name", {
+        required: "Issue title is required.",
+      })}
+      className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+    />
+  );
+};
+
+export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      start_date: renderDateFormat(new Date()),
+      target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <form
+          ref={ref}
+          className="flex py-3 px-2 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs"
+          onSubmit={handleSubmit(onSubmitHandler)}
+        >
+          <div className="w-3 h-3 rounded-full border border-custom-border-1000 flex-shrink-0" />
+          <h4 className="text-xs text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+          <Inputs register={register} setFocus={setFocus} />
+        </form>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </>
+  );
+});
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..c5a880bbe
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -0,0 +1,57 @@
+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 { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  IssueGanttSidebar,
+} from "components/gantt-chart";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ModuleGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { moduleIssue: moduleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = moduleIssueStore.getIssues;
+
+  const updateIssue = (block: any, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !moduleId) return;
+
+    moduleIssueStore.updateGanttIssueStructure(workspaceSlug.toString(), moduleId.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          sidebarToRender={(data) => <IssueGanttSidebar {...data} />}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/gantt/project-view-root.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
new file mode 100644
index 000000000..c06afd817
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -0,0 +1,59 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { IssueGanttBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  ProjectViewGanttSidebar,
+} from "components/gantt-chart";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ProjectViewGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, viewId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { projectViewIssues: projectViewIssuesStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = projectViewIssuesStore.getIssues;
+
+  const updateIssue = (block: any, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !viewId) return;
+
+    projectViewIssuesStore.updateGanttIssueStructure(workspaceSlug.toString(), viewId.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(props) => <ProjectViewGanttSidebar {...props} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          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..d7ddd69b2
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/root.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+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 { IssueGanttBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  IssueGanttSidebar,
+} from "components/gantt-chart";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const GanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = issueStore.getIssues;
+
+  const updateIssue = (block: IIssue, payload: IBlockUpdateData) => {
+    if (!workspaceSlug) return;
+
+    issueStore.updateGanttIssueStructure(workspaceSlug.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(props) => <IssueGanttSidebar {...props} enableQuickIssueCreate />}
+          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..aa82dc686
--- /dev/null
+++ b/web/components/issues/issue-layouts/index.ts
@@ -0,0 +1,15 @@
+// filters
+export * from "./filters";
+export * from "./empty-states";
+export * from "./quick-action-dropdowns";
+
+// layouts
+export * from "./list";
+export * from "./calendar";
+export * from "./gantt";
+export * from "./kanban";
+export * from "./spreadsheet";
+
+export * from "./properties";
+
+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..9d4c8aedd
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -0,0 +1,106 @@
+import { Draggable } from "@hello-pangea/dnd";
+// components
+import { KanBanProperties } from "./properties";
+import { Tooltip } from "@plane/ui";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+// types
+import { IIssueDisplayProperties, IIssue } from "types";
+
+interface IssueBlockProps {
+  sub_group_id: string;
+  columnId: string;
+  index: number;
+  issue: IIssue;
+  isDragDisabled: boolean;
+  showEmptyGroup: boolean;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+}
+
+export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
+  const {
+    sub_group_id,
+    columnId,
+    index,
+    issue,
+    isDragDisabled,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+  } = props;
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
+    if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, "update");
+  };
+
+  return (
+    <>
+      <Draggable draggableId={issue.id} index={index}>
+        {(provided, snapshot) => (
+          <div
+            className="group/kanban-block relative p-1.5 hover:cursor-default"
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            ref={provided.innerRef}
+          >
+            {issue.tempId !== undefined && (
+              <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+            )}
+            <div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
+              {quickActions(
+                !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+                !columnId && columnId === "null" ? null : columnId,
+                issue
+              )}
+            </div>
+            <div
+              className={`text-sm rounded py-2 px-3 shadow-custom-shadow-2xs space-y-2 border-[0.5px] border-custom-border-200 transition-all bg-custom-background-100 ${
+                isDragDisabled ? "" : "hover:cursor-grab"
+              } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+            >
+              {displayProperties && displayProperties?.key && (
+                <div className="text-xs line-clamp-1 text-custom-text-300">
+                  {issue.project_detail.identifier}-{issue.sequence_id}
+                </div>
+              )}
+              <IssuePeekOverview
+                workspaceSlug={issue?.workspace_detail?.slug}
+                projectId={issue?.project_detail?.id}
+                issueId={issue?.id}
+                handleIssue={(issueToUpdate) => {
+                  handleIssues(
+                    !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+                    !columnId && columnId === "null" ? null : columnId,
+                    { ...issue, ...issueToUpdate },
+                    "update"
+                  );
+                }}
+              >
+                <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                  <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
+                </Tooltip>
+              </IssuePeekOverview>
+              <div>
+                <KanBanProperties
+                  sub_group_id={sub_group_id}
+                  columnId={columnId}
+                  issue={issue}
+                  handleIssues={updateIssue}
+                  displayProperties={displayProperties}
+                  showEmptyGroup={showEmptyGroup}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </Draggable>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
new file mode 100644
index 000000000..ea1b4c840
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -0,0 +1,61 @@
+// components
+import { KanbanIssueBlock } from "components/issues";
+import { IIssueDisplayProperties, IIssue } from "types";
+
+interface IssueBlocksListProps {
+  sub_group_id: string;
+  columnId: string;
+  issues: IIssue[];
+  isDragDisabled: boolean;
+  showEmptyGroup: boolean;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+}
+
+export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
+  const {
+    sub_group_id,
+    columnId,
+    issues,
+    showEmptyGroup,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    displayProperties,
+  } = props;
+
+  return (
+    <>
+      {issues && issues.length > 0 ? (
+        <>
+          {issues.map((issue, index) => (
+            <KanbanIssueBlock
+              key={`kanban-issue-block-${issue.id}`}
+              index={index}
+              issue={issue}
+              showEmptyGroup={showEmptyGroup}
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              columnId={columnId}
+              sub_group_id={sub_group_id}
+              isDragDisabled={isDragDisabled}
+            />
+          ))}
+        </>
+      ) : (
+        !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/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
new file mode 100644
index 000000000..eee31e7c3
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -0,0 +1,356 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Droppable } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/issues";
+// types
+import { IIssueDisplayProperties, IIssue } from "types";
+// constants
+import { getValueFromObject } from "constants/issue";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+
+export interface IGroupByKanBan {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  order_by: string | null;
+  sub_group_id: string;
+  list: any;
+  listKey: string;
+  isDragDisabled: boolean;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  showEmptyGroup: boolean;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  enableQuickIssueCreate?: boolean;
+  isDragStarted?: boolean;
+}
+
+const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    sub_group_id = "null",
+    list,
+    listKey,
+    isDragDisabled,
+    handleIssues,
+    showEmptyGroup,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    enableQuickIssueCreate,
+    isDragStarted,
+  } = props;
+
+  const verticalAlignPosition = (_list: any) =>
+    kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string);
+
+  return (
+    <div className="relative w-full h-full flex gap-3">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div
+            className={`relative flex-shrink-0 flex flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``} group`}
+          >
+            {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}
+                  column_value={_list}
+                  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}`}
+                isDropDisabled={isDragDisabled}
+              >
+                {(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 ? (
+                      <KanbanIssueBlocksList
+                        sub_group_id={sub_group_id}
+                        columnId={getValueFromObject(_list, listKey) as string}
+                        issues={issues[getValueFromObject(_list, listKey) as string]}
+                        isDragDisabled={isDragDisabled}
+                        showEmptyGroup={showEmptyGroup}
+                        handleIssues={handleIssues}
+                        quickActions={quickActions}
+                        displayProperties={displayProperties}
+                      />
+                    ) : (
+                      isDragDisabled && (
+                        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-sm">
+                          {/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
+                        </div>
+                      )
+                    )}
+
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </div>
+
+            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky bottom-0 z-[0]">
+              {enableQuickIssueCreate && (
+                <BoardInlineCreateIssueForm
+                  groupId={getValueFromObject(_list, listKey) as string}
+                  subGroupId={sub_group_id}
+                  prePopulatedData={{
+                    ...(group_by && { [group_by]: getValueFromObject(_list, listKey) }),
+                    ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
+                  }}
+                />
+              )}
+            </div>
+
+            {isDragStarted && isDragDisabled && (
+              <div className="invisible group-hover:visible transition-all text-sm absolute top-12 bottom-10 left-0 right-0 bg-custom-background-100/40 text-center">
+                <div className="rounded inline-flex mt-80 h-8 px-3 justify-center items-center bg-custom-background-80 text-custom-text-100 font-medium">
+                  {`This board is ordered by "${replaceUnderscoreIfSnakeCase(
+                    order_by ? (order_by[0] === "-" ? order_by.slice(1) : order_by) : "created_at"
+                  )}"`}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+export interface IKanBan {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  order_by: string | null;
+  sub_group_id?: string;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  showEmptyGroup: boolean;
+  states: any;
+  stateGroups: any;
+  priorities: any;
+  labels: any;
+  members: any;
+  projects: any;
+  enableQuickIssueCreate?: boolean;
+  isDragStarted?: boolean;
+}
+
+export const KanBan: React.FC<IKanBan> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    sub_group_id = "null",
+    handleIssues,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    enableQuickIssueCreate,
+    isDragStarted,
+  } = props;
+
+  const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
+
+  return (
+    <div className="relative w-full h-full">
+      {group_by && group_by === "project" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projects}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "state" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={states}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "state_detail.group" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={stateGroups}
+          listKey={`key`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "priority" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={priorities}
+          listKey={`key`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "labels" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={labels ? [...labels, { id: "None", name: "None" }] : labels}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={members ? [...members, { id: "None", display_name: "None" }] : members}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={members}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+    </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..d350ca90b
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
@@ -0,0 +1,63 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// ui
+import { Avatar } from "@plane/ui";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  column_value: any;
+  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 name={user.display_name} src={user.avatar} size="base" />;
+
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const assignee = column_value ?? null;
+
+  return (
+    <>
+      {assignee &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon user={assignee} />}
+            title={assignee?.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} />}
+            title={assignee?.display_name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ assignees: [assignee?.id] }}
+          />
+        ))}
+    </>
+  );
+});
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..dde2059a9
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { Icon } from "./assignee";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  column_value: any;
+  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: FC<ICreatedByHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const createdBy = column_value ?? null;
+
+  return (
+    <>
+      {createdBy &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon user={createdBy} />}
+            title={createdBy?.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} />}
+            title={createdBy?.display_name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ created_by: createdBy?.id }}
+          />
+        ))}
+    </>
+  );
+});
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..bb5060326
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -0,0 +1,160 @@
+import React, { FC } from "react";
+import { useRouter } from "next/router";
+
+// services
+import { ModuleService } from "services/module.service";
+import { IssueService } from "services/issue";
+// components
+import { CustomMenu } from "@plane/ui";
+import { CreateUpdateIssueModal } from "components/issues/modal";
+import { ExistingIssuesListModal } from "components/core";
+// lucide icons
+import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// mobx
+import { observer } from "mobx-react-lite";
+// types
+import { IIssue, ISearchIssueResponse } from "types";
+
+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;
+  issuePayload: Partial<IIssue>;
+}
+
+const moduleService = new ModuleService();
+const issueService = new IssueService();
+
+export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
+  const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle, issuePayload } = props;
+  const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
+      {renderExistingIssueModal && (
+        <ExistingIssuesListModal
+          isOpen={openExistingIssueListModal}
+          handleClose={() => setOpenExistingIssueListModal(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+        />
+      )}
+      <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>
+        )}
+
+        {renderExistingIssueModal ? (
+          <CustomMenu
+            width="auto"
+            customButton={
+              <span 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 height={14} width={14} strokeWidth={2} />
+              </span>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <span className="flex items-center justify-start gap-2">Create issue</span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        ) : (
+          <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={() => setIsOpen(true)}
+          >
+            <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..01e7ac8b5
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
@@ -0,0 +1,112 @@
+// components
+import { ProjectHeader } from "./project";
+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;
+  column_value: any;
+  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, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+    <>
+      {group_by && group_by === "project" && (
+        <ProjectHeader
+          column_id={column_id}
+          column_value={column_value}
+          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" && (
+        <StateHeader
+          column_id={column_id}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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..1b6fb864c
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/label.tsx
@@ -0,0 +1,63 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+
+export interface ILabelHeader {
+  column_id: string;
+  column_value: any;
+  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: FC<ILabelHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const label = column_value ?? 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}
+            issuePayload={{ labels: [label?.id] }}
+          />
+        ))}
+    </>
+  );
+});
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..57fe6cd07
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -0,0 +1,86 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+
+export interface IPriorityHeader {
+  column_id: string;
+  column_value: any;
+  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: FC<IPriorityHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const priority = column_value || null;
+
+  return (
+    <>
+      {priority &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon priority={priority?.key} />}
+            title={priority?.title || ""}
+            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?.title || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ priority: priority?.key }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/project.tsx b/web/components/issues/issue-layouts/kanban/headers/project.tsx
new file mode 100644
index 000000000..5e4a05207
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/project.tsx
@@ -0,0 +1,63 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  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 = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
+
+export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon emoji={project?.emoji} />}
+            title={project?.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 emoji={project?.emoji} />}
+            title={project?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ project: project?.id }}
+          />
+        ))}
+    </>
+  );
+});
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..47d258c36
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
@@ -0,0 +1,66 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { StateGroupIcon } from "@plane/ui";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  column_value: any;
+  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-3.5 h-3.5 rounded-full">
+    <StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
+  </div>
+);
+
+export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const stateGroup = column_value || null;
+
+  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}
+            issuePayload={{}}
+          />
+        ))}
+    </>
+  );
+});
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..18a064214
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/state.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+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";
+
+export interface IStateHeader {
+  column_id: string;
+  column_value: any;
+  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: FC<IStateHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const state = column_value ?? 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}
+            issuePayload={{ state: state?.id }}
+          />
+        ))}
+    </>
+  );
+});
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..3546e73d5
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
@@ -0,0 +1,100 @@
+// 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;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
+  const { column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle } = props;
+
+  return (
+    <>
+      {sub_group_by && sub_group_by === "state" && (
+        <StateHeader
+          column_id={column_id}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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}
+          column_value={column_value}
+          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..761f32a77
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/index.ts
@@ -0,0 +1,4 @@
+export * from "./block";
+export * from "./roots";
+export * from "./blocks-list";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
new file mode 100644
index 000000000..ad7b9362e
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { PlusIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  subGroupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <div>
+      <h4 className="text-xs 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> = observer((props) => {
+  const { prePopulatedData, groupId, subGroupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: subGroupId ?? null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      {isOpen && (
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          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 mx-1.5 rounded bg-custom-background-300 shadow-custom-shadow-sm"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 italic mb-2 text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-3 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </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..a17947550
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -0,0 +1,193 @@
+// 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 { IssuePropertyDate } from "../properties/date";
+import { Tooltip } from "@plane/ui";
+import { IIssue, IIssueDisplayProperties, IState, TIssuePriorities } from "types";
+
+export interface IKanBanProperties {
+  sub_group_id: string;
+  columnId: string;
+  issue: IIssue;
+  handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
+  displayProperties: IIssueDisplayProperties;
+  showEmptyGroup: boolean;
+}
+
+export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
+  const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, showEmptyGroup } = props;
+
+  const handleState = (state: IState) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, state: state.id }
+    );
+  };
+
+  const handlePriority = (value: TIssuePriorities) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, priority: value }
+    );
+  };
+
+  const handleLabel = (ids: string[]) => {
+    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[]) => {
+    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) => {
+    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) => {
+    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 = (value: number | null) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, estimate_point: value }
+    );
+  };
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap whitespace-nowrap">
+      {/* basic properties */}
+      {/* state */}
+      {displayProperties && displayProperties?.state && (
+        <IssuePropertyState
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.state_detail || null}
+          onChange={handleState}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* priority */}
+      {displayProperties && displayProperties?.priority && (
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          onChange={handlePriority}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* label */}
+      {displayProperties && displayProperties?.labels && (showEmptyGroup || issue?.labels.length > 0) && (
+        <IssuePropertyLabels
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.labels || null}
+          onChange={handleLabel}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* start date */}
+      {displayProperties && displayProperties?.start_date && (showEmptyGroup || issue?.start_date) && (
+        <IssuePropertyDate
+          value={issue?.start_date || null}
+          onChange={(date: string) => handleStartDate(date)}
+          disabled={false}
+          placeHolder="Start date"
+        />
+      )}
+
+      {/* target/due date */}
+      {displayProperties && displayProperties?.due_date && (showEmptyGroup || issue?.target_date) && (
+        <IssuePropertyDate
+          value={issue?.target_date || null}
+          onChange={(date: string) => handleTargetDate(date)}
+          disabled={false}
+          placeHolder="Target date"
+        />
+      )}
+
+      {/* estimates */}
+      {displayProperties && displayProperties?.estimate && (
+        <IssuePropertyEstimates
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.estimate_point || null}
+          onChange={handleEstimate}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {displayProperties && displayProperties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* attachments */}
+      {displayProperties && displayProperties?.attachment_count && (
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* link */}
+      {displayProperties && displayProperties?.link && (
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* assignee */}
+      {displayProperties && displayProperties?.assignee && (showEmptyGroup || issue?.assignees.length > 0) && (
+        <IssuePropertyAssignee
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.assignees || null}
+          hideDropdownArrow
+          onChange={handleAssignee}
+          disabled={false}
+          multiple
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
new file mode 100644
index 000000000..a060ed213
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -0,0 +1,179 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { CycleIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface ICycleKanBanLayout {}
+
+export const CycleKanBanLayout: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+  // store
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    cycleIssue: cycleIssueStore,
+    issueFilter: issueFilterStore,
+    cycleIssueKanBanView: cycleIssueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = 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 order_by: string | null = issueFilterStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  // const onDragStart = () => {
+  //   setIsDragStarted(true);
+  // };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+
+    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 handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !cycleId) return;
+
+      if (action === "update") {
+        cycleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
+      if (action === "remove" && issue.bridge_id) {
+        cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
+        cycleIssueStore.removeIssueFromCycle(
+          workspaceSlug.toString(),
+          issue.project,
+          cycleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  // const estimates =
+  //   currentProjectDetails?.estimate !== null
+  //     ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+  //     : null;
+
+  return (
+    <>
+      {cycleIssueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className={`relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable`}>
+          <DragDropContext onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <CycleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromCycle={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <CycleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromCycle={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/index.ts b/web/components/issues/issue-layouts/kanban/roots/index.ts
new file mode 100644
index 000000000..139c09a7a
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./profile-issues-root";
+export * from "./project-root";
+export * from "./project-view-root";
diff --git a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
new file mode 100644
index 000000000..7a25f835c
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -0,0 +1,177 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { ModuleIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IModuleKanBanLayout {}
+
+export const ModuleKanBanLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+  // store
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    moduleIssue: moduleIssueStore,
+    issueFilter: issueFilterStore,
+    moduleIssueKanBanView: moduleIssueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = 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 order_by: string | null = issueFilterStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  // const onDragStart = () => {
+  //   setIsDragStarted(true);
+  // };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+    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 handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") moduleIssueStore.deleteIssue(group_by, sub_group_by, issue);
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(group_by, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  // const estimates =
+  //   currentProjectDetails?.estimate !== null
+  //     ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+  //     : null;
+
+  return (
+    <>
+      {moduleIssueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className={`relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable`}>
+          <DragDropContext onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ModuleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromModule={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ModuleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromModule={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
new file mode 100644
index 000000000..4682f8e26
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -0,0 +1,163 @@
+import { FC, useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+// types
+import { IIssue } from "types";
+
+export interface IProfileIssuesKanBanLayout {}
+
+export const ProfileIssuesKanBanLayout: FC = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    profileIssues: profileIssuesStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    issueKanBanView: issueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const issues = profileIssuesStore?.getIssues;
+
+  const sub_group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const order_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = profileIssueFiltersStore?.userDisplayFilters || null;
+
+  const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  // const onDragStart = () => {
+  //   setIsDragStarted(true);
+  // };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+    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 handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        profileIssuesStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") profileIssuesStore.deleteIssue(group_by, sub_group_by, issue);
+    },
+    [profileIssuesStore, issueDetailStore, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+
+  return (
+    <>
+      {profileIssuesStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <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}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
new file mode 100644
index 000000000..8f34dee71
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -0,0 +1,171 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { DragDropContext } from "@hello-pangea/dnd";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IKanBanLayout {}
+
+export const KanBanLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
+
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueKanBanView: issueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  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 order_by: string | null = issueFilterStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  const onDragStart = () => {
+    setIsDragStarted(true);
+  };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.source.droppableId &&
+      result.destination.droppableId &&
+      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 handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") issueStore.deleteIssue(group_by, sub_group_by, issue);
+    },
+    [issueStore, issueDetailStore, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects?.[workspaceSlug] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <>
+      {issueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable">
+          <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                enableQuickIssueCreate
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={projectMembers?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
new file mode 100644
index 000000000..6751f3145
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -0,0 +1,107 @@
+import React from "react";
+import { DragDropContext } from "@hello-pangea/dnd";
+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";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IViewKanBanLayout {}
+
+export const ProjectViewKanBanLayout: React.FC = observer(() => {
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    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 states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStateStore?.projectStates || null;
+  const estimates = null;
+
+  return null;
+
+  // 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={() => {}}
+  //           states={states}
+  //           stateGroups={stateGroups}
+  //           priorities={priorities}
+  //           labels={labels}
+  //           members={members}
+  //           projects={projects}
+  //           estimates={estimates}
+  //         />
+  //       ) : (
+  //         <KanBanSwimLanes
+  //           issues={issues}
+  //           sub_group_by={sub_group_by}
+  //           group_by={group_by}
+  //           handleIssues={updateIssue}
+  //           display_properties={display_properties}
+  //           kanBanToggle={() => {}}
+  //           handleKanBanToggle={() => {}}
+  //           states={states}
+  //           stateGroups={stateGroups}
+  //           priorities={priorities}
+  //           labels={labels}
+  //           members={members}
+  //           projects={projects}
+  //           estimates={estimates}
+  //         />
+  //       )}
+  //     </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..e25ddea3d
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -0,0 +1,492 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
+import { KanBan } from "./default";
+// types
+import { IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+// constants
+import { getValueFromObject } from "constants/issue";
+
+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}
+              column_value={_list}
+              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 {
+  order_by: string | null;
+  showEmptyGroup: boolean;
+  states: IState[] | null;
+  stateGroups: any;
+  priorities: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  issues: any;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  isDragStarted?: boolean;
+}
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    list,
+    listKey,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    isDragStarted,
+  } = props;
+
+  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}
+                  column_value={_list}
+                  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}
+                  order_by={order_by}
+                  sub_group_id={getValueFromObject(_list, listKey) as string}
+                  handleIssues={handleIssues}
+                  quickActions={quickActions}
+                  displayProperties={displayProperties}
+                  kanBanToggle={kanBanToggle}
+                  handleKanBanToggle={handleKanBanToggle}
+                  showEmptyGroup={showEmptyGroup}
+                  states={states}
+                  stateGroups={stateGroups}
+                  priorities={priorities}
+                  labels={labels}
+                  members={members}
+                  projects={projects}
+                  enableQuickIssueCreate
+                  isDragStarted={isDragStarted}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+export interface IKanBanSwimLanes {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  order_by: string | null;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  showEmptyGroup: boolean;
+  states: IState[] | null;
+  stateGroups: any;
+  priorities: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  isDragStarted?: boolean;
+}
+
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    isDragStarted,
+  } = props;
+
+  return (
+    <div className="relative">
+      <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+        {group_by && group_by === "project" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projects}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "state" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={states}
+            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={stateGroups}
+            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={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={labels ? [...labels, { id: "None", name: "None" }] : labels}
+            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={members ? [...members, { id: "None", display_name: "None" }] : members}
+            listKey={`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={members}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </div>
+
+      {sub_group_by && sub_group_by === "project" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={projects}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state_detail.group" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={stateGroups}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "priority" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={priorities}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "labels" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={labels ? [...labels, { id: "None", name: "None" }] : labels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "assignees" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={members ? [...members, { id: "None", display_name: "None" }] : members}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "created_by" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={members}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+    </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..28f5f765a
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -0,0 +1,65 @@
+// components
+import { KanBanProperties } from "./properties";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+interface IssueBlockProps {
+  columnId: string;
+  issue: IIssue;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  isReadonly?: boolean;
+  showEmptyGroup?: boolean;
+}
+
+export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
+  const { columnId, issue, handleIssues, quickActions, displayProperties, showEmptyGroup, isReadonly } = props;
+
+  const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
+    handleIssues(group_by, issueToUpdate, "update");
+  };
+
+  return (
+    <>
+      <div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
+        {displayProperties && displayProperties?.key && (
+          <div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
+            {issue?.project_detail?.identifier}-{issue.sequence_id}
+          </div>
+        )}
+        {issue?.tempId !== undefined && (
+          <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+        )}
+        <IssuePeekOverview
+          workspaceSlug={issue?.workspace_detail?.slug}
+          projectId={issue?.project_detail?.id}
+          issueId={issue?.id}
+          isArchived={issue?.archived_at !== null}
+          handleIssue={(issueToUpdate) => {
+            handleIssues(!columnId && columnId === "null" ? null : columnId, issueToUpdate as IIssue, "update");
+          }}
+        >
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <div className="line-clamp-1 text-sm font-medium text-custom-text-100 w-full">{issue.name}</div>
+          </Tooltip>
+        </IssuePeekOverview>
+
+        <div className="ml-auto flex-shrink-0 flex items-center gap-2">
+          <KanBanProperties
+            columnId={columnId}
+            issue={issue}
+            isReadonly={isReadonly}
+            handleIssues={updateIssue}
+            displayProperties={displayProperties}
+            showEmptyGroup={showEmptyGroup}
+          />
+          {quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
new file mode 100644
index 000000000..22a92a159
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -0,0 +1,40 @@
+import { FC } from "react";
+// components
+import { IssueBlock } from "components/issues";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+interface Props {
+  columnId: string;
+  issues: IIssue[];
+  isReadonly?: boolean;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  showEmptyGroup?: boolean;
+}
+
+export const IssueBlocksList: FC<Props> = (props) => {
+  const { columnId, issues, handleIssues, quickActions, displayProperties, showEmptyGroup, isReadonly } = props;
+
+  return (
+    <div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
+      {issues && issues.length > 0 ? (
+        issues.map((issue) => (
+          <IssueBlock
+            key={issue.id}
+            columnId={columnId}
+            issue={issue}
+            handleIssues={handleIssues}
+            quickActions={quickActions}
+            isReadonly={isReadonly}
+            displayProperties={displayProperties}
+            showEmptyGroup={showEmptyGroup}
+          />
+        ))
+      ) : (
+        <div className="bg-custom-background-100 text-custom-text-400 text-sm p-3">No issues</div>
+      )}
+    </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..b9d13a92b
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -0,0 +1,243 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { ListGroupByHeaderRoot } from "./headers/group-by-root";
+import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
+// types
+import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+// constants
+import { getValueFromObject } from "constants/issue";
+
+export interface IGroupByList {
+  issues: any;
+  group_by: string | null;
+  list: any;
+  isReadonly?: boolean;
+  listKey: string;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  is_list?: boolean;
+  enableQuickIssueCreate?: boolean;
+  showEmptyGroup?: boolean;
+}
+
+const GroupByList: React.FC<IGroupByList> = observer((props) => {
+  const {
+    issues,
+    group_by,
+    list,
+    isReadonly,
+    listKey,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    is_list = false,
+    enableQuickIssueCreate,
+    showEmptyGroup,
+  } = props;
+
+  return (
+    <div className="relative w-full h-full">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
+            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3 bg-custom-background-90">
+              <ListGroupByHeaderRoot
+                column_id={getValueFromObject(_list, listKey) as string}
+                column_value={_list}
+                group_by={group_by}
+                issues_count={
+                  is_list ? issues?.length || 0 : issues?.[getValueFromObject(_list, listKey) as string]?.length || 0
+                }
+              />
+            </div>
+            {issues && (
+              <IssueBlocksList
+                columnId={getValueFromObject(_list, listKey) as string}
+                issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                displayProperties={displayProperties}
+                isReadonly={isReadonly}
+                showEmptyGroup={showEmptyGroup}
+              />
+            )}
+            {enableQuickIssueCreate && (
+              <ListInlineCreateIssueForm
+                groupId={getValueFromObject(_list, listKey) as string}
+                prePopulatedData={{
+                  [group_by!]: getValueFromObject(_list, listKey),
+                }}
+              />
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+// TODO: update all the types
+export interface IList {
+  issues: any;
+  group_by: string | null;
+  isReadonly?: boolean;
+  handleDragDrop?: (result: any) => void | undefined;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  stateGroups: any;
+  priorities: any;
+  enableQuickIssueCreate?: boolean;
+  estimates: IEstimatePoint[] | null;
+  showEmptyGroup?: boolean;
+}
+
+export const List: React.FC<IList> = observer((props) => {
+  const {
+    issues,
+    group_by,
+    isReadonly,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    states,
+    labels,
+    members,
+    projects,
+    stateGroups,
+    priorities,
+    showEmptyGroup,
+    enableQuickIssueCreate,
+  } = props;
+
+  return (
+    <div className="relative w-full h-full">
+      {group_by === null && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={[{ id: "null", title: "All Issues" }]}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          is_list
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "project" && projects && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={projects}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "state" && states && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "state_detail.group" && stateGroups && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={stateGroups}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "priority" && priorities && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={priorities}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "labels" && labels && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={[...labels, { id: "None", name: "None" }]}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={[...members, { id: "None", display_name: "None" }]}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={members}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+    </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..edc74d9cc
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/assignee.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// ui
+import { Avatar } from "@plane/ui";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
+
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const assignee = column_value ?? null;
+
+  return (
+    <>
+      {assignee && (
+        <HeaderGroupByCard
+          icon={<Icon user={assignee} />}
+          title={assignee?.display_name || ""}
+          count={issues_count}
+          issuePayload={{ assignees: [assignee?.member?.id] }}
+        />
+      )}
+    </>
+  );
+});
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..0814fdbe5
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/created-by.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./assignee";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const createdBy = column_value ?? null;
+
+  return (
+    <>
+      {createdBy && (
+        <HeaderGroupByCard
+          icon={<Icon user={createdBy} />}
+          title={createdBy?.display_name || ""}
+          count={issues_count}
+          issuePayload={{ created_by: createdBy?.member?.id }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/empty-group.tsx b/web/components/issues/issue-layouts/list/headers/empty-group.tsx
new file mode 100644
index 000000000..59840cde6
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/empty-group.tsx
@@ -0,0 +1,15 @@
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface IEmptyHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} issuePayload={{}} />;
+});
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..4a43fdf77
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+// services
+import { ModuleService } from "services/module.service";
+import { IssueService } from "services/issue";
+// lucide icons
+import { CircleDashed, Plus } from "lucide-react";
+// components
+import { CreateUpdateIssueModal } from "components/issues/modal";
+import { ExistingIssuesListModal } from "components/core";
+import { CustomMenu } from "@plane/ui";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// mobx
+import { observer } from "mobx-react-lite";
+// types
+import { IIssue, ISearchIssueResponse } from "types";
+
+interface IHeaderGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  issuePayload: Partial<IIssue>;
+}
+
+const moduleService = new ModuleService();
+const issueService = new IssueService();
+
+export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }: IHeaderGroupByCard) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const verticalAlignPosition = false;
+
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
+      {renderExistingIssueModal && (
+        <ExistingIssuesListModal
+          isOpen={openExistingIssueListModal}
+          handleClose={() => setOpenExistingIssueListModal(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+        />
+      )}
+      <div
+        className={`flex-shrink-0 relative flex gap-2 py-1.5 ${
+          verticalAlignPosition ? `flex-col items-center w-11` : `flex-row items-center w-full`
+        }`}
+      >
+        <div className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center">
+          {icon ? icon : <CircleDashed className="h-3.5 w-3.5" 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>
+
+        {renderExistingIssueModal ? (
+          <CustomMenu
+            width="auto"
+            customButton={
+              <span className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+              </span>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <span className="flex items-center justify-start gap-2">Create issue</span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        ) : (
+          <div
+            className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => setIsOpen(true)}
+          >
+            <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..5a724a8d4
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
@@ -0,0 +1,52 @@
+// components
+import { EmptyHeader } from "./empty-group";
+import { ProjectHeader } from "./project";
+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 IListGroupByHeaderRoot {
+  column_id: string;
+  column_value: any;
+  group_by: string | null;
+  issues_count: number;
+}
+
+export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
+  const { column_id, column_value, group_by, issues_count } = props;
+
+  return (
+    <>
+      {!group_by && group_by === null && (
+        <EmptyHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "project" && (
+        <ProjectHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+
+      {group_by && group_by === "state" && (
+        <StateHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "priority" && (
+        <PriorityHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "labels" && (
+        <LabelHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "assignees" && (
+        <AssigneesHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "created_by" && (
+        <CreatedByHeader column_id={column_id} column_value={column_value} 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..2abe186f3
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/label.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface ILabelHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ color }: any) => (
+  <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
+);
+
+export const LabelHeader: FC<ILabelHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const label = column_value ?? null;
+
+  return (
+    <>
+      {column_value && (
+        <HeaderGroupByCard
+          icon={<Icon color={label?.color || null} />}
+          title={column_value?.name || ""}
+          count={issues_count}
+          issuePayload={{ labels: [label.id] }}
+        />
+      )}
+    </>
+  );
+});
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..72f71b13f
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/priority.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface IPriorityHeader {
+  column_id: string;
+  column_value: any;
+  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: FC<IPriorityHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const priority = column_value ?? null;
+
+  return (
+    <>
+      {priority && (
+        <HeaderGroupByCard
+          icon={<Icon priority={priority?.key} />}
+          title={priority?.title || ""}
+          count={issues_count}
+          issuePayload={{ priority: priority?.key }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/project.tsx b/web/components/issues/issue-layouts/list/headers/project.tsx
new file mode 100644
index 000000000..880892af2
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/project.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
+
+export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project && (
+        <HeaderGroupByCard
+          icon={<Icon emoji={project?.emoji} />}
+          title={project?.name || ""}
+          count={issues_count}
+          issuePayload={{ project: project?.id ?? "" }}
+        />
+      )}
+    </>
+  );
+});
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..c6da02543
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/state-group.tsx
@@ -0,0 +1,39 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// ui
+import { StateGroupIcon } from "@plane/ui";
+// helpers
+import { capitalizeFirstLetter } from "helpers/string.helper";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  column_value: any;
+  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: FC<IStateGroupHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const stateGroup = column_value ?? null;
+
+  return (
+    <>
+      {stateGroup && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={stateGroup?.key} />}
+          title={capitalizeFirstLetter(stateGroup?.key) || ""}
+          count={issues_count}
+          issuePayload={{}}
+        />
+      )}
+    </>
+  );
+});
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..e169d0fbb
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/state.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./state-group";
+
+export interface IStateHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const StateHeader: FC<IStateHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const state = column_value ?? null;
+
+  return (
+    <>
+      {state && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={state?.group} color={state?.color} />}
+          title={state?.name || ""}
+          count={issues_count}
+          issuePayload={{ state: state?.id }}
+        />
+      )}
+    </>
+  );
+});
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..be3968fdd
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/index.ts
@@ -0,0 +1,5 @@
+export * from "./roots";
+export * from "./block";
+export * from "./roots";
+export * from "./blocks-list";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
new file mode 100644
index 000000000..813e25d0a
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-xs font-medium 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> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div className="bg-custom-background-100">
+      {isOpen && (
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="absolute flex items-center gap-x-3 border-[0.5px] w-full border-t-0 border-custom-border-100 px-3 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 my-3 mt-14 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <div className="w-full border-t-[0.5px] border-custom-border-200">
+          <button
+            type="button"
+            className="flex items-center gap-x-[6px] text-custom-primary-100 p-3"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </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..58944c76c
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@@ -0,0 +1,166 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+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 { IssuePropertyDate } from "../properties/date";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayProperties, IState, TIssuePriorities } from "types";
+
+export interface IKanBanProperties {
+  columnId: string;
+  issue: IIssue;
+  handleIssues: (group_by: string | null, issue: IIssue) => void;
+  displayProperties: IIssueDisplayProperties;
+  isReadonly?: boolean;
+  showEmptyGroup?: boolean;
+}
+
+export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
+  const { columnId: group_id, issue, handleIssues, displayProperties, isReadonly, showEmptyGroup } = props;
+
+  const handleState = (state: IState) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id });
+  };
+
+  const handlePriority = (value: TIssuePriorities) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: value });
+  };
+
+  const handleLabel = (ids: string[]) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+  };
+
+  const handleAssignee = (ids: string[]) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+  };
+
+  const handleStartDate = (date: string) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+  };
+
+  const handleTargetDate = (date: string) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
+  };
+
+  const handleEstimate = (value: number | null) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: value });
+  };
+
+  return (
+    <div className="relative flex items-center gap-2 overflow-x-auto whitespace-nowrap">
+      {/* basic properties */}
+      {/* state */}
+      {displayProperties && displayProperties?.state && (
+        <IssuePropertyState
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.state_detail || null}
+          hideDropdownArrow
+          onChange={handleState}
+          disabled={isReadonly}
+        />
+      )}
+
+      {/* priority */}
+      {displayProperties && displayProperties?.priority && (
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          onChange={handlePriority}
+          disabled={isReadonly}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* label */}
+      {displayProperties && displayProperties?.labels && (showEmptyGroup || issue?.labels.length > 0) && (
+        <IssuePropertyLabels
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.labels || null}
+          onChange={handleLabel}
+          disabled={isReadonly}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* assignee */}
+      {displayProperties && displayProperties?.assignee && (showEmptyGroup || issue?.assignees?.length > 0) && (
+        <IssuePropertyAssignee
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.assignees || null}
+          hideDropdownArrow
+          onChange={handleAssignee}
+          disabled={isReadonly}
+          multiple
+        />
+      )}
+
+      {/* start date */}
+      {displayProperties && displayProperties?.start_date && (showEmptyGroup || issue?.start_date) && (
+        <IssuePropertyDate
+          value={issue?.start_date || null}
+          onChange={(date: string) => handleStartDate(date)}
+          disabled={isReadonly}
+          placeHolder="Start date"
+        />
+      )}
+
+      {/* target/due date */}
+      {displayProperties && displayProperties?.due_date && (showEmptyGroup || issue?.target_date) && (
+        <IssuePropertyDate
+          value={issue?.target_date || null}
+          onChange={(date: string) => handleTargetDate(date)}
+          disabled={isReadonly}
+          placeHolder="Target date"
+        />
+      )}
+
+      {/* estimates */}
+      {displayProperties && displayProperties?.estimate && (
+        <IssuePropertyEstimates
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.estimate_point || null}
+          hideDropdownArrow
+          onChange={handleEstimate}
+          disabled={isReadonly}
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {displayProperties && displayProperties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* attachments */}
+      {displayProperties && displayProperties?.attachment_count && (
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* link */}
+      {displayProperties && displayProperties?.link && (
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
new file mode 100644
index 000000000..396f7b508
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -0,0 +1,74 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ArchivedIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export const ArchivedIssueListLayout: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    archivedIssues: archivedIssueStore,
+    archivedIssueFilters: archivedIssueFiltersStore,
+  } = useMobxStore();
+
+  // derived values
+  const issues = archivedIssueStore.getIssues;
+  const displayProperties = archivedIssueFiltersStore?.userDisplayProperties || null;
+  const group_by: string | null = archivedIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const handleIssues = (group_by: string | null, issue: IIssue, action: "delete" | "update") => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (action === "delete") {
+      archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
+    }
+  };
+
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className="relative w-full h-full bg-custom-background-90">
+      <List
+        issues={issues}
+        group_by={group_by}
+        isReadonly
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ArchivedIssueQuickActions issue={issue} handleDelete={async () => handleIssues(group_by, issue, "delete")} />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={projectMembers?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
new file mode 100644
index 000000000..608607ab8
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -0,0 +1,95 @@
+import React, { 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 { List } from "../default";
+import { CycleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface ICycleListLayout {}
+
+export const CycleListLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+  // store
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = cycleIssueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !cycleId) return;
+
+      if (action === "update") {
+        cycleIssueStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") cycleIssueStore.deleteIssue(group_by, null, issue);
+      if (action === "remove" && issue.bridge_id) {
+        cycleIssueStore.deleteIssue(group_by, null, issue);
+        cycleIssueStore.removeIssueFromCycle(
+          workspaceSlug.toString(),
+          issue.project,
+          cycleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
+  );
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <CycleIssueQuickActions
+            issue={issue}
+            handleDelete={async () => handleIssues(group_by, issue, "delete")}
+            handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+            handleRemoveFromCycle={async () => handleIssues(group_by, issue, "remove")}
+          />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={projectMembers?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/index.ts b/web/components/issues/issue-layouts/list/roots/index.ts
new file mode 100644
index 000000000..aae6f833c
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/index.ts
@@ -0,0 +1,6 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./profile-issues-root";
+export * from "./project-root";
+export * from "./project-view-root";
+export * from "./archived-issue-root";
diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx
new file mode 100644
index 000000000..1619112f1
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -0,0 +1,95 @@
+import React, { 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 { List } from "../default";
+import { ModuleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IModuleListLayout {}
+
+export const ModuleListLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = moduleIssueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") moduleIssueStore.deleteIssue(group_by, null, issue);
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(group_by, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className="relative w-full h-full bg-custom-background-90">
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ModuleIssueQuickActions
+            issue={issue}
+            handleDelete={async () => handleIssues(group_by, issue, "delete")}
+            handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+            handleRemoveFromModule={async () => handleIssues(group_by, issue, "remove")}
+          />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={projectMembers?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
new file mode 100644
index 000000000..bfb727843
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -0,0 +1,79 @@
+import { FC, 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 { List } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IProfileIssuesListLayout {}
+
+export const ProfileIssuesListLayout: FC = observer(() => {
+  const {
+    workspace: workspaceStore,
+    projectState: projectStateStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const issues = profileIssuesStore?.getIssues;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        profileIssuesStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") profileIssuesStore.deleteIssue(group_by, null, issue);
+    },
+    [profileIssuesStore, issueDetailStore, workspaceSlug]
+  );
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ProjectIssueQuickActions
+            issue={issue}
+            handleDelete={async () => handleIssues(group_by, issue, "delete")}
+            handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+          />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={projectMembers?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/project-root.tsx b/web/components/issues/issue-layouts/list/roots/project-root.tsx
new file mode 100644
index 000000000..beec14008
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -0,0 +1,94 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export const ListLayout: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const {
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    issueFilter: issueFilterStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = issueStore?.getIssues;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+  const group_by: string | null = userDisplayFilters?.group_by || null;
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        issueStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") issueStore.deleteIssue(group_by, null, issue);
+    },
+    [issueStore, issueDetailStore, workspaceSlug]
+  );
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <>
+      {issueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="relative w-full h-full bg-custom-background-90">
+          <List
+            issues={issues}
+            group_by={group_by}
+            handleIssues={handleIssues}
+            quickActions={(group_by, issue) => (
+              <ProjectIssueQuickActions
+                issue={issue}
+                handleDelete={async () => handleIssues(group_by, issue, "delete")}
+                handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+              />
+            )}
+            displayProperties={displayProperties}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={projectMembers?.map((m) => m.member) ?? null}
+            projects={projects}
+            enableQuickIssueCreate
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+            showEmptyGroup={userDisplayFilters.show_empty_groups}
+          />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
new file mode 100644
index 000000000..a5dc76352
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "../default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IViewListLayout {}
+
+export const ProjectViewListLayout: React.FC = observer(() => {
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    projectState: projectStateStore,
+  }: 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);
+  };
+
+  const states = projectStateStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStateStore?.projectStates || null;
+  const estimates = null;
+
+  return null;
+
+  // 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}
+  //       states={states}
+  //       stateGroups={stateGroups}
+  //       priorities={priorities}
+  //       labels={labels}
+  //       members={members}
+  //       projects={projects}
+  //       estimates={estimates}
+  //     />
+  //   </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..f7a4f322b
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -0,0 +1,209 @@
+import { Fragment, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
+// ui
+import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
+// types
+import { Placement } from "@popperjs/core";
+
+export interface IIssuePropertyAssignee {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: string[] | string;
+  onChange: (data: string[]) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  multiple?: true;
+  noLabelBorder?: boolean;
+}
+
+export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
+  const {
+    view,
+    projectId,
+    value,
+    onChange,
+    disabled = false,
+    hideDropdownArrow = false,
+    className,
+    buttonClassName,
+    optionsClassName,
+    placement,
+    multiple = false,
+    noLabelBorder = false,
+  } = props;
+  // store
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    workspaceMember: { workspaceMembers, fetchWorkspaceMembers },
+  } = useMobxStore();
+  const workspaceSlug = workspaceStore?.workspaceSlug;
+  // states
+  const [query, setQuery] = useState("");
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+  // const fetchProjectMembers = () => {
+  //   setIsLoading(true);
+  //   if (workspaceSlug && projectId)
+  //     workspaceSlug &&
+  //       projectId &&
+  //       projectStore.fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
+  // };
+
+  const getWorkspaceMembers = () => {
+    setIsLoading(true);
+    if (workspaceSlug) workspaceSlug && fetchWorkspaceMembers(workspaceSlug).then(() => setIsLoading(false));
+  };
+
+  const options = (workspaceMembers ?? [])?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member.member.display_name} src={member.member.avatar} showTooltip={false} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const getTooltipContent = (): string => {
+    if (!value || value.length === 0) return "No Assignee";
+
+    // if multiple assignees
+    if (Array.isArray(value)) {
+      const assignees = workspaceMembers?.filter((m) => value.includes(m.member.id));
+
+      if (!assignees || assignees.length === 0) return "No Assignee";
+
+      // if only one assignee in list
+      if (assignees.length === 1) {
+        return "1 assignee";
+      } else return `${assignees.length} assignees`;
+    }
+
+    // if single assignee
+    const assignee = workspaceMembers?.find((m) => m.member.id === value)?.member;
+
+    if (!assignee) return "No Assignee";
+
+    // if assignee not null & not list
+    return "1 assignee";
+  };
+
+  const label = (
+    <Tooltip tooltipHeading="Assignee" tooltipContent={getTooltipContent()} position="top">
+      <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
+        {value && value.length > 0 && Array.isArray(value) ? (
+          <AvatarGroup showTooltip={false}>
+            {value.map((assigneeId) => {
+              const member = workspaceMembers?.find((m) => m.member.id === assigneeId)?.member;
+              if (!member) return null;
+              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+            })}
+          </AvatarGroup>
+        ) : (
+          <span
+            className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
+              noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
+            }}`}
+          >
+            <User2 className="h-3 w-3" />
+          </span>
+        )}
+      </div>
+    </Tooltip>
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const comboboxProps: any = { value, onChange, disabled };
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox as="div" className={`flex-shrink-0 text-left ${className}`} {...comboboxProps}>
+      <Combobox.Button as={Fragment}>
+        <button
+          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"
+          } ${buttonClassName}`}
+          onClick={() => !workspaceMembers && getWorkspaceMembers()}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {isLoading ? (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            ) : filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active && !selected ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {option.content}
+                      {selected && <Check className={`h-3.5 w-3.5`} />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <span className="flex items-center gap-2 p-1">
+                <p className="text-left text-custom-text-200 ">No matching results</p>
+              </span>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </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..1ba4dbaaa
--- /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 IIssuePropertyDate {
+  value: any;
+  onChange: (date: any) => void;
+  disabled?: boolean;
+  placeHolder?: string;
+}
+
+export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
+  const { value, onChange, disabled, placeHolder } = props;
+
+  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={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none w-full ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }`}
+            >
+              <div className="overflow-hidden flex justify-center items-center gap-2">
+                <Calendar className="h-3 w-3" strokeWidth={2} />
+                {value && (
+                  <>
+                    <Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
+                      <div className="text-xs">{value}</div>
+                    </Tooltip>
+
+                    <div
+                      className="flex-shrink-0 flex justify-center items-center"
+                      onClick={() => {
+                        if (onChange) onChange(null);
+                      }}
+                    >
+                      <X className="h-2.5 w-2.5" strokeWidth={2} />
+                    </div>
+                  </>
+                )}
+              </div>
+            </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/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
new file mode 100644
index 000000000..432a39f4d
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -0,0 +1,172 @@
+import { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { observer } from "mobx-react-lite";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { Placement } from "@popperjs/core";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IIssuePropertyEstimates {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: number | null;
+  onChange: (value: number | null) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+}
+
+export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer((props) => {
+  const {
+    projectId,
+    value,
+    onChange,
+    disabled,
+    hideDropdownArrow = false,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails = projectId ? projectStore.project_details[projectId] : null;
+  const isEstimateEnabled = projectDetails?.estimate !== null;
+  const estimates = projectId ? projectStore.estimates?.[projectId] : null;
+  const estimatePoints =
+    projectDetails && isEstimateEnabled ? estimates?.find((e) => e.id === projectDetails.estimate)?.points : null;
+
+  const options: { value: number | null; query: string; content: any }[] | undefined = (estimatePoints ?? []).map(
+    (estimate) => ({
+      value: estimate.key,
+      query: estimate.value,
+      content: (
+        <div className="flex items-center gap-2">
+          <Triangle className="h-3 w-3" strokeWidth={2} />
+          {estimate.value}
+        </div>
+      ),
+    })
+  );
+  options?.unshift({
+    value: null,
+    query: "none",
+    content: (
+      <div className="flex items-center gap-2">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        None
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = estimatePoints?.find((e) => e.key === value);
+  const label = (
+    <Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        <span className="truncate">{selectedEstimate?.value ?? "None"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  if (!isEstimateEnabled) return null;
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={(val) => onChange(val as number | null)}
+      disabled={disabled}
+    >
+      <Combobox.Button as={Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 h-5 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/index.tsx b/web/components/issues/issue-layouts/properties/index.tsx
new file mode 100644
index 000000000..3e2e2acd6
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/index.tsx
@@ -0,0 +1,6 @@
+export * from "./assignee";
+export * from "./date";
+export * from "./estimates";
+export * from "./labels";
+export * from "./priority";
+export * from "./state";
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..16589bf2d
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -0,0 +1,232 @@
+import { Fragment, useState } from "react";
+
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import { usePopper } from "react-popper";
+// components
+import { Combobox } from "@headlessui/react";
+import { Tooltip } from "@plane/ui";
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { Placement } from "@popperjs/core";
+import { RootStore } from "store/root";
+
+export interface IIssuePropertyLabels {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: string[];
+  onChange: (data: string[]) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  maxRender?: number;
+  noLabelBorder?: boolean;
+}
+
+export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
+  const {
+    view,
+    projectId,
+    value,
+    onChange,
+    disabled,
+    hideDropdownArrow = false,
+    className,
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    maxRender = 2,
+    noLabelBorder = false,
+  } = props;
+
+  const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
+  const workspaceSlug = workspaceStore?.workspaceSlug;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+  const projectLabels = projectId && projectStore?.labels?.[projectId];
+
+  const fetchProjectLabels = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      projectStore.fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
+
+  const options = (projectLabels ? projectLabels : []).map((label) => ({
+    value: label.id,
+    query: label.name,
+    content: (
+      <div className="flex items-center justify-start gap-2 overflow-hidden">
+        <span
+          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color,
+          }}
+        />
+        <div className="truncate inline-block line-clamp-1">{label.name}</div>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const label = (
+    <div className="overflow-hidden flex flex-wrap items-center h-5 gap-2 text-custom-text-200 w-full">
+      {value.length > 0 ? (
+        value.length <= maxRender ? (
+          <>
+            {(projectLabels ? projectLabels : [])
+              ?.filter((l) => value.includes(l.id))
+              .map((label) => (
+                <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
+                  <div
+                    key={label.id}
+                    className={`overflow-hidden flex hover:bg-custom-background-80 ${
+                      !disabled && "cursor-pointer"
+                    } items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full max-w-full`}
+                  >
+                    <div className="overflow-hidden flex items-center gap-1.5 text-custom-text-200 max-w-full">
+                      <span
+                        className="h-2 w-2 flex-shrink-0 rounded-full"
+                        style={{
+                          backgroundColor: label?.color ?? "#000000",
+                        }}
+                      />
+                      <div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">{label.name}</div>
+                    </div>
+                  </div>
+                </Tooltip>
+              ))}
+          </>
+        ) : (
+          <div className="h-full flex cursor-pointer items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
+            <Tooltip
+              position="top"
+              tooltipHeading="Labels"
+              tooltipContent={(projectLabels ? projectLabels : [])
+                ?.filter((l) => value.includes(l.id))
+                .map((l) => l.name)
+                .join(", ")}
+            >
+              <div className="h-full flex items-center gap-1.5 text-custom-text-200">
+                <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+                {`${value.length} Labels`}
+              </div>
+            </Tooltip>
+          </div>
+        )
+      ) : (
+        <div
+          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
+            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+          }`}
+        >
+          Select labels
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      multiple
+    >
+      <Combobox.Button as={Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled
+              ? "cursor-not-allowed text-custom-text-200"
+              : value.length <= maxRender
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-custom-background-80"
+          }  ${buttonClassName}`}
+          onClick={() => !projectLabels && fetchProjectLabels()}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {isLoading ? (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            ) : filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {option.content}
+                      {selected && (
+                        <div className="flex-shrink-0">
+                          <Check className={`h-3.5 w-3.5`} />
+                        </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>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </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..cbf6602eb
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/priority.tsx
@@ -0,0 +1,25 @@
+import { PrioritySelect } from "components/project";
+import { observer } from "mobx-react-lite";
+// types
+import { TIssuePriorities } from "types";
+
+export interface IIssuePropertyPriority {
+  value: TIssuePriorities;
+  onChange: (value: TIssuePriorities) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+}
+
+export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer((props) => {
+  const { value, onChange, disabled, hideDropdownArrow = false } = props;
+
+  return (
+    <PrioritySelect
+      value={value}
+      onChange={onChange}
+      buttonClassName="!h-5 p-1.5"
+      disabled={disabled}
+      hideDropdownArrow={hideDropdownArrow}
+    />
+  );
+});
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..2af8881f9
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -0,0 +1,183 @@
+import { Fragment, useState } from "react";
+
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import { usePopper } from "react-popper";
+// ui
+import { Combobox } from "@headlessui/react";
+import { StateGroupIcon, Tooltip } from "@plane/ui";
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { IState } from "types";
+import { Placement } from "@popperjs/core";
+import { RootStore } from "store/root";
+
+export interface IIssuePropertyState {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: IState;
+  onChange: (state: IState) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props) => {
+  const {
+    view,
+    projectId,
+    value,
+    onChange,
+    disabled,
+    hideDropdownArrow = false,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+  } = props;
+
+  const { workspace: workspaceStore, projectState: projectStateStore }: RootStore = useMobxStore();
+  const workspaceSlug = workspaceStore?.workspaceSlug;
+
+  const [query, setQuery] = useState("");
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+  const projectStates: IState[] = [];
+  const projectStatesByGroup = projectStateStore.groupedProjectStates;
+  if (projectStatesByGroup)
+    for (const group in projectStatesByGroup) projectStates.push(...projectStatesByGroup[group]);
+
+  const fetchProjectStates = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      workspaceSlug &&
+        projectId &&
+        projectStateStore.fetchProjectStates(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
+
+  const dropdownOptions = projectStates?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2 w-full overflow-hidden">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        <div className="truncate inline-block line-clamp-1 w-full">{state.name}</div>
+      </div>
+    ),
+  }));
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const filteredOptions =
+    query === ""
+      ? dropdownOptions
+      : dropdownOptions?.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">
+        {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
+        <span className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">{value?.name ?? "State"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <Combobox
+          as="div"
+          className={`text-left w-auto max-w-full ${className}`}
+          value={value.id}
+          onChange={(data: string) => {
+            const selectedState = projectStates?.find((state) => state.id === data);
+            if (selectedState) onChange(selectedState);
+          }}
+          disabled={disabled}
+        >
+          <Combobox.Button as={Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between h-5 gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+              onClick={() => !projectStatesByGroup && fetchProjectStates()}
+            >
+              {label}
+              {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+            </button>
+          </Combobox.Button>
+          <Combobox.Options className="fixed z-10">
+            <div
+              className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+                <Search className="h-3.5 w-3.5 text-custom-text-300" />
+                <Combobox.Input
+                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search"
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+                {isLoading ? (
+                  <p className="text-center text-custom-text-200">Loading...</p>
+                ) : filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && (
+                            <div className="flex-shrink-0">
+                              <Check className="h-3.5 w-3.5" />
+                            </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>
+                )}
+              </div>
+            </div>
+          </Combobox.Options>
+        </Combobox>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
new file mode 100644
index 000000000..428fca5d4
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Link, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteArchivedIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+};
+
+export const ArchivedIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteArchivedIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
new file mode 100644
index 000000000..9736c575e
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate: (data: IIssue) => Promise<void>;
+  handleRemoveFromCycle: () => Promise<void>;
+};
+
+export const CycleIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete, handleUpdate, handleRemoveFromCycle } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
+        }}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleRemoveFromCycle();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <XCircle className="h-3 w-3" />
+            Remove from cycle
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts b/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
new file mode 100644
index 000000000..642c39032
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-issue";
+export * from "./module-issue";
+export * from "./project-issue";
+export * from "./archived-issue";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
new file mode 100644
index 000000000..93594de9e
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate: (data: IIssue) => Promise<void>;
+  handleRemoveFromModule: () => Promise<void>;
+};
+
+export const ModuleIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete, handleUpdate, handleRemoveFromModule } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
+        }}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleRemoveFromModule();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <XCircle className="h-3 w-3" />
+            Remove from module
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
new file mode 100644
index 000000000..7999be31d
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate: (data: IIssue) => Promise<void>;
+};
+
+export const ProjectIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete, handleUpdate } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
+        }}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
new file mode 100644
index 000000000..2906de3f1
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -0,0 +1,31 @@
+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 { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "components/issues";
+
+export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { archivedIssueFilters: archivedIssueFiltersStore, archivedIssues: archivedIssueStore } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId) {
+      await archivedIssueFiltersStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+      await archivedIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
+    }
+  });
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ArchivedIssueAppliedFiltersRoot />
+      <div className="w-full h-full overflow-auto">
+        <ArchivedIssueListLayout />
+      </div>
+    </div>
+  );
+});
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..4d9fa7f08
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -0,0 +1,95 @@
+import React, { useState } 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 {
+  CycleAppliedFiltersRoot,
+  CycleCalendarLayout,
+  CycleEmptyState,
+  CycleGanttLayout,
+  CycleKanBanLayout,
+  CycleListLayout,
+  CycleSpreadsheetLayout,
+} from "components/issues";
+import { TransferIssues, TransferIssuesModal } from "components/cycles";
+// ui
+import { Spinner } from "@plane/ui";
+// helpers
+import { getDateRangeStatus } from "helpers/date-time.helper";
+
+export const CycleLayoutRoot: React.FC = observer(() => {
+  const [transferIssuesModal, setTransferIssuesModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    cycle: cycleStore,
+    cycleIssue: cycleIssueStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId && cycleId ? `CYCLE_FILTERS_AND_ISSUES_${cycleId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId && cycleId) {
+      // fetching the project display filters and display properties
+      await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+      // fetching the cycle filters
+      await cycleIssueFilterStore.fetchCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+
+      // fetching the cycle issues
+      await cycleIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+    }
+  });
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const cycleDetails = cycleId ? cycleStore.cycle_details[cycleId.toString()] : undefined;
+  const cycleStatus =
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      : "draft";
+
+  const issueCount = cycleIssueStore.getIssuesCount;
+
+  if (!cycleIssueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
+      <div className="relative w-full h-full flex flex-col overflow-hidden">
+        {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
+        <CycleAppliedFiltersRoot />
+        {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+          <CycleEmptyState
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            cycleId={cycleId?.toString()}
+          />
+        ) : (
+          <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..c151127c3
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
@@ -0,0 +1,120 @@
+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 { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
+
+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,
+    workspace: workspaceStore,
+    workspaceMember: { workspaceMembers },
+    issueDetail: issueDetailStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  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.toString()}` : 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 handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      globalViewIssuesStore.updateIssueStructure(type ?? globalViewId!.toString(), payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, data);
+    },
+    [globalViewId, globalViewIssuesStore, workspaceSlug, issueDetailStore]
+  );
+
+  const issues = type
+    ? globalViewIssuesStore.viewIssues?.[type]
+    : globalViewId
+    ? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
+    : undefined;
+
+  if (!issues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <GlobalViewsAppliedFiltersRoot />
+      {issues?.length === 0 || !projects || projects?.length === 0 ? (
+        <GlobalViewEmptyState />
+      ) : (
+        <div className="h-full w-full overflow-auto">
+          <SpreadsheetView
+            displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+            displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+            handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+            issues={issues}
+            members={workspaceMembers?.map((m) => m.member)}
+            labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
+            handleIssueAction={() => {}}
+            handleUpdateIssue={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..515d73403
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/index.ts
@@ -0,0 +1,6 @@
+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";
+export * from "./archived-issue-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..3386725bc
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -0,0 +1,87 @@
+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,
+  ModuleEmptyState,
+  ModuleGanttLayout,
+  ModuleKanBanLayout,
+  ModuleListLayout,
+  ModuleSpreadsheetLayout,
+} from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
+
+export const ModuleLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    moduleId: string;
+  };
+
+  const {
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    moduleFilter: moduleIssueFilterStore,
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId && moduleId ? `MODULE_FILTERS_AND_ISSUES_${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 module issues
+        await moduleIssueStore.fetchIssues(workspaceSlug, projectId, moduleId);
+      }
+    }
+  );
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const issueCount = moduleIssueStore.getIssuesCount;
+
+  if (!moduleIssueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ModuleAppliedFiltersRoot />
+      {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+        <ModuleEmptyState
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          moduleId={moduleId?.toString()}
+        />
+      ) : (
+        <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..0539542da
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -0,0 +1,65 @@
+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,
+  ProjectSpreadsheetLayout,
+  ProjectEmptyState,
+} from "components/issues";
+import { Spinner } from "@plane/ui";
+
+export const ProjectLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId ? `PROJECT_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId) {
+      await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+      await issueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
+    }
+  });
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const issueCount = issueStore.getIssuesCount;
+
+  if (!issueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ProjectAppliedFiltersRoot />
+      {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+        <ProjectEmptyState />
+      ) : (
+        <div className="w-full h-full overflow-auto">
+          {activeLayout === "list" ? (
+            <ListLayout />
+          ) : activeLayout === "kanban" ? (
+            <KanBanLayout />
+          ) : activeLayout === "calendar" ? (
+            <CalendarLayout />
+          ) : activeLayout === "gantt_chart" ? (
+            <GanttLayout />
+          ) : activeLayout === "spreadsheet" ? (
+            <ProjectSpreadsheetLayout />
+          ) : 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..ce8051dea
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -0,0 +1,84 @@
+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,
+  ProjectViewEmptyState,
+  ProjectViewGanttLayout,
+  ProjectViewSpreadsheetLayout,
+} from "components/issues";
+import { Spinner } from "@plane/ui";
+
+export const ProjectViewLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    projectViews: projectViewsStore,
+    projectViewIssues: projectViewIssuesStore,
+    projectViewFilters: projectViewFiltersStore,
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId && viewId ? `PROJECT_VIEW_FILTERS_AND_ISSUES_${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 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;
+
+  const issueCount = projectViewIssuesStore.getIssuesCount;
+
+  if (!projectViewIssuesStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative h-full w-full flex flex-col overflow-hidden">
+      <ProjectViewAppliedFiltersRoot />
+      {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+        <ProjectViewEmptyState />
+      ) : (
+        <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/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
new file mode 100644
index 000000000..4cd19fdd1
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+// components
+import { IssuePropertyAssignee } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IUserLite } from "types";
+
+type Props = {
+  issue: IIssue;
+  members: IUserLite[] | undefined;
+  onChange: (data: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyAssignee
+        projectId={issue.project_detail.id ?? null}
+        value={issue.assignees}
+        onChange={(data) => onChange({ assignees: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
+        hideDropdownArrow
+        disabled={disabled}
+        multiple
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue) => (
+          <SpreadsheetAssigneeColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            members={members}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
new file mode 100644
index 000000000..e9da93eae
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
+        {issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
new file mode 100644
index 000000000..7ba9d081c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
@@ -0,0 +1,173 @@
+import { observer } from "mobx-react-lite";
+// components
+import { SpreadsheetColumn } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
+  disableUserActions: boolean;
+  expandedIssues: string[];
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  issues: IIssue[] | undefined;
+  members?: IUserLite[] | undefined;
+  labels?: IIssueLabels[] | undefined;
+  states?: IState[] | undefined;
+};
+
+export const SpreadsheetColumnsList: React.FC<Props> = observer((props) => {
+  const {
+    disableUserActions,
+    displayFilters,
+    displayProperties,
+    expandedIssues,
+    handleDisplayFilterUpdate,
+    handleUpdateIssue,
+    issues,
+    members,
+    labels,
+    states,
+  } = props;
+
+  return (
+    <>
+      {displayProperties.state && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          states={states}
+          property="state"
+        />
+      )}
+      {displayProperties.priority && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="priority"
+        />
+      )}
+      {displayProperties.assignee && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          members={members}
+          property="assignee"
+        />
+      )}
+      {displayProperties.labels && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          labels={labels}
+          property="labels"
+        />
+      )}{" "}
+      {displayProperties.start_date && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="start_date"
+        />
+      )}
+      {displayProperties.due_date && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="due_date"
+        />
+      )}
+      {displayProperties.estimate && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="estimate"
+        />
+      )}
+      {displayProperties.created_on && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="created_on"
+        />
+      )}
+      {displayProperties.updated_on && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="updated_on"
+        />
+      )}
+      {displayProperties.link && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="link"
+        />
+      )}
+      {displayProperties.attachment_count && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="attachment_count"
+        />
+      )}
+      {displayProperties.sub_issue_count && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="sub_issue_count"
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
new file mode 100644
index 000000000..8c901a9d8
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIssues }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.created_at)}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
new file mode 100644
index 000000000..97cb2191a
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+// components
+import { ViewDueDateSelect } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <ViewDueDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ target_date: val })}
+        className="flex items-center px-2.5 py-1 !h-full !w-full max-w-full"
+        noBorder
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetDueDateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
new file mode 100644
index 000000000..c70c7e318
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -0,0 +1,49 @@
+// components
+import { IssuePropertyEstimates } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyEstimates
+        projectId={issue.project_detail.id ?? null}
+        value={issue.estimate_point}
+        onChange={(data) => onChange({ estimate_point: data })}
+        className="h-full w-full"
+        buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
+        hideDropdownArrow
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetEstimateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/core/views/spreadsheet-view/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
similarity index 64%
rename from web/components/core/views/spreadsheet-view/index.ts
rename to web/components/issues/issue-layouts/spreadsheet/columns/index.ts
index 9bf8ed1b0..a6c4979b3 100644
--- a/web/components/core/views/spreadsheet-view/index.ts
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -1,13 +1,14 @@
+export * from "./issue";
 export * from "./assignee-column";
+export * from "./attachment-column";
+export * from "./columns-list";
 export * from "./created-on-column";
 export * from "./due-date-column";
 export * from "./estimate-column";
-export * from "./issue-column";
 export * from "./label-column";
+export * from "./link-column";
 export * from "./priority-column";
 export * from "./start-date-column";
 export * from "./state-column";
+export * from "./sub-issue-column";
 export * from "./updated-on-column";
-export * from "./spreadsheet-view";
-export * from "./issue-column/issue-column";
-export * from "./issue-column/spreadsheet-issue-column";
diff --git a/web/components/core/views/spreadsheet-view/issue-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
similarity index 100%
rename from web/components/core/views/spreadsheet-view/issue-column/index.ts
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
new file mode 100644
index 000000000..3fd042c1d
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Popover2 } from "@blueprintjs/popover2";
+import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { Tooltip } from "@plane/ui";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+type Props = {
+  issue: IIssue;
+  expanded: boolean;
+  handleToggleExpand: (issueId: string) => void;
+  properties: IIssueDisplayProperties;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
+  disableUserActions: boolean;
+  nestingLevel: number;
+};
+
+export const IssueColumn: React.FC<Props> = ({
+  issue,
+  expanded,
+  handleToggleExpand,
+  setIssuePeekOverView,
+  properties,
+  handleEditIssue,
+  handleDeleteIssue,
+  disableUserActions,
+  nestingLevel,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyText = () => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleIssuePeekOverview = (issue: IIssue) => {
+    const { query } = router;
+    setIssuePeekOverView({
+      workspaceSlug: issue?.workspace_detail?.slug,
+      projectId: issue?.project_detail?.id,
+      issueId: issue?.id,
+    });
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssueId: issue?.id },
+    });
+  };
+
+  const paddingLeft = `${nestingLevel * 54}px`;
+
+  return (
+    <>
+      <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
+        {properties.key && (
+          <div
+            className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+            style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
+          >
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+              <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
+
+              {!disableUserActions && (
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                  <Popover2
+                    isOpen={isOpen}
+                    canEscapeKeyClose
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    content={
+                      <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleCopyText();
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Link className="h-3 w-3" />
+                            <span>Copy link</span>
+                          </div>
+                        </button>
+
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleEditIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit issue</span>
+                          </div>
+                        </button>
+
+                        <button
+                          type="button"
+                          className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleDeleteIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete issue</span>
+                          </div>
+                        </button>
+                      </div>
+                    }
+                    placement="bottom-start"
+                  >
+                    <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
+                  </Popover2>
+                </div>
+              )}
+            </div>
+
+            {issue.sub_issues_count > 0 && (
+              <div className="h-6 w-6 flex justify-center items-center">
+                <button
+                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                  onClick={() => handleToggleExpand(issue.id)}
+                >
+                  <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+        <div className="w-full overflow-hidden">
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <div
+              className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
+              onClick={() => handleIssuePeekOverview(issue)}
+            >
+              {issue.name}
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
similarity index 71%
rename from web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
index 966852a5b..703174de5 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
@@ -1,46 +1,47 @@
 import React from "react";
 
 // components
-import { IssueColumn } from "components/core";
+import { IssueColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { IIssue, Properties, UserAuth } from "types";
+import { IIssue, IIssueDisplayProperties } from "types";
 
 type Props = {
   issue: IIssue;
-  projectId: string;
   expandedIssues: string[];
   setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
-  properties: Properties;
+  properties: IIssueDisplayProperties;
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
   disableUserActions: boolean;
-  userAuth: UserAuth;
   nestingLevel?: number;
 };
 
 export const SpreadsheetIssuesColumn: React.FC<Props> = ({
   issue,
-  projectId,
   expandedIssues,
   setExpandedIssues,
+  setIssuePeekOverView,
   properties,
   handleIssueAction,
-  setCurrentProjectId,
   disableUserActions,
-  userAuth,
   nestingLevel = 0,
 }) => {
   const handleToggleExpand = (issueId: string) => {
     setExpandedIssues((prevState) => {
       const newArray = [...prevState];
       const index = newArray.indexOf(issueId);
-      if (index > -1) {
-        newArray.splice(index, 1);
-      } else {
-        newArray.push(issueId);
-      }
+
+      if (index > -1) newArray.splice(index, 1);
+      else newArray.push(issueId);
+
       return newArray;
     });
   };
@@ -50,18 +51,16 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
+    <>
       <IssueColumn
         issue={issue}
-        projectId={projectId}
         expanded={isExpanded}
         handleToggleExpand={handleToggleExpand}
         properties={properties}
         handleEditIssue={() => handleIssueAction(issue, "edit")}
         handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-        setCurrentProjectId={setCurrentProjectId}
+        setIssuePeekOverView={setIssuePeekOverView}
         disableUserActions={disableUserActions}
-        userAuth={userAuth}
         nestingLevel={nestingLevel}
       />
 
@@ -69,21 +68,19 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
         !isLoading &&
         subIssues &&
         subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
+        subIssues.map((subIssue) => (
           <SpreadsheetIssuesColumn
             key={subIssue.id}
             issue={subIssue}
-            projectId={subIssue.project_detail.id}
             expandedIssues={expandedIssues}
             setExpandedIssues={setExpandedIssues}
             properties={properties}
             handleIssueAction={handleIssueAction}
-            setCurrentProjectId={setCurrentProjectId}
+            setIssuePeekOverView={setIssuePeekOverView}
             disableUserActions={disableUserActions}
-            userAuth={userAuth}
             nestingLevel={nestingLevel + 1}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
new file mode 100644
index 000000000..59066f849
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+// components
+import { IssuePropertyLabels } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IIssueLabels } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  labels: IIssueLabels[] | undefined;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, labels, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyLabels
+        projectId={issue.project_detail.id ?? null}
+        value={issue.labels}
+        onChange={(data) => onChange({ labels: data })}
+        className="h-full w-full"
+        buttonClassName="px-2.5 h-full"
+        noLabelBorder
+        hideDropdownArrow
+        maxRender={1}
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetLabelColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            labels={labels}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
new file mode 100644
index 000000000..e0dc67a10
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
+        {issue.link_count} {issue.link_count === 1 ? "link" : "links"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
new file mode 100644
index 000000000..388755cd3
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+// components
+import { PrioritySelect } from "components/project";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <PrioritySelect
+        value={issue.priority}
+        onChange={(data) => onChange({ priority: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        showTitle
+        highlightUrgentPriority={false}
+        hideDropdownArrow
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetPriorityColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
new file mode 100644
index 000000000..01e38c474
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+// components
+import { ViewStartDateSelect } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <ViewStartDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ start_date: val })}
+        className="flex items-center px-2.5 py-1 !h-full !w-full max-w-full"
+        noBorder
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetStartDateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
new file mode 100644
index 000000000..44b9a217f
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+// components
+import { IssuePropertyState } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IState } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: Partial<IIssue>) => void;
+  states: IState[] | undefined;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, states, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyState
+        projectId={issue.project_detail.id ?? null}
+        value={issue.state_detail}
+        onChange={(data) => onChange({ state: data.id, state_detail: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full"
+        hideDropdownArrow
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue) => (
+          <SpreadsheetStateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            states={states}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
new file mode 100644
index 000000000..53a3973ad
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
+        {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
new file mode 100644
index 000000000..dba684c84
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.updated_at)}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
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..5b14a2dab
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -0,0 +1,5 @@
+export * from "./columns";
+export * from "./roots";
+export * from "./spreadsheet-column";
+export * from "./spreadsheet-view";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
new file mode 100644
index 000000000..126d44498
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
@@ -0,0 +1,184 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-xs w-20 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 py-3 rounded-md bg-transparent text-sm leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      {isOpen && (
+        <div>
+          <form
+            ref={ref}
+            onSubmit={handleSubmit(onSubmitHandler)}
+            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"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <div className="flex items-center">
+          <button
+            type="button"
+            className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pt-3 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
new file mode 100644
index 000000000..f8f400c95
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -0,0 +1,71 @@
+import React, { 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 { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const CycleSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+  } = useMobxStore();
+
+  const issues = cycleIssueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      cycleIssueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueDetailStore, cycleIssueStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectMembers?.map((m) => m.member)}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/index.ts b/web/components/issues/issue-layouts/spreadsheet/roots/index.ts
new file mode 100644
index 000000000..10037416c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-root";
+export * from "./project-view-root";
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
new file mode 100644
index 000000000..78cd095fa
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -0,0 +1,71 @@
+import React, { 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 { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ModuleSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+  } = useMobxStore();
+
+  const issues = moduleIssueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      moduleIssueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueDetailStore, moduleIssueStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectMembers?.map((m) => m.member)}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
new file mode 100644
index 000000000..be9c9ea5c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -0,0 +1,74 @@
+import React, { 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 { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ProjectSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    user: userStore,
+  } = useMobxStore();
+
+  const user = userStore.currentUser;
+  const issues = issueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !user) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      issueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueStore, issueDetailStore, projectId, user, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectMembers?.map((m) => m.member)}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+      enableQuickCreateIssue
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
new file mode 100644
index 000000000..3e6847b21
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -0,0 +1,71 @@
+import React, { 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 { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    projectViewIssues: projectViewIssueStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+  } = useMobxStore();
+
+  const issues = projectViewIssueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      projectViewIssueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueDetailStore, projectViewIssueStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectMembers?.map((m) => m.member)}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
new file mode 100644
index 000000000..1cb4675f9
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -0,0 +1,235 @@
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  CheckIcon,
+  ChevronDownIcon,
+  Eraser,
+  ListFilter,
+  MoveRight,
+} from "lucide-react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import {
+  SpreadsheetAssigneeColumn,
+  SpreadsheetAttachmentColumn,
+  SpreadsheetCreatedOnColumn,
+  SpreadsheetDueDateColumn,
+  SpreadsheetEstimateColumn,
+  SpreadsheetLabelColumn,
+  SpreadsheetLinkColumn,
+  SpreadsheetPriorityColumn,
+  SpreadsheetStartDateColumn,
+  SpreadsheetStateColumn,
+  SpreadsheetSubIssueColumn,
+  SpreadsheetUpdatedOnColumn,
+} from "components/issues";
+// ui
+import { CustomMenu } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueLabels, IState, IUserLite, TIssueOrderByOptions } from "types";
+// constants
+import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
+
+type Props = {
+  disableUserActions: boolean;
+  displayFilters: IIssueDisplayFilterOptions;
+  expandedIssues: string[];
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  issues: IIssue[] | undefined;
+  property: string;
+  members?: IUserLite[] | undefined;
+  labels?: IIssueLabels[] | undefined;
+  states?: IState[] | undefined;
+};
+
+export const SpreadsheetColumn: React.FC<Props> = (props) => {
+  const {
+    disableUserActions,
+    displayFilters,
+    expandedIssues,
+    handleDisplayFilterUpdate,
+    handleUpdateIssue,
+    issues,
+    property,
+    members,
+    labels,
+    states,
+  } = props;
+
+  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
+    "spreadsheetViewSorting",
+    ""
+  );
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
+    "spreadsheetViewActiveSortingProperty",
+    ""
+  );
+
+  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
+    handleDisplayFilterUpdate({ order_by: order });
+
+    setSelectedMenuItem(`${order}_${itemKey}`);
+    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
+  };
+
+  const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property];
+
+  return (
+    <div className="relative flex flex-col h-max w-full max-w-max bg-custom-background-100">
+      <div className="flex items-center min-w-[8rem] px-4 py-1 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">
+        <CustomMenu
+          customButtonClassName="!w-full"
+          className="!w-full"
+          customButton={
+            <div className="flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-2">
+              <div className="flex items-center gap-1.5">
+                {activeSortingProperty === property && (
+                  <div className="rounded-full flex items-center justify-center h-3.5 w-3.5">
+                    <ListFilter className="h-3 w-3" />
+                  </div>
+                )}
+                {propertyDetails.title}
+              </div>
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </div>
+          }
+          width="xl"
+          placement="bottom-end"
+        >
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
+            <div
+              className={`flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                <ArrowDownWideNarrow className="h-3 w-3 stroke-[1.5]" />
+                <span>{propertyDetails.ascendingOrderTitle}</span>
+                <MoveRight className="h-3 w-3" />
+                <span>{propertyDetails.descendingOrderTitle}</span>
+              </div>
+
+              {selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` && (
+                <CheckIcon className="h-3 w-3" />
+              )}
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
+            <div
+              className={`flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                <ArrowUpNarrowWide className="h-3 w-3 stroke-[1.5]" />
+                <span>{propertyDetails.descendingOrderTitle}</span>
+                <MoveRight className="h-3 w-3" />
+                <span>{propertyDetails.ascendingOrderTitle}</span>
+              </div>
+
+              {selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` && (
+                <CheckIcon className="h-3 w-3" />
+              )}
+            </div>
+          </CustomMenu.MenuItem>
+          {selectedMenuItem &&
+            selectedMenuItem !== "" &&
+            displayFilters?.order_by !== "-created_at" &&
+            selectedMenuItem.includes(property) && (
+              <CustomMenu.MenuItem
+                className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`}
+                key={property}
+                onClick={() => handleOrderBy("-created_at", property)}
+              >
+                <div className="flex items-center gap-2 px-1">
+                  <Eraser className="h-3 w-3" />
+                  <span>Clear sorting</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+        </CustomMenu>
+      </div>
+
+      <div className="h-full min-w-[8rem] w-full">
+        {issues?.map((issue) => (
+          <div
+            key={`${property}-${issue.id}`}
+            className={`h-11 border-b-[0.5px] border-custom-border-200 ${
+              disableUserActions ? "" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+          >
+            {property === "state" ? (
+              <SpreadsheetStateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                states={states}
+              />
+            ) : property === "priority" ? (
+              <SpreadsheetPriorityColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "estimate" ? (
+              <SpreadsheetEstimateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "assignee" ? (
+              <SpreadsheetAssigneeColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                members={members}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "labels" ? (
+              <SpreadsheetLabelColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                labels={labels}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "start_date" ? (
+              <SpreadsheetStartDateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "due_date" ? (
+              <SpreadsheetDueDateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "created_on" ? (
+              <SpreadsheetCreatedOnColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "updated_on" ? (
+              <SpreadsheetUpdatedOnColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "link" ? (
+              <SpreadsheetLinkColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "attachment_count" ? (
+              <SpreadsheetAttachmentColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "sub_issue_count" ? (
+              <SpreadsheetSubIssueColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
new file mode 100644
index 000000000..765e6d35c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -0,0 +1,185 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  issues: IIssue[] | undefined;
+  members?: IUserLite[] | undefined;
+  labels?: IIssueLabels[] | undefined;
+  states?: IState[] | undefined;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  openIssuesListModal?: (() => void) | null;
+  disableUserActions: boolean;
+  enableQuickCreateIssue?: boolean;
+};
+
+export const SpreadsheetView: React.FC<Props> = observer((props) => {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issues,
+    members,
+    labels,
+    states,
+    handleIssueAction,
+    handleUpdateIssue,
+    openIssuesListModal,
+    disableUserActions,
+    enableQuickCreateIssue,
+  } = props;
+
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+  const [issuePeekOverview, setIssuePeekOverView] = useState<{
+    workspaceSlug: string;
+    projectId: string;
+    issueId: string;
+  } | null>(null);
+
+  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+
+    const scrollLeft = containerRef.current.scrollLeft;
+    setIsScrolled(scrollLeft > 0);
+  };
+
+  useEffect(() => {
+    const currentContainerRef = containerRef.current;
+
+    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <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 divide-x-[0.5px] divide-custom-border-200 horizontal-scroll-enable"
+        >
+          {issues && issues.length > 0 ? (
+            <>
+              <div className="sticky left-0 w-[28rem] z-[2]">
+                <div
+                  className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+                  style={{
+                    boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
+                  }}
+                >
+                  <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">
+                    {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>
+                  </div>
+
+                  {issues.map((issue, index) => (
+                    <SpreadsheetIssuesColumn
+                      key={`${issue.id}_${index}`}
+                      issue={issue}
+                      expandedIssues={expandedIssues}
+                      setExpandedIssues={setExpandedIssues}
+                      properties={displayProperties}
+                      handleIssueAction={handleIssueAction}
+                      disableUserActions={disableUserActions}
+                      setIssuePeekOverView={setIssuePeekOverView}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <SpreadsheetColumnsList
+                displayFilters={displayFilters}
+                displayProperties={displayProperties}
+                disableUserActions={disableUserActions}
+                expandedIssues={expandedIssues}
+                handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+                handleUpdateIssue={handleUpdateIssue}
+                issues={issues}
+                members={members}
+                labels={labels}
+                states={states}
+              />
+            </>
+          ) : (
+            <div className="grid place-items-center h-full w-full">
+              <Spinner />
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-custom-border-100">
+          <div className="mb-3 z-50 sticky bottom-0 left-0">
+            {enableQuickCreateIssue && <SpreadsheetInlineCreateIssueForm />}
+          </div>
+
+          {/* {!disableUserActions &&
+            !isInlineCreateIssueFormOpen &&
+            (type === "issue" ? (
+              <button
+                className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
+                onClick={() => setIsInlineCreateIssueFormOpen(true)}
+              >
+                <PlusIcon className="h-4 w-4" />
+                New Issue
+              </button>
+            ) : (
+              <CustomMenu
+                className="sticky left-0 z-10"
+                customButton={
+                  <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
+                  </button>
+                }
+                optionsClassName="left-5 !w-36"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                  Create new
+                </CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            ))} */}
+        </div>
+      </div>
+      {issuePeekOverview && (
+        <IssuePeekOverview
+          workspaceSlug={issuePeekOverview?.workspaceSlug}
+          projectId={issuePeekOverview?.projectId}
+          issueId={issuePeekOverview?.issueId}
+          handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/activity/card.tsx b/web/components/issues/issue-peek-overview/activity/card.tsx
new file mode 100644
index 000000000..9b19f87f9
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/card.tsx
@@ -0,0 +1,138 @@
+import { FC } from "react";
+import Link from "next/link";
+import { History } from "lucide-react";
+// packages
+import { Tooltip } from "@plane/ui";
+// components
+import { ActivityIcon, ActivityMessage } from "components/core";
+import { IssueCommentCard } from "./comment-card";
+// helpers
+import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
+
+interface IssueActivityCard {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+  issueComments: any;
+  issueCommentUpdate: (comment: any) => void;
+  issueCommentRemove: (commentId: string) => void;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+}
+
+export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    user,
+    issueComments,
+    issueCommentUpdate,
+    issueCommentRemove,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+  } = props;
+
+  return (
+    <div className="flow-root">
+      <ul role="list" className="-mb-4">
+        {issueComments &&
+          issueComments.length > 0 &&
+          issueComments.map((activityItem: any, index: any) => {
+            // determines what type of action is performed
+            const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
+
+            if ("field" in activityItem && activityItem.field !== "updated_by") {
+              return (
+                <li key={activityItem.id}>
+                  <div className="relative pb-1">
+                    {issueComments.length > 1 && index !== issueComments.length - 1 ? (
+                      <span
+                        className="absolute top-5 left-5 -ml-[1.5px] h-full w-0.5 bg-custom-background-100"
+                        aria-hidden="true"
+                      />
+                    ) : null}
+                    <div className="relative flex items-start space-x-2">
+                      <div>
+                        <div className="relative px-1.5">
+                          <div className="mt-1.5">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-100 text-custom-text-200 ring-white">
+                              {activityItem.field ? (
+                                activityItem.new_value === "restore" ? (
+                                  <History className="h-3.5 w-3.5 text-custom-text-200" />
+                                ) : (
+                                  <ActivityIcon activity={activityItem} />
+                                )
+                              ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                                <img
+                                  src={activityItem.actor_detail.avatar}
+                                  alt={activityItem.actor_detail.display_name}
+                                  height={24}
+                                  width={24}
+                                  className="rounded-full h-full w-full object-cover"
+                                />
+                              ) : (
+                                <div
+                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                >
+                                  {activityItem.actor_detail.is_bot
+                                    ? activityItem.actor_detail.first_name.charAt(0)
+                                    : activityItem.actor_detail.display_name.charAt(0)}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </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" ? (
+                            <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.is_bot
+                                  ? activityItem.actor_detail.first_name
+                                  : activityItem.actor_detail.display_name}
+                              </a>
+                            </Link>
+                          )}{" "}
+                          {message}{" "}
+                          <Tooltip
+                            tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
+                              activityItem.created_at
+                            )}`}
+                          >
+                            <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              );
+            } else if ("comment_json" in activityItem)
+              return (
+                <div key={activityItem.id} className="mt-4">
+                  <IssueCommentCard
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    user={user}
+                    comment={activityItem}
+                    onSubmit={issueCommentUpdate}
+                    handleCommentDeletion={issueCommentRemove}
+                    issueCommentReactionCreate={issueCommentReactionCreate}
+                    issueCommentReactionRemove={issueCommentReactionRemove}
+                    // showAccessSpecifier={showAccessSpecifier}
+                  />
+                </div>
+              );
+          })}
+      </ul>
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/activity/comment-card.tsx b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
new file mode 100644
index 000000000..e75013516
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
@@ -0,0 +1,219 @@
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
+// services
+import { FileService } from "services/file.service";
+// ui
+import { CustomMenu } from "@plane/ui";
+import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+// components
+import { IssueCommentReaction } from "./comment-reaction";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import type { IIssueComment } from "types";
+
+// services
+const fileService = new FileService();
+
+type IIssueCommentCard = {
+  comment: IIssueComment;
+  handleCommentDeletion: (comment: string) => void;
+  onSubmit: (data: Partial<IIssueComment>) => void;
+  showAccessSpecifier?: boolean;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+};
+
+export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
+  const {
+    comment,
+    handleCommentDeletion,
+    onSubmit,
+    showAccessSpecifier = false,
+    workspaceSlug,
+    projectId,
+    issueId,
+    user,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+  } = props;
+
+  const editorRef = React.useRef<any>(null);
+  const showEditorRef = React.useRef<any>(null);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    watch,
+    setValue,
+  } = useForm<IIssueComment>({
+    defaultValues: comment,
+  });
+
+  const formSubmit = (formData: Partial<IIssueComment>) => {
+    if (isSubmitting) return;
+
+    setIsEditing(false);
+
+    onSubmit({ id: comment.id, ...formData });
+
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
+  };
+
+  useEffect(() => {
+    isEditing && setFocus("comment");
+  }, [isEditing, setFocus]);
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              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`}>
+            {comment.actor_detail.is_bot
+              ? comment.actor_detail.first_name.charAt(0)
+              : comment.actor_detail.display_name.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <MessageSquare 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}
+          </div>
+          <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">
+          <div className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
+            <div>
+              <LiteTextEditorWithRef
+                onEnterKeyPress={handleSubmit(formSubmit)}
+                cancelUploadImage={fileService.cancelUpload}
+                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                deleteFile={fileService.deleteImage}
+                ref={editorRef}
+                value={watch("comment_html")}
+                debouncedUpdatesEnabled={false}
+                customClassName="min-h-[50px] p-3 shadow-sm"
+                onChange={(comment_json: Object, comment_html: string) => {
+                  setValue("comment_json", comment_json);
+                  setValue("comment_html", comment_html);
+                }}
+                mentionSuggestions={editorSuggestions.mentionSuggestions}
+                mentionHighlights={editorSuggestions.mentionHighlights}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="button"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+                onClick={handleSubmit(formSubmit)}
+              >
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </button>
+
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+              </button>
+            </div>
+          </div>
+
+          <div className={`relative ${isEditing ? "hidden" : ""}`}>
+            {showAccessSpecifier && (
+              <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
+                {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
+              </div>
+            )}
+            <LiteReadOnlyEditorWithRef
+              ref={showEditorRef}
+              value={comment.comment_html}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={editorSuggestions.mentionHighlights}
+            />
+
+            <div className="mt-1">
+              <IssueCommentReaction
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
+                user={user}
+                comment={comment}
+                issueCommentReactionCreate={issueCommentReactionCreate}
+                issueCommentReactionRemove={issueCommentReactionRemove}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      {user?.id === comment.actor && (
+        <CustomMenu ellipsis>
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
+            <Pencil className="h-3 w-3" />
+            Edit comment
+          </CustomMenu.MenuItem>
+          {showAccessSpecifier && (
+            <>
+              {comment.access === "INTERNAL" ? (
+                <CustomMenu.MenuItem
+                  onClick={() => onSubmit({ id: comment.id, access: "EXTERNAL" })}
+                  className="flex items-center gap-1"
+                >
+                  <Globe2 className="h-3 w-3" />
+                  Switch to public comment
+                </CustomMenu.MenuItem>
+              ) : (
+                <CustomMenu.MenuItem
+                  onClick={() => onSubmit({ id: comment.id, access: "INTERNAL" })}
+                  className="flex items-center gap-1"
+                >
+                  <Lock className="h-3 w-3" />
+                  Switch to private comment
+                </CustomMenu.MenuItem>
+              )}
+            </>
+          )}
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleCommentDeletion(comment.id);
+            }}
+            className="flex items-center gap-1"
+          >
+            <Trash2 className="h-3 w-3" />
+            Delete comment
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/activity/comment-editor.tsx b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
new file mode 100644
index 000000000..2aa7b9607
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { useForm, Controller } from "react-hook-form";
+import { Globe2, Lock } from "lucide-react";
+// services
+import { FileService } from "services/file.service";
+// hooks
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+// components
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssueComment } from "types";
+
+const defaultValues: Partial<IIssueComment> = {
+  access: "INTERNAL",
+  comment_html: "",
+};
+
+type IIssueCommentEditor = {
+  disabled?: boolean;
+  onSubmit: (data: IIssueComment) => Promise<void>;
+  showAccessSpecifier?: boolean;
+};
+
+type commentAccessType = {
+  icon: any;
+  key: string;
+  label: "Private" | "Public";
+};
+const commentAccess: commentAccessType[] = [
+  {
+    icon: Lock,
+    key: "INTERNAL",
+    label: "Private",
+  },
+  {
+    icon: Globe2,
+    key: "EXTERNAL",
+    label: "Public",
+  },
+];
+
+// services
+const fileService = new FileService();
+
+export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
+  const { disabled = false, onSubmit, showAccessSpecifier = false } = props;
+
+  const editorRef = React.useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!formData.comment_html || isSubmitting) return;
+
+    await onSubmit(formData).then(() => {
+      reset(defaultValues);
+      editorRef.current?.clearEditor();
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleAddComment)}>
+      <div className="space-y-2">
+        <div className="h-full">
+          <Controller
+            name="access"
+            control={control}
+            render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+              <Controller
+                name="comment_html"
+                control={control}
+                render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
+                  <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleAddComment)}
+                    cancelUploadImage={fileService.cancelUpload}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                    deleteFile={fileService.deleteImage}
+                    ref={editorRef}
+                    value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
+                    customClassName="p-2 h-full"
+                    editorContentCustomClassNames="min-h-[35px]"
+                    debouncedUpdatesEnabled={false}
+                    mentionSuggestions={editorSuggestions.mentionSuggestions}
+                    mentionHighlights={editorSuggestions.mentionHighlights}
+                    onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
+                    commentAccessSpecifier={
+                      showAccessSpecifier
+                        ? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
+                        : undefined
+                    }
+                    submitButton={
+                      <Button
+                        variant="primary"
+                        type="submit"
+                        className="!px-2.5 !py-1.5 !text-xs"
+                        disabled={isSubmitting || disabled}
+                      >
+                        {isSubmitting ? "Adding..." : "Comment"}
+                      </Button>
+                    }
+                  />
+                )}
+              />
+            )}
+          />
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/activity/comment-reaction.tsx b/web/components/issues/issue-peek-overview/activity/comment-reaction.tsx
new file mode 100644
index 000000000..46fbae50b
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/comment-reaction.tsx
@@ -0,0 +1,61 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueReaction } from "../reactions";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { RootStore } from "store/root";
+
+interface IIssueCommentReaction {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+
+  comment: any;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+}
+
+export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props) => {
+  const { workspaceSlug, projectId, issueId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } =
+    props;
+
+  const { issueDetail: issueDetailStore }: RootStore = useMobxStore();
+
+  const handleCommentReactionCreate = (reaction: string) => {
+    if (issueCommentReactionCreate && comment?.id) issueCommentReactionCreate(comment?.id, reaction);
+  };
+
+  const handleCommentReactionRemove = (reaction: string) => {
+    if (issueCommentReactionRemove && comment?.id) issueCommentReactionRemove(comment?.id, reaction);
+  };
+
+  useSWR(
+    workspaceSlug && projectId && issueId && comment && comment?.id
+      ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}`
+      : null,
+    () => {
+      if (workspaceSlug && projectId && issueId && comment && comment.id) {
+        issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, issueId, comment?.id);
+      }
+    }
+  );
+
+  let issueReactions = issueDetailStore?.getIssueCommentReactions || null;
+  issueReactions = issueReactions && comment.id ? issueReactions?.[comment.id] : [];
+
+  return (
+    <div>
+      <IssueReaction
+        issueReactions={issueReactions}
+        user={user}
+        issueReactionCreate={handleCommentReactionCreate}
+        issueReactionRemove={handleCommentReactionRemove}
+        position="top"
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/activity/index.ts b/web/components/issues/issue-peek-overview/activity/index.ts
new file mode 100644
index 000000000..a2196d35d
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/index.ts
@@ -0,0 +1,5 @@
+export * from "./view";
+
+export * from "./card";
+export * from "./comment-editor";
+export * from "./comment-reaction";
diff --git a/web/components/issues/issue-peek-overview/activity/view.tsx b/web/components/issues/issue-peek-overview/activity/view.tsx
new file mode 100644
index 000000000..fec3a2a08
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/view.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+// components
+import { IssueActivityCard } from "./card";
+import { IssueCommentEditor } from "./comment-editor";
+
+interface IIssueComment {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+  issueComments: any;
+  issueCommentCreate: (comment: any) => void;
+  issueCommentUpdate: (comment: any) => void;
+  issueCommentRemove: (commentId: string) => void;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+  showCommentAccessSpecifier: boolean;
+}
+
+export const IssueComment: FC<IIssueComment> = (props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    user,
+    issueComments,
+    issueCommentCreate,
+    issueCommentUpdate,
+    issueCommentRemove,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+    showCommentAccessSpecifier,
+  } = props;
+
+  const handleAddComment = async (formData: any) => {
+    if (!formData.comment_html) return;
+    await issueCommentCreate(formData);
+  };
+
+  return (
+    <div className="flex flex-col gap-3 border-t py-6 border-custom-border-200">
+      <div className="font-medium text-lg">Activity</div>
+
+      <div className="space-y-2">
+        <IssueActivityCard
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          user={user}
+          issueComments={issueComments}
+          issueCommentUpdate={issueCommentUpdate}
+          issueCommentRemove={issueCommentRemove}
+          issueCommentReactionCreate={issueCommentReactionCreate}
+          issueCommentReactionRemove={issueCommentReactionRemove}
+        />
+        <IssueCommentEditor onSubmit={handleAddComment} showAccessSpecifier={showCommentAccessSpecifier} />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/index.ts b/web/components/issues/issue-peek-overview/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/components/issues/issue-peek-overview/issue-detail.tsx b/web/components/issues/issue-peek-overview/issue-detail.tsx
new file mode 100644
index 000000000..875927907
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/issue-detail.tsx
@@ -0,0 +1,163 @@
+import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// packages
+import { RichTextEditor } from "@plane/rich-text-editor";
+// components
+import { TextArea } from "@plane/ui";
+import { IssueReaction } from "./reactions";
+// hooks
+import { useDebouncedCallback } from "use-debounce";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+// types
+import { IIssue } from "types";
+// services
+import { FileService } from "services/file.service";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const fileService = new FileService();
+
+interface IPeekOverviewIssueDetails {
+  workspaceSlug: string;
+  issue: IIssue;
+  issueReactions: any;
+  user: any;
+  issueUpdate: (issue: Partial<IIssue>) => void;
+  issueReactionCreate: (reaction: string) => void;
+  issueReactionRemove: (reaction: string) => void;
+}
+
+export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
+  const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove } = props;
+  // store
+  const { user: userStore } = useMobxStore();
+  const { currentProjectRole } = userStore;
+  const isAllowed = [15, 20].includes(currentProjectRole || 0);
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [characterLimit, setCharacterLimit] = useState(false);
+  // hooks
+  const { setShowAlert } = useReloadConfirmations();
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description_html: "",
+    },
+  });
+
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
+
+      await issueUpdate({
+        ...issue,
+        name: formData.name ?? "",
+        description_html: formData.description_html ?? "<p></p>",
+      });
+    },
+    [issue, issueUpdate]
+  );
+
+  const debouncedIssueDescription = useDebouncedCallback(async (_data: any) => {
+    issueUpdate({ ...issue, description_html: _data });
+  }, 1500);
+
+  const debouncedTitleSave = useDebouncedCallback(async () => {
+    handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+  }, 1500);
+
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
+
+  // reset form values
+  useEffect(() => {
+    if (!issue) return;
+
+    reset({
+      ...issue,
+    });
+  }, [issue, reset]);
+
+  return (
+    <>
+      <span className="font-medium text-base text-custom-text-400">
+        {issue?.project_detail?.identifier}-{issue?.sequence_id}
+      </span>
+
+      <div className="relative">
+        {isAllowed ? (
+          <Controller
+            name="name"
+            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  text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary !p-0 focus:!px-3 focus:!py-2"
+                hasError={Boolean(errors?.description)}
+                role="textbox"
+                disabled={!true}
+              />
+            )}
+          />
+        ) : (
+          <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
+        )}
+        {characterLimit && true && (
+          <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" : ""}`}>
+              {watch("name").length}
+            </span>
+            /255
+          </div>
+        )}
+      </div>
+      <span>{errors.name ? errors.name.message : null}</span>
+      <RichTextEditor
+        cancelUploadImage={fileService.cancelUpload}
+        uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+        deleteFile={fileService.deleteImage}
+        value={issue?.description_html}
+        debouncedUpdatesEnabled={false}
+        onChange={(description: Object, description_html: string) => {
+          debouncedIssueDescription(description_html);
+        }}
+        customClassName="mt-0"
+        mentionSuggestions={editorSuggestions.mentionSuggestions}
+        mentionHighlights={editorSuggestions.mentionHighlights}
+      />
+      <IssueReaction
+        issueReactions={issueReactions}
+        user={user}
+        issueReactionCreate={issueReactionCreate}
+        issueReactionRemove={issueReactionRemove}
+      />
+    </>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/properties.tsx b/web/components/issues/issue-peek-overview/properties.tsx
new file mode 100644
index 000000000..d808d351e
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/properties.tsx
@@ -0,0 +1,386 @@
+import { FC, useState } from "react";
+import { mutate } from "swr";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui icons
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+import { CalendarDays, ContrastIcon, Link2, Plus, Signal, Tag, Triangle, User2 } from "lucide-react";
+import {
+  SidebarAssigneeSelect,
+  SidebarCycleSelect,
+  SidebarEstimateSelect,
+  SidebarLabelSelect,
+  SidebarModuleSelect,
+  SidebarParentSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+} from "../sidebar-select";
+// hooks
+import useToast from "hooks/use-toast";
+
+// components
+import { CustomDatePicker } from "components/ui";
+import { LinkModal, LinksList } from "components/core";
+// types
+import { IIssue, IIssueLink, TIssuePriorities, linkDetails } from "types";
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+// services
+import { IssueService } from "services/issue";
+
+interface IPeekOverviewProperties {
+  issue: IIssue;
+  issueUpdate: (issue: Partial<IIssue>) => void;
+  disableUserActions: boolean;
+}
+
+const issueService = new IssueService();
+
+export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
+  const { issue, issueUpdate, disableUserActions } = props;
+  // states
+  const [linkModal, setLinkModal] = useState(false);
+  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
+
+  const { user: userStore, cycleIssue: cycleIssueStore, moduleIssue: moduleIssueStore } = useMobxStore();
+  const userRole = userStore.currentProjectRole;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleState = (_state: string) => {
+    issueUpdate({ ...issue, state: _state });
+  };
+  const handlePriority = (_priority: TIssuePriorities) => {
+    issueUpdate({ ...issue, priority: _priority });
+  };
+  const handleAssignee = (_assignees: string[]) => {
+    issueUpdate({ ...issue, assignees: _assignees });
+  };
+  const handleEstimate = (_estimate: number | null) => {
+    issueUpdate({ ...issue, estimate_point: _estimate });
+  };
+  const handleStartDate = (_startDate: string | null) => {
+    issueUpdate({ ...issue, start_date: _startDate });
+  };
+  const handleTargetDate = (_targetDate: string | null) => {
+    issueUpdate({ ...issue, target_date: _targetDate });
+  };
+  const handleParent = (_parent: string) => {
+    issueUpdate({ ...issue, parent: _parent });
+  };
+  const addIssueToCycle = async (cycleId: string) => {
+    if (!workspaceSlug || !issue || !cycleId) return;
+    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, [issue.id]);
+  };
+
+  const addIssueToModule = async (moduleId: string) => {
+    if (!workspaceSlug || !issue || !moduleId) return;
+
+    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, [issue.id]);
+  };
+  const handleLabels = (formData: Partial<IIssue>) => {
+    issueUpdate({ ...issue, ...formData });
+  };
+
+  const handleCreateLink = async (formData: IIssueLink) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await issueService
+      .createIssueLink(workspaceSlug as string, projectId as string, issue.id, payload)
+      .then(() => mutate(ISSUE_DETAILS(issue.id)))
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "This URL already exists for this issue.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+
+  const handleUpdateLink = async (formData: IIssueLink, linkId: string) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    const updatedLinks = issue.issue_link.map((l) =>
+      l.id === linkId
+        ? {
+            ...l,
+            title: formData.title,
+            url: formData.url,
+          }
+        : l
+    );
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issue.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issueService
+      .updateIssueLink(workspaceSlug as string, projectId as string, issue.id, linkId, payload)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issue.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleEditLink = (link: linkDetails) => {
+    setSelectedLinkToUpdate(link);
+    setLinkModal(true);
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const updatedLinks = issue.issue_link.filter((l) => l.id !== linkId);
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issue.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issueService
+      .deleteIssueLink(workspaceSlug as string, projectId as string, issue.id, linkId)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issue.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <>
+      <LinkModal
+        isOpen={linkModal}
+        handleClose={() => {
+          setLinkModal(false);
+          setSelectedLinkToUpdate(null);
+        }}
+        data={selectedLinkToUpdate}
+        status={selectedLinkToUpdate ? true : false}
+        createIssueLink={handleCreateLink}
+        updateIssueLink={handleUpdateLink}
+      />
+      <div className="flex flex-col">
+        <div className="flex flex-col gap-5 py-5 w-full">
+          {/* state */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+              <p>State</p>
+            </div>
+            <div>
+              <SidebarStateSelect value={issue?.state || ""} onChange={handleState} disabled={disableUserActions} />
+            </div>
+          </div>
+
+          {/* assignee */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+              <p>Assignees</p>
+            </div>
+            <div>
+              <SidebarAssigneeSelect
+                value={issue.assignees || []}
+                onChange={handleAssignee}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* priority */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <Signal className="h-4 w-4 flex-shrink-0" />
+              <p>Priority</p>
+            </div>
+            <div>
+              <SidebarPrioritySelect
+                value={issue.priority || ""}
+                onChange={handlePriority}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* estimate */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <Triangle className="h-4 w-4 flex-shrink-0 " />
+              <p>Estimate</p>
+            </div>
+            <div>
+              <SidebarEstimateSelect
+                value={issue.estimate_point}
+                onChange={handleEstimate}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* start date */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <CalendarDays className="h-4 w-4 flex-shrink-0" />
+              <p>Start date</p>
+            </div>
+            <div>
+              <CustomDatePicker
+                placeholder="Start date"
+                value={issue.start_date}
+                onChange={handleStartDate}
+                className="bg-custom-background-80 !rounded border-none !px-2.5 !py-0.5"
+                maxDate={maxDate ?? undefined}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* due date */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <CalendarDays className="h-4 w-4 flex-shrink-0" />
+              <p>Due date</p>
+            </div>
+            <div>
+              <CustomDatePicker
+                placeholder="Due date"
+                value={issue.target_date}
+                onChange={handleTargetDate}
+                className="bg-custom-background-80 !rounded border-none !px-2.5 !py-0.5"
+                minDate={minDate ?? undefined}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* parent */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <User2 className="h-4 w-4 flex-shrink-0" />
+              <p>Parent</p>
+            </div>
+            <div>
+              <SidebarParentSelect onChange={handleParent} issueDetails={issue} disabled={disableUserActions} />
+            </div>
+          </div>
+        </div>
+
+        <span className="border-t border-custom-border-200" />
+
+        <div className="flex flex-col gap-5 py-5 w-full">
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+              <p>Cycle</p>
+            </div>
+            <div>
+              <SidebarCycleSelect
+                issueDetail={issue}
+                handleCycleChange={addIssueToCycle}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <DiceIcon className="h-4 w-4 flex-shrink-0" />
+              <p>Module</p>
+            </div>
+            <div>
+              <SidebarModuleSelect
+                issueDetail={issue}
+                handleModuleChange={addIssueToModule}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+          <div className="flex items-start gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <Tag className="h-4 w-4 flex-shrink-0" />
+              <p>Label</p>
+            </div>
+            <div className="flex flex-col gap-3 w-full">
+              <SidebarLabelSelect
+                issueDetails={issue}
+                labelList={issue.labels}
+                submitChanges={handleLabels}
+                isNotAllowed={disableUserActions}
+                uneditable={disableUserActions}
+              />
+            </div>
+          </div>
+        </div>
+
+        <span className="border-t border-custom-border-200" />
+
+        <div className="flex flex-col gap-5 pt-5 w-full">
+          <div className="flex flex-col gap-2 w-full">
+            <div className="flex items-center gap-2 w-80">
+              <div className="flex items-center gap-2 w-40 text-sm">
+                <Link2 className="h-4 w-4 flex-shrink-0" />
+                <p>Links</p>
+              </div>
+              <div>
+                {!disableUserActions && (
+                  <button
+                    type="button"
+                    className={`flex ${
+                      disableUserActions ? "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 hover:text-custom-text-200 text-custom-text-300`}
+                    onClick={() => setLinkModal(true)}
+                    disabled={false}
+                  >
+                    <Plus className="h-3 w-3" /> New
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              {issue?.issue_link && issue.issue_link.length > 0 ? (
+                <LinksList
+                  links={issue.issue_link}
+                  handleDeleteLink={handleDeleteLink}
+                  handleEditLink={handleEditLink}
+                  userAuth={{
+                    isGuest: userRole === 5,
+                    isViewer: userRole === 10,
+                    isMember: userRole === 15,
+                    isOwner: userRole === 20,
+                  }}
+                />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/reactions/index.ts b/web/components/issues/issue-peek-overview/reactions/index.ts
new file mode 100644
index 000000000..a65262eb7
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/index.ts
@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./selector";
+export * from "./preview";
diff --git a/web/components/issues/issue-peek-overview/reactions/preview.tsx b/web/components/issues/issue-peek-overview/reactions/preview.tsx
new file mode 100644
index 000000000..46c1cc2ce
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/preview.tsx
@@ -0,0 +1,48 @@
+import { FC } from "react";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+interface IIssueReactionPreview {
+  issueReactions: any;
+  user: any;
+  handleReaction: (reaction: string) => void;
+}
+
+export const IssueReactionPreview: FC<IIssueReactionPreview> = (props) => {
+  const { issueReactions, user, handleReaction } = props;
+
+  const isUserReacted = (reactions: any) => {
+    const userReaction = reactions?.find((reaction: any) => reaction.actor === user?.id);
+    if (userReaction) return true;
+    return false;
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      {Object.keys(issueReactions || {}).map(
+        (reaction) =>
+          issueReactions[reaction]?.length > 0 && (
+            <button
+              type="button"
+              onClick={() => handleReaction(reaction)}
+              key={reaction}
+              className={`flex items-center gap-1.5 text-custom-text-100 text-sm h-full px-2 py-1 rounded ${
+                isUserReacted(issueReactions[reaction])
+                  ? `bg-custom-primary-100/10 hover:bg-custom-primary-100/30`
+                  : `bg-custom-background-90 hover:bg-custom-background-100/30`
+              }`}
+            >
+              <span className="text-sm">{renderEmoji(reaction)}</span>
+              <span
+                className={`${
+                  isUserReacted(issueReactions[reaction]) ? `text-custom-primary-100 hover:text-custom-primary-200` : ``
+                }`}
+              >
+                {issueReactions[reaction].length}
+              </span>
+            </button>
+          )
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/reactions/root.tsx b/web/components/issues/issue-peek-overview/reactions/root.tsx
new file mode 100644
index 000000000..efa2e488c
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/root.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+// components
+import { IssueReactionPreview, IssueReactionSelector } from "./";
+
+interface IIssueReaction {
+  issueReactions: any;
+  user: any;
+  issueReactionCreate: (reaction: string) => void;
+  issueReactionRemove: (reaction: string) => void;
+  position?: "top" | "bottom";
+}
+
+export const IssueReaction: FC<IIssueReaction> = (props) => {
+  const { issueReactions, user, issueReactionCreate, issueReactionRemove, position = "bottom" } = props;
+
+  const handleReaction = (reaction: string) => {
+    const isReactionAvailable =
+      issueReactions?.[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
+
+    if (isReactionAvailable) issueReactionRemove(reaction);
+    else issueReactionCreate(reaction);
+  };
+
+  return (
+    <div className="relative flex items-center flex-wrap gap-2">
+      <IssueReactionSelector onSelect={handleReaction} position={position} />
+      <IssueReactionPreview issueReactions={issueReactions} user={user} handleReaction={handleReaction} />
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/reactions/selector.tsx b/web/components/issues/issue-peek-overview/reactions/selector.tsx
new file mode 100644
index 000000000..b34f14871
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/selector.tsx
@@ -0,0 +1,69 @@
+import { FC, Fragment } from "react";
+import { Popover, Transition } from "@headlessui/react";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// icons
+import { SmilePlus } from "lucide-react";
+// constants
+import { issueReactionEmojis } from "constants/issue";
+
+interface IIssueReactionSelector {
+  size?: "sm" | "md" | "lg";
+  position?: "top" | "bottom";
+  onSelect: (reaction: any) => void;
+}
+
+export const IssueReactionSelector: FC<IIssueReactionSelector> = (props) => {
+  const { size = "md", position = "top", onSelect } = props;
+
+  return (
+    <>
+      <Popover className="relative">
+        {({ open, close: closePopover }) => (
+          <>
+            <Popover.Button
+              className={`${
+                open ? "" : "bg-custom-background-80"
+              } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none transition-all hover:bg-custom-background-90`}
+            >
+              <span className={`flex justify-center items-center rounded px-2 py-1.5`}>
+                <SmilePlus className={`${size === "sm" ? "w-3 h-3" : size === "md" ? "w-3.5 h-3.5" : "w-4 h-4"}`} />
+              </span>
+            </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={`bg-custom-sidebar-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded p-1 overflow-hidden absolute -left-2 z-10 ${
+                  position === "top" ? "-top-10" : "-bottom-10"
+                }`}
+              >
+                <div className="flex gap-x-1">
+                  {issueReactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        if (onSelect) onSelect(emoji);
+                        closePopover();
+                      }}
+                      className="select-none rounded text-sm p-1 hover:bg-custom-sidebar-background-80 transition-all w-6 h-6 flex justify-center items-center"
+                    >
+                      <div className="w-4 h-4">{renderEmoji(emoji)}</div>
+                    </button>
+                  ))}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/root.tsx b/web/components/issues/issue-peek-overview/root.tsx
new file mode 100644
index 000000000..6c8631b5b
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/root.tsx
@@ -0,0 +1,155 @@
+import { FC, Fragment, ReactNode } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueView } from "./view";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IIssue } from "types";
+import { RootStore } from "store/root";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+
+interface IIssuePeekOverview {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  handleIssue: (issue: Partial<IIssue>) => void;
+  isArchived?: boolean;
+  children?: ReactNode;
+}
+
+export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
+  const { workspaceSlug, projectId, issueId, handleIssue, children, isArchived = false } = props;
+
+  const router = useRouter();
+  const { peekIssueId } = router.query as { peekIssueId: string };
+
+  const {
+    user: userStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    archivedIssueDetail: archivedIssueDetailStore,
+    archivedIssues: archivedIssuesStore,
+    project: projectStore,
+  }: RootStore = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  useSWR(
+    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
+      ? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
+      : null,
+    async () => {
+      if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
+        if (isArchived) await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
+        else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
+      }
+    }
+  );
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(
+      `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${peekIssueId}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
+    });
+  };
+
+  const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
+  const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;
+
+  const issueUpdate = (_data: Partial<IIssue>) => {
+    if (handleIssue) {
+      handleIssue(_data);
+      issueDetailStore.updateIssue(workspaceSlug, projectId, issueId, _data);
+    }
+  };
+
+  const issueReactionCreate = (reaction: string) =>
+    issueDetailStore.createIssueReaction(workspaceSlug, projectId, issueId, reaction);
+
+  const issueReactionRemove = (reaction: string) =>
+    issueDetailStore.removeIssueReaction(workspaceSlug, projectId, issueId, reaction);
+
+  const issueCommentCreate = (comment: any) =>
+    issueDetailStore.createIssueComment(workspaceSlug, projectId, issueId, comment);
+
+  const issueCommentUpdate = (comment: any) =>
+    issueDetailStore.updateIssueComment(workspaceSlug, projectId, issueId, comment?.id, comment);
+
+  const issueCommentRemove = (commentId: string) =>
+    issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
+
+  const issueCommentReactionCreate = (commentId: string, reaction: string) =>
+    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
+
+  const issueCommentReactionRemove = (commentId: string, reaction: string) =>
+    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
+
+  const issueSubscriptionCreate = () => issueDetailStore.createIssueSubscription(workspaceSlug, projectId, issueId);
+
+  const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);
+
+  const handleDeleteIssue = async () => {
+    if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
+    else await issueStore.deleteIssue(workspaceSlug, projectId, issue!);
+    const { query } = router;
+    if (query.peekIssueId) {
+      issueDetailStore.setPeekId(null);
+      delete query.peekIssueId;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    }
+  };
+
+  const userRole = userStore.currentProjectRole ?? 5;
+
+  return (
+    <Fragment>
+      <IssueView
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        issue={issue}
+        isLoading={isLoading}
+        isArchived={isArchived}
+        handleCopyText={handleCopyText}
+        redirectToIssueDetail={redirectToIssueDetail}
+        issueUpdate={issueUpdate}
+        issueReactionCreate={issueReactionCreate}
+        issueReactionRemove={issueReactionRemove}
+        issueCommentCreate={issueCommentCreate}
+        issueCommentUpdate={issueCommentUpdate}
+        issueCommentRemove={issueCommentRemove}
+        issueCommentReactionCreate={issueCommentReactionCreate}
+        issueCommentReactionRemove={issueCommentReactionRemove}
+        issueSubscriptionCreate={issueSubscriptionCreate}
+        issueSubscriptionRemove={issueSubscriptionRemove}
+        handleDeleteIssue={handleDeleteIssue}
+        disableUserActions={[5, 10].includes(userRole)}
+        showCommentAccessSpecifier={projectStore.currentProjectDetails?.is_deployed}
+      >
+        {children}
+      </IssueView>
+    </Fragment>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
new file mode 100644
index 000000000..8afc7e600
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -0,0 +1,337 @@
+import { FC, ReactNode, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
+// components
+import { PeekOverviewIssueDetails } from "./issue-detail";
+import { PeekOverviewProperties } from "./properties";
+import { IssueComment } from "./activity";
+import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
+import { DeleteIssueModal } from "../delete-issue-modal";
+import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
+// types
+import { IIssue } from "types";
+import { RootStore } from "store/root";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+
+interface IIssueView {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issue: IIssue | null;
+  isLoading?: boolean;
+  isArchived?: boolean;
+  handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  redirectToIssueDetail: () => void;
+  issueUpdate: (issue: Partial<IIssue>) => void;
+  issueReactionCreate: (reaction: string) => void;
+  issueReactionRemove: (reaction: string) => void;
+  issueCommentCreate: (comment: any) => void;
+  issueCommentUpdate: (comment: any) => void;
+  issueCommentRemove: (commentId: string) => void;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+  issueSubscriptionCreate: () => void;
+  issueSubscriptionRemove: () => void;
+  handleDeleteIssue: () => Promise<void>;
+  children: ReactNode;
+  disableUserActions?: boolean;
+  showCommentAccessSpecifier?: boolean;
+}
+
+type TPeekModes = "side-peek" | "modal" | "full-screen";
+
+const peekOptions: { key: TPeekModes; icon: any; title: string }[] = [
+  {
+    key: "side-peek",
+    icon: SidePanelIcon,
+    title: "Side Peek",
+  },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    title: "Modal",
+  },
+  {
+    key: "full-screen",
+    icon: FullScreenPanelIcon,
+    title: "Full Screen",
+  },
+];
+
+export const IssueView: FC<IIssueView> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    issue,
+    isLoading,
+    isArchived,
+    handleCopyText,
+    redirectToIssueDetail,
+    issueUpdate,
+    issueReactionCreate,
+    issueReactionRemove,
+    issueCommentCreate,
+    issueCommentUpdate,
+    issueCommentRemove,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+    issueSubscriptionCreate,
+    issueSubscriptionRemove,
+    handleDeleteIssue,
+    children,
+    disableUserActions = false,
+    showCommentAccessSpecifier = false,
+  } = props;
+
+  const router = useRouter();
+  const { peekIssueId } = router.query as { peekIssueId: string };
+
+  const { user: userStore, issueDetail: issueDetailStore }: RootStore = useMobxStore();
+
+  const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const updateRoutePeekId = () => {
+    if (issueId != peekIssueId) {
+      issueDetailStore.setPeekId(issueId);
+      const { query } = router;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issueId },
+      });
+    }
+  };
+  const removeRoutePeekId = () => {
+    const { query } = router;
+    if (query.peekIssueId) {
+      issueDetailStore.setPeekId(null);
+      delete query.peekIssueId;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    }
+  };
+
+  useSWR(
+    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
+      ? `ISSUE_PEEK_OVERVIEW_SUBSCRIPTION_${workspaceSlug}_${projectId}_${peekIssueId}`
+      : null,
+    async () => {
+      if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
+        await issueDetailStore.fetchIssueSubscription(workspaceSlug, projectId, issueId);
+      }
+    }
+  );
+
+  const issueReactions = issueDetailStore.getIssueReactions || [];
+  const issueComments = issueDetailStore.getIssueComments || [];
+  const issueSubscription = issueDetailStore.getIssueSubscription || [];
+
+  const user = userStore?.currentUser;
+
+  const currentMode = peekOptions.find((m) => m.key === peekMode);
+
+  return (
+    <>
+      {issue && !isArchived && (
+        <DeleteIssueModal
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          data={issue}
+          onSubmit={handleDeleteIssue}
+        />
+      )}
+      {issue && isArchived && (
+        <DeleteArchivedIssueModal
+          data={issue}
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          onSubmit={handleDeleteIssue}
+        />
+      )}
+      <div className="w-full truncate !text-base">
+        {children && (
+          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
+            {children}
+          </div>
+        )}
+
+        {issueId === peekIssueId && (
+          <div
+            className={`fixed z-20 overflow-hidden bg-custom-background-100 flex flex-col transition-all duration-300 border border-custom-border-200 rounded 
+          ${peekMode === "side-peek" ? `w-full md:w-[50%] top-0 right-0 bottom-0` : ``}
+          ${peekMode === "modal" ? `top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] w-5/6 h-5/6` : ``}
+          ${peekMode === "full-screen" ? `top-0 right-0 bottom-0 left-0 m-4` : ``}
+          `}
+            style={{
+              boxShadow:
+                "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)",
+            }}
+          >
+            {/* header */}
+            <div
+              className={`relative flex items-center justify-between p-4 ${
+                currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
+              }`}
+            >
+              <div className="flex items-center gap-4">
+                <button onClick={removeRoutePeekId}>
+                  <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                </button>
+
+                <button onClick={redirectToIssueDetail}>
+                  <MoveDiagonal className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                </button>
+                {currentMode && (
+                  <div className="flex-shrink-0 flex items-center gap-2">
+                    <CustomSelect
+                      value={currentMode}
+                      onChange={(val: any) => setPeekMode(val)}
+                      customButton={
+                        <button type="button" className="">
+                          <currentMode.icon className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                        </button>
+                      }
+                    >
+                      {peekOptions.map((mode) => (
+                        <CustomSelect.Option key={mode.key} value={mode.key}>
+                          <div
+                            className={`flex items-center gap-1.5 ${
+                              currentMode.key === mode.key
+                                ? "text-custom-text-200"
+                                : "text-custom-text-400 hover:text-custom-text-200"
+                            }`}
+                          >
+                            <mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 `} />
+                            {mode.title}
+                          </div>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-4">
+                {issue?.created_by !== user?.id &&
+                  !issue?.assignees.includes(user?.id ?? "") &&
+                  !router.pathname.includes("[archivedIssueId]") && (
+                    <Button
+                      size="sm"
+                      prependIcon={<Bell className="h-3 w-3" />}
+                      variant="outline-primary"
+                      onClick={() =>
+                        issueSubscription && issueSubscription.subscribed
+                          ? issueSubscriptionRemove()
+                          : issueSubscriptionCreate()
+                      }
+                    >
+                      {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
+                    </Button>
+                  )}
+                <button onClick={handleCopyText}>
+                  <Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
+                </button>
+                {!disableUserActions && (
+                  <button onClick={() => setDeleteIssueModal(true)}>
+                    <Trash2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* content */}
+            <div className="relative w-full h-full overflow-hidden overflow-y-auto">
+              {isArchived && (
+                <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
+              )}
+              {isLoading && !issue ? (
+                <div className="h-full w-full flex items-center justify-center">
+                  <Spinner />
+                </div>
+              ) : (
+                issue && (
+                  <>
+                    {["side-peek", "modal"].includes(peekMode) ? (
+                      <div className="flex flex-col gap-3 py-5 px-8">
+                        <PeekOverviewIssueDetails
+                          workspaceSlug={workspaceSlug}
+                          issue={issue}
+                          issueUpdate={issueUpdate}
+                          issueReactions={issueReactions}
+                          user={user}
+                          issueReactionCreate={issueReactionCreate}
+                          issueReactionRemove={issueReactionRemove}
+                        />
+
+                        <PeekOverviewProperties
+                          issue={issue}
+                          issueUpdate={issueUpdate}
+                          disableUserActions={disableUserActions}
+                        />
+
+                        <IssueComment
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
+                          user={user}
+                          issueComments={issueComments}
+                          issueCommentCreate={issueCommentCreate}
+                          issueCommentUpdate={issueCommentUpdate}
+                          issueCommentRemove={issueCommentRemove}
+                          issueCommentReactionCreate={issueCommentReactionCreate}
+                          issueCommentReactionRemove={issueCommentReactionRemove}
+                          showCommentAccessSpecifier={showCommentAccessSpecifier}
+                        />
+                      </div>
+                    ) : (
+                      <div className="w-full h-full flex">
+                        <div className="w-full h-full space-y-6 p-4 py-5">
+                          <PeekOverviewIssueDetails
+                            workspaceSlug={workspaceSlug}
+                            issue={issue}
+                            issueReactions={issueReactions}
+                            issueUpdate={issueUpdate}
+                            user={user}
+                            issueReactionCreate={issueReactionCreate}
+                            issueReactionRemove={issueReactionRemove}
+                          />
+
+                          <IssueComment
+                            workspaceSlug={workspaceSlug}
+                            projectId={projectId}
+                            issueId={issueId}
+                            user={user}
+                            issueComments={issueComments}
+                            issueCommentCreate={issueCommentCreate}
+                            issueCommentUpdate={issueCommentUpdate}
+                            issueCommentRemove={issueCommentRemove}
+                            issueCommentReactionCreate={issueCommentReactionCreate}
+                            issueCommentReactionRemove={issueCommentReactionRemove}
+                            showCommentAccessSpecifier={showCommentAccessSpecifier}
+                          />
+                        </div>
+                        <div className="flex-shrink-0 !w-[400px] h-full border-l border-custom-border-200 p-4 py-5">
+                          <PeekOverviewProperties
+                            issue={issue}
+                            issueUpdate={issueUpdate}
+                            disableUserActions={disableUserActions}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-reaction.tsx b/web/components/issues/issue-reaction.tsx
index 06c05c85d..2c0f0b3ff 100644
--- a/web/components/issues/issue-reaction.tsx
+++ b/web/components/issues/issue-reaction.tsx
@@ -18,8 +18,11 @@ export const IssueReaction: React.FC<Props> = (props) => {
 
   const { user } = useUserAuth();
 
-  const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } =
-    useIssueReaction(workspaceSlug, projectId, issueId);
+  const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
+    workspaceSlug,
+    projectId,
+    issueId
+  );
 
   const handleReactionClick = (reaction: string) => {
     if (!workspaceSlug || !projectId || !issueId) return;
@@ -38,9 +41,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
       <ReactionSelector
         size="md"
         position="top"
-        value={
-          reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []
-        }
+        value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []}
         onSelect={handleReactionClick}
       />
 
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 c4c9a780a..ce1c820f5 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -1,16 +1,13 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import useSWR, { mutate } from "swr";
-
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
-import useProjectDetails from "hooks/use-project-details";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
 // components
 import {
   AddComment,
@@ -22,10 +19,9 @@ import {
 } from "components/issues";
 import { SubIssuesRoot } from "./sub-issues";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, LayersIcon } from "@plane/ui";
 // icons
-import { LayerDiagonalIcon } from "components/icons";
-import { MinusCircleIcon } from "@heroicons/react/24/outline";
+import { MinusCircle } from "lucide-react";
 // types
 import { IIssue, IIssueComment } from "types";
 // fetch-keys
@@ -37,30 +33,27 @@ 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> = observer((props) => {
+  const { issueDetails, submitChanges, uneditable = false } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { user } = useUserAuth();
-  const { memberRole } = useProjectMyMembership();
-
-  const { projectDetails } = useProjectDetails();
+  const { user: userStore, project: projectStore } = useMobxStore();
+  const user = userStore.currentUser ?? undefined;
+  const userRole = userStore.currentProjectRole;
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined;
 
   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,57 +61,33 @@ 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());
   };
 
   const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
+    if (!workspaceSlug || !projectId || !issueId || !user) return;
 
     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;
+    if (!workspaceSlug || !issueDetails || !user) 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 +117,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">
@@ -158,7 +126,7 @@ export const IssueMainContent: React.FC<Props> = ({
               </a>
             </Link>
 
-            <CustomMenu position="left" ellipsis optionsClassName="px-1.5">
+            <CustomMenu ellipsis optionsClassName="px-1.5">
               {siblingIssuesList ? (
                 siblingIssuesList.length > 0 ? (
                   <>
@@ -168,13 +136,12 @@ export const IssueMainContent: React.FC<Props> = ({
                     {siblingIssuesList.map((issue) => (
                       <CustomMenu.MenuItem
                         key={issue.id}
-                        renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
-                          issue.id
-                        }`}
+                        onClick={() =>
+                          router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
+                        }
                         className="flex items-center gap-2 py-2"
                       >
-                        <LayerDiagonalIcon className="h-4 w-4" />
+                        <LayersIcon className="h-4 w-4" />
                         {issueDetails.project_detail.identifier}-{issue.sequence_id}
                       </CustomMenu.MenuItem>
                     ))}
@@ -186,11 +153,10 @@ export const IssueMainContent: React.FC<Props> = ({
                 )
               ) : null}
               <CustomMenu.MenuItem
-                renderAs="button"
                 onClick={() => submitChanges({ parent: null })}
                 className="flex items-center gap-2 text-red-500 py-2"
               >
-                <MinusCircleIcon className="h-4 w-4" />
+                <MinusCircle className="h-4 w-4" />
                 <span> Remove Parent Issue</span>
               </CustomMenu.MenuItem>
             </CustomMenu>
@@ -200,7 +166,7 @@ export const IssueMainContent: React.FC<Props> = ({
           workspaceSlug={workspaceSlug as string}
           issue={issueDetails}
           handleFormSubmit={submitChanges}
-          isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable}
+          isAllowed={userRole === 20 || userRole === 15 || !uneditable}
         />
 
         <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
@@ -232,4 +198,4 @@ export const IssueMainContent: React.FC<Props> = ({
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index cf6f811f6..b1e8d1bd8 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -1,53 +1,26 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import modulesService from "services/modules.service";
-import issuesService from "services/issues.service";
-import inboxServices from "services/inbox.service";
+import { IssueDraftService } from "services/issue";
 // 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
 import type { IIssue } from "types";
 // fetch-keys
-import {
-  PROJECT_ISSUES_DETAILS,
-  USER_ISSUE,
-  SUB_ISSUES,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-  VIEW_ISSUES,
-  INBOX_ISSUES,
-  PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-  WORKSPACE_VIEW_ISSUES,
-} from "constants/fetch-keys";
-// constants
-import { INBOX_ISSUE_SOURCE } from "constants/inbox";
+import { USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
 
 export interface IssuesModalProps {
   data?: IIssue | null;
   handleClose: () => void;
   isOpen: boolean;
-  isUpdatingSingleIssue?: boolean;
   prePopulateData?: Partial<IIssue>;
   fieldsToShow?: (
     | "project"
@@ -62,19 +35,17 @@ export interface IssuesModalProps {
     | "estimate"
     | "parent"
     | "all"
+    | "module"
+    | "cycle"
   )[];
   onSubmit?: (data: Partial<IIssue>) => Promise<void>;
 }
 
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
-  data,
-  handleClose,
-  isOpen,
-  isUpdatingSingleIssue = false,
-  prePopulateData: prePopulateDataProps,
-  fieldsToShow = ["all"],
-  onSubmit,
-}) => {
+const issueDraftService = new IssueDraftService();
+
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const { data, handleClose, isOpen, prePopulateData: prePopulateDataProps, fieldsToShow = ["all"], onSubmit } = props;
+
   // states
   const [createMore, setCreateMore] = useState(false);
   const [formDirtyState, setFormDirtyState] = useState<any>(null);
@@ -83,24 +54,25 @@ 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 } = router.query;
 
-  const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
-  const { ...viewGanttParams } = params;
-  const { params: inboxParams } = useInboxView();
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    cycleIssue: cycleIssueStore,
+    moduleIssue: moduleIssueStore,
+    user: userStore,
+  } = useMobxStore();
 
-  const { user } = useUser();
-  const { projects } = useProjects();
+  const user = userStore.currentUser;
 
-  const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
-  const { params: globalViewParams } = useWorkspaceView();
-
-  const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } =
-    useLocalStorage<any>("draftedIssue", {});
+  const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
+    "draftedIssue",
+    {}
+  );
 
   const { setToastAlert } = useToast();
 
@@ -199,78 +171,33 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const addIssueToCycle = async (issueId: string, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await issuesService
-      .addIssueToCycle(
-        workspaceSlug as string,
-        activeProject ?? "",
-        cycleId,
-        {
-          issues: [issueId],
-        },
-        user
-      )
-      .then(() => {
-        if (cycleId) {
-          mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
-          mutate(CYCLE_DETAILS(cycleId as string));
-        }
-      });
+    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
   };
 
   const addIssueToModule = async (issueId: string, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await modulesService
-      .addIssuesToModule(
-        workspaceSlug as string,
-        activeProject ?? "",
-        moduleId as string,
-        {
-          issues: [issueId],
-        },
-        user
-      )
-      .then(() => {
-        if (moduleId) {
-          mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-          mutate(MODULE_DETAILS(moduleId as string));
-        }
-      });
+    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
   };
 
-  const addIssueToInbox = async (formData: Partial<IIssue>) => {
-    if (!workspaceSlug || !activeProject || !inboxId) return;
+  const createIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject) return;
 
-    const payload = {
-      issue: {
-        name: formData.name,
-        description: formData.description,
-        description_html: formData.description_html,
-        priority: formData.priority,
-      },
-      source: INBOX_ISSUE_SOURCE,
-    };
+    await issueDetailStore
+      .createIssue(workspaceSlug.toString(), activeProject, payload)
+      .then(async (res) => {
+        issueStore.fetchIssues(workspaceSlug.toString(), activeProject);
+
+        if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
 
-    await inboxServices
-      .createInboxIssue(
-        workspaceSlug.toString(),
-        activeProject.toString(),
-        inboxId.toString(),
-        payload,
-        user
-      )
-      .then((res) => {
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "Issue created successfully.",
         });
 
-        router.push(
-          `/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`
-        );
-
-        mutate(INBOX_ISSUES(inboxId.toString(), inboxParams));
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
       })
       .catch(() => {
         setToastAlert({
@@ -279,114 +206,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           message: "Issue could not be created. Please try again.",
         });
       });
-  };
-
-  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 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
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), viewGanttParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "");
-
-  const createIssue = async (payload: Partial<IIssue>) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    if (inboxId) await addIssueToInbox(payload);
-    else
-      await issuesService
-        .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({
-            type: "success",
-            title: "Success!",
-            message: "Issue created successfully.",
-          });
-
-          if (payload.assignees_list?.some((assignee) => assignee === user?.id))
-            mutate(USER_ISSUE(workspaceSlug as string));
-
-          if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
-
-          if (globalViewId)
-            mutate(WORKSPACE_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
-
-          if (currentWorkspaceIssuePath)
-            mutate(
-              WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
-            );
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Issue could not be created. Please try again.",
-          });
-        });
 
     if (!createMore) onFormSubmitClose();
   };
@@ -398,12 +217,9 @@ 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();
-
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -415,8 +231,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         setFormDirtyState(null);
         setShowConfirmDiscard(false);
 
-        if (payload.assignees_list?.some((assignee) => assignee === user?.id))
-          mutate(USER_ISSUE(workspaceSlug as string));
+        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
 
         if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
       })
@@ -430,23 +245,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   };
 
   const updateIssue = async (payload: Partial<IIssue>) => {
-    if (!user) return;
-
-    await issuesService
-      .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));
-        }
-
-        if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
-        if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+    if (!workspaceSlug || !activeProject || !data) return;
 
+    await issueDetailStore
+      .updateIssue(workspaceSlug.toString(), activeProject, data.id, payload)
+      .then(() => {
         if (!createMore) onFormSubmitClose();
 
         setToastAlert({
@@ -469,8 +272,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
     const payload: Partial<IIssue> = {
       ...formData,
-      assignees_list: formData.assignees ?? [],
-      labels_list: formData.labels ?? [],
       description: formData.description ?? "",
       description_html: formData.description_html ?? "<p></p>",
     };
@@ -509,7 +310,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -523,7 +324,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
                 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 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full mx-4 sm:max-w-4xl">
                   <IssueForm
                     handleFormSubmit={handleFormSubmit}
                     initialData={data ?? prePopulateData}
@@ -533,7 +334,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
                     projectId={activeProject ?? ""}
                     setActiveProject={setActiveProject}
                     status={data ? true : false}
-                    user={user}
                     fieldsToShow={fieldsToShow}
                     handleFormDirty={handleFormDirty}
                   />
@@ -545,4 +345,4 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       </Transition.Root>
     </>
   );
-};
+});
diff --git a/web/components/issues/my-issues/index.ts b/web/components/issues/my-issues/index.ts
deleted file mode 100644
index 65a063f4c..000000000
--- a/web/components/issues/my-issues/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./my-issues-select-filters";
-export * from "./my-issues-view-options";
-export * from "./my-issues-view";
diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx
deleted file mode 100644
index ce8e03797..000000000
--- a/web/components/issues/my-issues/my-issues-select-filters.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// components
-import { DateFilterModal } from "components/core";
-// ui
-import { MultiLevelDropdown } from "components/ui";
-// icons
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// helpers
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { IIssueFilterOptions, IQuery, 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<IIssueFilterOptions> | IQuery;
-  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 [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
-  const [dateFilterType, setDateFilterType] = useState<{
-    title: string;
-    type: "start_date" | "target_date";
-  }>({
-    title: "",
-    type: "start_date",
-  });
-  const [fetchLabels, setFetchLabels] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: labels } = useSWR(
-    workspaceSlug && fetchLabels ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug && fetchLabels
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
-  );
-
-  return (
-    <>
-      {isDateFilterModalOpen && (
-        <DateFilterModal
-          title={dateFilterType.title}
-          field={dateFilterType.type}
-          filters={filters as IIssueFilterOptions}
-          handleClose={() => setIsDateFilterModalOpen(false)}
-          isOpen={isDateFilterModalOpen}
-          onSelect={onSelect}
-        />
-      )}
-      <MultiLevelDropdown
-        label="Filters"
-        onSelect={onSelect}
-        direction={direction}
-        height={height}
-        options={[
-          {
-            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: "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?.includes(key),
-              })),
-            ],
-          },
-          {
-            id: "labels",
-            label: "Labels",
-            onClick: () => setFetchLabels(true),
-            value: labels,
-            hasChildren: true,
-            children: labels?.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: "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>
-                ),
-              },
-            ],
-          },
-        ]}
-      />
-    </>
-  );
-};
diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx
deleted file mode 100644
index 69cfa1909..000000000
--- a/web/components/issues/my-issues/my-issues-view-options.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// hooks
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-// components
-import { MyIssuesSelectFilters } from "components/issues";
-// 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 MyIssuesViewOptions: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(
-    workspaceSlug?.toString()
-  );
-
-  const workspaceViewPathName = ["workspace-views/all-issues"];
-
-  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) =>
-    router.pathname.includes(pathname)
-  );
-
-  const showFilters = isWorkspaceViewPath || globalViewId;
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x-1">
-        {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 ${
-                displayFilters?.layout === option.type
-                  ? "bg-custom-sidebar-background-100 shadow-sm"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => {
-                setDisplayFilters({ layout: option.type });
-                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 && (
-        <MyIssuesSelectFilters
-          filters={filters}
-          onSelect={(option) => {
-            const key = option.key as keyof typeof filters;
-
-            if (key === "start_date" || key === "target_date") {
-              const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
-
-              setFilters({
-                [key]: valueExists ? null : option.value,
-              });
-            } else {
-              const valueExists = filters[key]?.includes(option.value);
-
-              if (valueExists)
-                setFilters({
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                    (val) => val !== option.value
-                  ),
-                });
-              else
-                setFilters({
-                  [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-                });
-            }
-          }}
-          direction="left"
-          height="rg"
-        />
-      )}
-    </div>
-  );
-};
diff --git a/web/components/issues/my-issues/my-issues-view.tsx b/web/components/issues/my-issues/my-issues-view.tsx
deleted file mode 100644
index ced16b321..000000000
--- a/web/components/issues/my-issues/my-issues-view.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-import { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DropResult } from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-// 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 { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
-// fetch-keys
-import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
-import { PlusIcon } from "@heroicons/react/24/outline";
-
-type Props = {
-  openIssuesListModal?: () => void;
-  disableUserActions?: false;
-};
-
-export const MyIssuesView: React.FC<Props> = ({
-  openIssuesListModal,
-  disableUserActions = false,
-}) => {
-  // 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);
-
-  // trash box
-  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 { data: labels } = useSWR(
-    workspaceSlug && (filters?.labels ?? []).length > 0
-      ? WORKSPACE_LABELS(workspaceSlug.toString())
-      : null,
-    workspaceSlug && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleOnDragEnd = useCallback(
-    async (result: DropResult) => {
-      setTrashBox(false);
-
-      if (
-        !result.destination ||
-        !workspaceSlug ||
-        !groupedIssues ||
-        displayFilters?.group_by !== "priority"
-      )
-        return;
-
-      const { source, destination } = result;
-
-      if (source.droppableId === destination.droppableId) return;
-
-      const draggedItem = groupedIssues[source.droppableId][source.index];
-
-      if (!draggedItem) return;
-
-      if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem);
-      else {
-        const sourceGroup = source.droppableId;
-        const destinationGroup = destination.droppableId;
-
-        draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
-
-        mutate<{
-          [key: string]: IIssue[];
-        }>(
-          USER_ISSUES(workspaceSlug.toString(), params),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            const sourceGroupArray = [...groupedIssues[sourceGroup]];
-            const destinationGroupArray = [...groupedIssues[destinationGroup]];
-
-            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
-        );
-
-        // 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);
-
-      let preloadedValue: string | string[] = 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]
-  );
-
-  const addIssueToDate = useCallback(
-    (date: string) => {
-      setCreateIssueModal(true);
-      setPreloadedData({
-        target_date: date,
-        actionType: "createIssue",
-      });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  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 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 };
-
-  const nullFilters = Object.keys(filtersToDisplay).filter(
-    (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null
-  );
-  const areFiltersApplied =
-    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 disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues;
-
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateMyIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateMyIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateMyIssues();
-        }}
-      />
-      {areFiltersApplied && (
-        <>
-          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-            <FiltersList
-              filters={filtersToDisplay}
-              setFilters={setFilters}
-              labels={labels}
-              members={undefined}
-              states={undefined}
-              clearAllFilters={() =>
-                setFilters({
-                  labels: null,
-                  priority: null,
-                  state_group: null,
-                  start_date: null,
-                  target_date: null,
-                })
-              }
-            />
-          </div>
-          {<div className="mt-3 border-t border-custom-border-200" />}
-        </>
-      )}
-      <AllViews
-        addIssueToDate={addIssueToDate}
-        addIssueToGroup={addIssueToGroup}
-        disableUserActions={disableUserActions}
-        dragDisabled={displayFilters?.group_by !== "priority"}
-        emptyState={{
-          title: filters.assignees
-            ? "You don't have any issue assigned to you yet"
-            : filters.created_by
-            ? "You have not created any issue yet."
-            : "You have not subscribed to any issue yet.",
-          description: "Keep track of your work in a single place.",
-          primaryButton: filters.subscriber
-            ? undefined
-            : {
-                icon: <PlusIcon className="h-4 w-4" />,
-                text: "New Issue",
-                onClick: () => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "c",
-                  });
-                  document.dispatchEvent(e);
-                },
-              },
-        }}
-        handleOnDragEnd={handleOnDragEnd}
-        handleIssueAction={handleIssueAction}
-        openIssuesListModal={openIssuesListModal ? openIssuesListModal : null}
-        removeIssue={null}
-        disableAddIssueOption={disableAddIssueOption}
-        trashBox={trashBox}
-        setTrashBox={setTrashBox}
-        viewProps={{
-          displayFilters,
-          groupedIssues,
-          isEmpty,
-          mutateIssues: mutateMyIssues,
-          params,
-          properties,
-        }}
-      />
-    </>
-  );
-};
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index a29fa6521..0d1b1f9d4 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -5,16 +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 { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { LaunchOutlined } from "@mui/icons-material";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Rocket, Search } from "lucide-react";
 // types
 import { ISearchIssueResponse } from "types";
 
@@ -27,6 +24,9 @@ type Props = {
   issueId?: string;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const ParentIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
@@ -69,12 +69,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}
@@ -85,7 +80,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -98,7 +93,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <Combobox
                   value={value}
                   onChange={(val) => {
@@ -107,7 +102,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -154,21 +149,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">
+                        <LayersIcon 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">
@@ -208,11 +197,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                               rel="noopener noreferrer"
                               onClick={(e) => e.stopPropagation()}
                             >
-                              <LaunchOutlined
-                                sx={{
-                                  fontSize: 16,
-                                }}
-                              />
+                              <Rocket className="h-4 w-4" />
                             </a>
                           </Combobox.Option>
                         ))}
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/header.tsx b/web/components/issues/peek-overview/header.tsx
index 266b2edb8..55586ddf8 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -3,9 +3,9 @@ import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Icon } from "components/ui";
+import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
 // icons
-import { East, OpenInFull } from "@mui/icons-material";
+import { LinkIcon, MoveDiagonal, MoveRight, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -23,18 +23,18 @@ type Props = {
 
 const peekModes: {
   key: TPeekOverviewModes;
-  icon: string;
+  icon: any;
   label: string;
 }[] = [
-  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  { key: "side", icon: SidePanelIcon, label: "Side Peek" },
   {
     key: "modal",
-    icon: "dialogs",
+    icon: CenterPanelIcon,
     label: "Modal Peek",
   },
   {
     key: "full",
-    icon: "nearby",
+    icon: FullScreenPanelIcon,
     label: "Full Screen Peek",
   },
 ];
@@ -61,49 +61,34 @@ export const PeekOverviewHeader: React.FC<Props> = ({
     });
   };
 
+  const currentMode = peekModes.find((m) => m.key === mode);
+
   return (
     <div className="flex justify-between items-center">
       <div className="flex items-center gap-4">
         {mode === "side" && (
           <button type="button" onClick={handleClose}>
-            <East
-              sx={{
-                fontSize: "14px",
-              }}
-            />
+            <MoveRight className="h-3.5 w-3.5" />
           </button>
         )}
         <Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
           <a>
-            <OpenInFull
-              sx={{
-                fontSize: "14px",
-              }}
-            />
+            <MoveDiagonal className="h-3.5 w-3.5" />
           </a>
         </Link>
         <CustomSelect
           value={mode}
           onChange={(val: TPeekOverviewModes) => setMode(val)}
           customButton={
-            <button
-              type="button"
-              className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
-            >
-              <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
+            <button type="button" className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}>
+              {currentMode && <currentMode.icon className="h-3.5 w-3.5" />}
             </button>
           }
-          position="left"
         >
           {peekModes.map((mode) => (
             <CustomSelect.Option key={mode.key} value={mode.key}>
               <div className="flex items-center gap-1.5">
-                <Icon
-                  iconName={mode.icon}
-                  className={`!text-base flex-shrink-0 -my-1 ${
-                    mode.key === "full" ? "rotate-45" : ""
-                  }`}
-                />
+                <mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`} />
                 {mode.label}
               </div>
             </CustomSelect.Option>
@@ -113,10 +98,10 @@ export const PeekOverviewHeader: React.FC<Props> = ({
       {(mode === "side" || mode === "modal") && (
         <div className="flex items-center gap-2 flex-shrink-0">
           <button type="button" onClick={handleCopyLink} className="-rotate-45">
-            <Icon iconName="link" />
+            <LinkIcon className="h-3.5 w-3.5" />
           </button>
           <button type="button" onClick={handleDeleteIssue}>
-            <Icon iconName="delete" />
+            <Trash2 className="h-3.5 w-3.5" />
           </button>
         </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-details.tsx b/web/components/issues/peek-overview/issue-details.tsx
index 5b9db8dbd..33af1532b 100644
--- a/web/components/issues/peek-overview/issue-details.tsx
+++ b/web/components/issues/peek-overview/issue-details.tsx
@@ -10,12 +10,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const PeekOverviewIssueDetails: React.FC<Props> = ({
-  handleUpdateIssue,
-  issue,
-  readOnly,
-  workspaceSlug,
-}) => (
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ handleUpdateIssue, issue, readOnly, workspaceSlug }) => (
   <div className="space-y-2">
     <h6 className="font-medium text-custom-text-200">
       {issue.project_detail.identifier}-{issue.sequence_id}
@@ -26,6 +21,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({
       issue={{
         name: issue.name,
         description_html: issue.description_html,
+        project_id: issue.project_detail.id,
       }}
       workspaceSlug={workspaceSlug}
     />
diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx
index d001634fc..6bb267a6c 100644
--- a/web/components/issues/peek-overview/issue-properties.tsx
+++ b/web/components/issues/peek-overview/issue-properties.tsx
@@ -1,25 +1,22 @@
-// mobx
-import { observer } from "mobx-react-lite";
-// headless ui
-import { Disclosure } from "@headlessui/react";
-import { StateGroupIcon } from "components/icons";
+import { FC } from "react";
+// components
+import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
 // components
 import {
   SidebarAssigneeSelect,
-  SidebarEstimateSelect,
   SidebarPrioritySelect,
   SidebarStateSelect,
   TPeekOverviewModes,
 } from "components/issues";
 // ui
-import { CustomDatePicker, Icon } from "components/ui";
+import { CustomDatePicker } from "components/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { IIssue, TIssuePriorities } from "types";
+import { IIssue } from "types";
+import { CalendarDays, LinkIcon, Signal, Trash2 } from "lucide-react";
 
 type Props = {
   handleDeleteIssue: () => void;
@@ -30,14 +27,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,18 +58,15 @@ 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">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
+              <LinkIcon className="h-3.5 w-3.5" />
             </button>
             <button type="button" onClick={handleDeleteIssue}>
-              <Icon iconName="delete" />
+              <Trash2 className="h-3.5 w-3.5" />
             </button>
           </div>
         </div>
@@ -85,7 +74,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
       <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <DoubleCircleIcon className="h-3.5 w-3.5 flex-shrink-0" />
             <span className="flex-grow truncate">State</span>
           </div>
           <div className="w-3/4">
@@ -98,20 +87,20 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="group" className="!text-base flex-shrink-0" />
+            <UserGroupIcon className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Assignees</span>
           </div>
           <div className="w-3/4">
             <SidebarAssigneeSelect
               value={issue.assignees}
-              onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
+              onChange={(val: string[]) => handleUpdateIssue({ assignees: val })}
               disabled={readOnly}
             />
           </div>
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <Signal className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Priority</span>
           </div>
           <div className="w-3/4">
@@ -124,7 +113,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <CalendarDays className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Start date</span>
           </div>
           <div>
@@ -144,7 +133,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <CalendarDays className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Due date</span>
           </div>
           <div>
diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
index 57bcb904c..1ad0104e2 100644
--- a/web/components/issues/peek-overview/layout.tsx
+++ b/web/components/issues/peek-overview/layout.tsx
@@ -8,8 +8,6 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import useUser from "hooks/use-user";
 // components
 import { DeleteIssueModal, FullScreenPeekView, SidePeekView } from "components/issues";
 // types
@@ -18,7 +16,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 +24,120 @@ 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 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) return;
 
-    const handleUpdateIssue = async (formData: Partial<IIssue>) => {
-      if (!issue || !user) return;
+    await updateIssue(workspaceSlug, projectId, issue.id, formData);
+    mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+    if (handleMutation) handleMutation();
+  };
 
-      await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
-      mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
-      handleMutation();
-    };
+  const handleDeleteIssue = async () => {
+    if (!issue) return;
 
-    const handleDeleteIssue = async () => {
-      if (!issue || !user) return;
+    await deleteIssue(workspaceSlug, projectId, issue.id);
+    if (handleMutation) handleMutation();
 
-      await deleteIssue(workspaceSlug, projectId, issue.id, user);
-      handleMutation();
+    handleClose();
+  };
 
-      handleClose();
-    };
+  useEffect(() => {
+    if (!peekIssue) return;
 
-    useEffect(() => {
-      if (!peekIssue) return;
+    fetchIssueDetails(workspaceSlug, projectId, peekIssue.toString());
+  }, [fetchIssueDetails, peekIssue, projectId, workspaceSlug]);
 
-      getIssueById(workspaceSlug, projectId, peekIssue.toString());
-    }, [getIssueById, 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 (
-      <>
+  return (
+    <>
+      {issue && (
         <DeleteIssueModal
           isOpen={deleteIssueModal}
           handleClose={() => setDeleteIssueModal(false)}
-          data={issue ? { ...issue } : null}
+          data={issue}
           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.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 +147,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..470452276 100644
--- a/web/components/issues/select/assignee.tsx
+++ b/web/components/issues/select/assignee.tsx
@@ -1,11 +1,9 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectServices from "services/project.service";
+import { ProjectMemberService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -15,6 +13,8 @@ export type Props = {
   onChange: (value: string[]) => void;
 };
 
+const projectMemberService = new ProjectMemberService();
+
 export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -22,7 +22,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)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -31,7 +31,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
         {member.member.is_bot ? member.member.first_name : member.member.display_name}
       </div>
     ),
@@ -46,12 +46,20 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
         <div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="-my-0.5 flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={true} />
+              <AvatarGroup showTooltip={false}>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-              <Icon iconName="person" className="!text-base !leading-4" />
-              <span className="text-custom-text-200">Assignee</span>
+            <div className="flex items-center justify-center gap-1 w-full text-custom-text-300 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs">
+              <UserGroupIcon className="h-3 w-3" />
+              <span>Assignee</span>
             </div>
           )}
         </div>
diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx
new file mode 100644
index 000000000..c931ec5d8
--- /dev/null
+++ b/web/components/issues/select/cycle.tsx
@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { ContrastIcon } from "@plane/ui";
+// icons
+import { Check, Search } from "lucide-react";
+
+export interface IssueCycleSelectProps {
+  workspaceSlug: string;
+  projectId: string;
+  value: string | null;
+  onChange: (value: string) => void;
+}
+
+export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props) => {
+  const { workspaceSlug, projectId, value, onChange } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const fetchCycles = () => {
+    if (workspaceSlug && projectId) cycleStore.fetchCycles(workspaceSlug, projectId, "all");
+  };
+
+  const cycles = cycleStore.projectCycles;
+
+  const selectedCycle = cycles ? cycles?.find((i) => i.id === value) : undefined;
+
+  const options = cycles?.map((cycle) => ({
+    value: cycle.id,
+    query: cycle.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <ContrastIcon />
+        </span>
+        <span className="truncate flex-grow">{cycle.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedCycle ? (
+    <div className="flex items-center gap-1 text-custom-text-200">
+      <ContrastIcon className="h-3 w-3" />
+      <div className="truncate">{selectedCycle.name}</div>
+    </div>
+  ) : (
+    <div className="flex items-center gap-1 text-custom-text-300">
+      <ContrastIcon className="h-3 w-3" />
+      <span>Cycle</span>
+    </div>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left`}
+      value={value}
+      onChange={(val: string) => onChange(val)}
+      disabled={false}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+          onClick={fetchCycles}
+        >
+          {label}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </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>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/select/date.tsx b/web/components/issues/select/date.tsx
index 01fbacda3..08c413402 100644
--- a/web/components/issues/select/date.tsx
+++ b/web/components/issues/select/date.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-
+import { Fragment, useState, FC } from "react";
+import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
-import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { CalendarDays, X } from "lucide-react";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
@@ -15,54 +15,74 @@ type Props = {
   value: string | null;
 };
 
-export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => (
-  <Popover className="relative flex items-center justify-center  rounded-lg">
-    {({ close }) => (
-      <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
-            {value ? (
-              <>
-                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
-                <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
-        </Popover.Button>
+export const IssueDateSelect: FC<Props> = ({ label, maxDate, minDate, onChange, value }) => {
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-        <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-10 z-20  transform overflow-hidden">
-            <DatePicker
-              selected={value ? new Date(value) : null}
-              onChange={(val) => {
-                if (!val) onChange("");
-                else onChange(renderDateFormat(val));
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
 
-                close();
-              }}
-              dateFormat="dd-MM-yyyy"
-              minDate={minDate}
-              maxDate={maxDate}
-              inline
-            />
-          </Popover.Panel>
-        </Transition>
-      </>
-    )}
-  </Popover>
-);
+  return (
+    <Popover className="relative flex items-center justify-center  rounded-lg">
+      {({ close }) => (
+        <>
+          <Popover.Button>
+            <div
+              ref={setReferenceElement}
+              className="flex items-center justify-center gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+            >
+              {value ? (
+                <>
+                  <CalendarDays className="h-3 w-3 flex-shrink-0" />
+                  <span>{renderShortDateWithYearFormat(value)}</span>
+                  <button onClick={() => onChange(null)}>
+                    <X className="h-3 w-3 flex-shrink-0" />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
+                  <span className="text-custom-text-300">{label}</span>
+                </>
+              )}
+            </div>
+          </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="absolute top-10 -left-10 z-20 transform overflow-hidden"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <DatePicker
+                  selected={value ? new Date(value) : null}
+                  onChange={(val) => {
+                    if (!val) onChange("");
+                    else onChange(renderDateFormat(val));
+
+                    close();
+                  }}
+                  dateFormat="dd-MM-yyyy"
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  inline
+                />
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/web/components/issues/select/estimate.tsx b/web/components/issues/select/estimate.tsx
index 0d910013b..f3da8a12a 100644
--- a/web/components/issues/select/estimate.tsx
+++ b/web/components/issues/select/estimate.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 // fetch-keys
 import useEstimateOption from "hooks/use-estimate-option";
 
@@ -21,26 +21,21 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
     <CustomSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 text-xs">
-          <PlayIcon
-            className={`h-3.5 w-3.5 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
-          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
+        <div className="flex items-center justify-center gap-1 text-xs">
+          <Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-200" : "text-custom-text-300"}`} />
+          <span className={value !== null ? "text-custom-text-200" : "text-custom-text-300"}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
         </div>
       }
       onChange={onChange}
-      position="right"
       width="w-full min-w-[8rem]"
       noChevron
     >
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-4 w-4" />
           </span>
           None
         </>
@@ -50,7 +45,7 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
+                <Triangle className="h-4 w-4" />
               </span>
               {point.value}
             </>
diff --git a/web/components/issues/select/index.ts b/web/components/issues/select/index.ts
index 4f1a20372..40c435bc0 100644
--- a/web/components/issues/select/index.ts
+++ b/web/components/issues/select/index.ts
@@ -5,3 +5,5 @@ export * from "./label";
 export * from "./priority";
 export * from "./project";
 export * from "./state";
+export * from "./module";
+export * from "./cycle";
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index cf960b3a0..a85b073eb 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -1,23 +1,14 @@
-import React, { useState } from "react";
-
+import React, { Fragment, useState } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// headless ui
 import { Combobox, Transition } from "@headlessui/react";
+import { usePopper } from "react-popper";
 // 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 { Check, Component, Plus, Search, Tag } from "lucide-react";
 // types
 import type { IIssueLabels } from "types";
 // fetch-keys
@@ -28,52 +19,61 @@ type Props = {
   value: string[];
   onChange: (value: string[]) => void;
   projectId: string;
+  label?: JSX.Element;
 };
 
-export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
+const issueLabelService = new IssueLabelService();
+
+export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId, label }) => {
   // states
   const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
   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">
-            {value && value.length > 0 ? (
-              <span className="flex items-center justify-center gap-2 text-xs">
-                <IssueLabelsList
-                  labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
-                  length={3}
-                  showLength={true}
-                />
-              </span>
-            ) : (
-              <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-                <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
-                <span className=" text-custom-text-200">Label</span>
-              </span>
-            )}
+          <Combobox.Button as={Fragment}>
+            <div
+              ref={setReferenceElement}
+              className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200"
+            >
+              {label ? (
+                label
+              ) : value && value.length > 0 ? (
+                <span className="flex items-center justify-center gap-2 text-xs">
+                  <IssueLabelsList
+                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
+                    length={3}
+                    showLength
+                  />
+                </span>
+              ) : (
+                <div className="flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80">
+                  <Tag className="h-3 w-3 text-custom-text-300" />
+                  <span className="text-custom-text-300">Label</span>
+                </div>
+              )}
+            </div>
           </Combobox.Button>
 
           <Transition
@@ -86,118 +86,115 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
+            <Combobox.Options as={Fragment}>
+              <div
+                className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
                 bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
-            >
-              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
-                <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search for label..."
-                  displayValue={(assigned: any) => assigned?.name}
-                />
-              </div>
-              <div className="py-1.5">
-                {issueLabels && filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((label) => {
-                      const children = issueLabels?.filter((l) => l.parent === label.id);
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <Search className="h-3 w-3 text-custom-text-200" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder="Search for label..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div className="py-1.5">
+                  {issueLabels && filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((label) => {
+                        const children = issueLabels?.filter((l) => l.parent === label.id);
 
-                      if (children.length === 0) {
-                        if (!label.parent)
-                          return (
-                            <Combobox.Option
-                              key={label.id}
-                              className={({ active }) =>
-                                `${
-                                  active ? "bg-custom-background-80" : ""
-                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
-                              }
-                              value={label.id}
-                            >
-                              {({ selected }) => (
-                                <div className="flex w-full justify-between gap-2 rounded">
-                                  <div className="flex items-center justify-start gap-2">
-                                    <span
-                                      className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-                                      style={{
-                                        backgroundColor: label.color,
-                                      }}
-                                    />
-                                    <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"
-                                      }`}
-                                    />
-                                  </div>
-                                </div>
-                              )}
-                            </Combobox.Option>
-                          );
-                      } else
-                        return (
-                          <div className="border-y border-custom-border-200">
-                            <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
-                              <RectangleGroupIcon className="h-3 w-3" /> {label.name}
-                            </div>
-                            <div>
-                              {children.map((child) => (
-                                <Combobox.Option
-                                  key={child.id}
-                                  className={({ active }) =>
-                                    `${
-                                      active ? "bg-custom-background-80" : ""
-                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
-                                  }
-                                  value={child.id}
-                                >
-                                  {({ selected }) => (
-                                    <div className="flex w-full justify-between gap-2 rounded">
-                                      <div className="flex items-center justify-start gap-2">
-                                        <span
-                                          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-                                          style={{
-                                            backgroundColor: child?.color,
-                                          }}
-                                        />
-                                        <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"
-                                          }`}
-                                        />
-                                      </div>
+                        if (children.length === 0) {
+                          if (!label.parent)
+                            return (
+                              <Combobox.Option
+                                key={label.id}
+                                className={({ active }) =>
+                                  `${
+                                    active ? "bg-custom-background-80" : ""
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                }
+                                value={label.id}
+                              >
+                                {({ selected }) => (
+                                  <div className="flex w-full justify-between gap-2 rounded">
+                                    <div className="flex items-center justify-start gap-2">
+                                      <span
+                                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor: label.color,
+                                        }}
+                                      />
+                                      <span>{label.name}</span>
                                     </div>
-                                  )}
-                                </Combobox.Option>
-                              ))}
+                                    <div className="flex items-center justify-center rounded p-1">
+                                      <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                    </div>
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            );
+                        } else
+                          return (
+                            <div className="border-y border-custom-border-200">
+                              <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
+                                <Component className="h-3 w-3" /> {label.name}
+                              </div>
+                              <div>
+                                {children.map((child) => (
+                                  <Combobox.Option
+                                    key={child.id}
+                                    className={({ active }) =>
+                                      `${
+                                        active ? "bg-custom-background-80" : ""
+                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                    }
+                                    value={child.id}
+                                  >
+                                    {({ selected }) => (
+                                      <div className="flex w-full justify-between gap-2 rounded">
+                                        <div className="flex items-center justify-start gap-2">
+                                          <span
+                                            className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                            style={{
+                                              backgroundColor: child?.color,
+                                            }}
+                                          />
+                                          <span>{child.name}</span>
+                                        </div>
+                                        <div className="flex items-center justify-center rounded p-1">
+                                          <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                        </div>
+                                      </div>
+                                    )}
+                                  </Combobox.Option>
+                                ))}
+                              </div>
                             </div>
-                          </div>
-                        );
-                    })
+                          );
+                      })
+                    ) : (
+                      <p className="px-2 text-xs text-custom-text-200">No labels found</p>
+                    )
                   ) : (
-                    <p className="px-2 text-xs text-custom-text-200">No labels found</p>
-                  )
-                ) : (
-                  <p className="px-2 text-xs text-custom-text-200">Loading...</p>
-                )}
-                <button
-                  type="button"
-                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
-                  onClick={() => setIsOpen(true)}
-                >
-                  <span className="flex items-center justify-start gap-1 text-custom-text-200">
-                    <PlusIcon className="h-4 w-4" aria-hidden="true" />
-                    <span>Create New Label</span>
-                  </span>
-                </button>
+                    <p className="px-2 text-xs text-custom-text-200">Loading...</p>
+                  )}
+                  <button
+                    type="button"
+                    className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
+                    onClick={() => setIsOpen(true)}
+                  >
+                    <span className="flex items-center justify-start gap-1 text-custom-text-200">
+                      <Plus className="h-4 w-4" aria-hidden="true" />
+                      <span className="whitespace-nowrap">Create New Label</span>
+                    </span>
+                  </button>
+                </div>
               </div>
             </Combobox.Options>
           </Transition>
diff --git a/web/components/issues/select/module.tsx b/web/components/issues/select/module.tsx
new file mode 100644
index 000000000..cb9d6252b
--- /dev/null
+++ b/web/components/issues/select/module.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { DiceIcon } from "@plane/ui";
+// icons
+import { Check, Search } from "lucide-react";
+
+export interface IssueModuleSelectProps {
+  workspaceSlug: string;
+  projectId: string;
+  value: string | null;
+  onChange: (value: string) => void;
+}
+
+export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((props) => {
+  const { workspaceSlug, projectId, value, onChange } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { module: moduleStore } = useMobxStore();
+
+  const fetchModules = () => {
+    if (workspaceSlug && projectId) moduleStore.fetchModules(workspaceSlug, projectId);
+  };
+
+  const modules = projectId ? moduleStore.modules[projectId] : undefined;
+
+  const selectedModule = modules ? modules?.find((i) => i.id === value) : undefined;
+
+  const options = modules?.map((module) => ({
+    value: module.id,
+    query: module.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <DiceIcon />
+        </span>
+        <span className="truncate flex-grow">{module.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedModule ? (
+    <div className="flex items-center gap-1 text-custom-text-200">
+      <DiceIcon className="h-3 w-3" />
+      <span className="truncate">{selectedModule.name}</span>
+    </div>
+  ) : (
+    <div className="flex items-center gap-1 text-custom-text-300">
+      <DiceIcon className="h-3 w-3" />
+      <span>Module</span>
+    </div>
+  );
+
+  return (
+    <Combobox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={(val: string) => onChange(val)}>
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className="flex items-center justify-between gap-1 w-full text-xs px-2 py-1 cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200  hover:bg-custom-background-80"
+          onClick={fetchModules}
+        >
+          {label}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </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>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
index 8624f8cf8..03f468b6c 100644
--- a/web/components/issues/select/priority.tsx
+++ b/web/components/issues/select/priority.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PriorityIcon } from "components/icons/priority-icon";
+import { CustomSelect, PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
@@ -18,16 +16,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
   <CustomSelect
     value={value}
     label={
-      <div className="flex items-center justify-center gap-2 text-xs">
-        <span className="flex items-center">
-          <PriorityIcon
-            priority={value}
-            className={`text-xs ${value ? "" : "text-custom-text-200"}`}
-          />
-        </span>
-        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
-          {value ?? "Priority"}
-        </span>
+      <div className="flex items-center justify-center gap-1 text-custom-text-200">
+        <PriorityIcon priority={value} className="h-3 w-3" />
+        <span className="text-xs capitalize">{value ?? "Priority"}</span>
       </div>
     }
     onChange={onChange}
diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx
index 5d1c964e1..fbe577ba0 100644
--- a/web/components/issues/select/project.tsx
+++ b/web/components/issues/select/project.tsx
@@ -1,45 +1,137 @@
-// hooks
-import useProjects from "hooks/use-projects";
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import type { FieldError } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// popper js
+import { usePopper } from "react-popper";
 // ui
-import { CustomSelect } from "components/ui";
+import { Combobox } from "@headlessui/react";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
 // icons
-import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
+import { Check, Clipboard, Search } from "lucide-react";
 
 export interface IssueProjectSelectProps {
   value: string;
   onChange: (value: string) => void;
+  error?: FieldError;
 }
 
-export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, onChange }) => {
-  const { projects } = useProjects();
+export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((props) => {
+  const { value, onChange } = props;
+  const [query, setQuery] = useState("");
 
-  return (
-    <CustomSelect
-      value={value}
-      label={
-        <>
-          <ClipboardDocumentListIcon className="h-3 w-3" />
-          <span className="block truncate">
-            {projects?.find((i) => i.id === value)?.identifier ?? "Project"}
-          </span>
-        </>
-      }
-      onChange={(val: string) => onChange(val)}
-      noChevron
-    >
-      {projects ? (
-        projects.length > 0 ? (
-          projects.map((project) => (
-            <CustomSelect.Option key={project.id} value={project.id}>
-              <>{project.name}</>
-            </CustomSelect.Option>
-          ))
-        ) : (
-          <p className="text-gray-400">No projects found!</p>
-        )
-      ) : (
-        <div className="px-2 text-sm text-custom-text-200">Loading...</div>
-      )}
-    </CustomSelect>
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  const selectedProject = projects?.find((i) => i.id === value);
+
+  const options = projects?.map((project) => ({
+    value: project.id,
+    query: project.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="grid place-items-center flex-shrink-0">
+          {project.emoji ? renderEmoji(project.emoji) : project.icon_prop ? renderEmoji(project.icon_prop) : null}
+        </span>
+        <span className="truncate flex-grow">{project.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedProject ? (
+    <div className="flex items-center gap-1.5">
+      <span className="flex items-center h-3 w-3">
+        {selectedProject.emoji
+          ? renderEmoji(selectedProject.emoji)
+          : selectedProject.icon_prop
+          ? renderEmoji(selectedProject.icon_prop)
+          : null}
+      </span>
+      <div className="truncate">{selectedProject.identifier}</div>
+    </div>
+  ) : (
+    <>
+      <Clipboard className="h-3 w-3" />
+      <span>Select Project</span>
+    </>
   );
-};
+  return (
+    <Combobox as="div" className="flex-shrink-0 text-left" value={value} onChange={(val: string) => onChange(val)}>
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className="flex items-center justify-center gap-1 w-full text-xs px-2 py-1 rounded text-custom-text-300  border-[0.5px] border-custom-border-300   hover:bg-custom-background-80"
+        >
+          {label}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </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>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index 22a4e6532..051106acb 100644
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@@ -1,18 +1,12 @@
 import React from "react";
-
 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";
+import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 // icons
-import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
-// helpers
-import { getStatesList } from "helpers/state.helper";
+import { Plus } from "lucide-react";
 // fetch keys
 import { STATES_LIST } from "constants/fetch-keys";
 
@@ -23,18 +17,18 @@ type Props = {
   projectId: string;
 };
 
+// services
+const projectStateService = new ProjectStateService();
+
 export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
   // states
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { data: stateGroups } = useSWR(
+  const { data: states } = 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);
 
   const options = states?.map((state) => ({
     value: state.id,
@@ -56,20 +50,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 text-custom-text-200">
           {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" />
+            <DoubleCircleIcon className="h-3 w-3" />
           )}
-          {selectedOption?.name
-            ? selectedOption.name
-            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+          {selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? <span>State</span>}
         </div>
       }
       footerOption={
@@ -78,7 +67,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
           onClick={() => setIsOpen(true)}
         >
-          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+          <Plus className="h-4 w-4" aria-hidden="true" />
           Create New State
         </button>
       }
diff --git a/web/components/issues/sidebar-select/assignee.tsx b/web/components/issues/sidebar-select/assignee.tsx
index 8b9872368..a7f698d9f 100644
--- a/web/components/issues/sidebar-select/assignee.tsx
+++ b/web/components/issues/sidebar-select/assignee.tsx
@@ -1,14 +1,10 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectService from "services/project.service";
+import { ProjectMemberService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
-import { AssigneesList, Avatar } from "components/ui/avatar";
+import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -18,6 +14,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const projectMemberService = new ProjectMemberService();
+
 export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -25,7 +24,7 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -34,7 +33,7 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -47,7 +46,15 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
         <>
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="-my-0.5 flex items-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
               <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
             </div>
           ) : (
diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
index a4ebe0108..73bf747af 100644
--- a/web/components/issues/sidebar-select/blocked.tsx
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -7,12 +7,12 @@ 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
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockedIcon } from "components/icons";
+import { X } from "lucide-react";
+import { BlockedIcon } from "@plane/ui";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -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,
@@ -144,7 +139,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
index 8059e3760..139212313 100644
--- a/web/components/issues/sidebar-select/blocker.tsx
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -10,10 +10,10 @@ 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";
+import { X } from "lucide-react";
+import { BlockerIcon } from "@plane/ui";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -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,
@@ -152,7 +149,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))
diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx
index 8fbfcf707..2507bb12e 100644
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -5,49 +5,42 @@ 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";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { ContrastIcon, CustomSearchSelect, Tooltip } from "@plane/ui";
 // types
-import { ICycle, IIssue } from "types";
+import { IIssue } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
-  handleCycleChange: (cycle: ICycle) => void;
+  handleCycleChange: (cycleId: string) => void;
   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((res) => {
+      .then(() => {
         mutate(ISSUE_DETAILS(issueId as string));
 
         mutate(CYCLE_ISSUES(cycleId));
@@ -57,62 +50,54 @@ export const SidebarCycleSelect: React.FC<Props> = ({
       });
   };
 
+  const options = incompleteCycles?.map((cycle) => ({
+    value: cycle.id,
+    query: cycle.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <ContrastIcon />
+        </span>
+        <span className="truncate flex-grow">{cycle.name}</span>
+      </div>
+    ),
+  }));
+
   const issueCycle = issueDetail?.issue_cycle;
 
   return (
-    <CustomSelect
+    <CustomSearchSelect
+      value={issueCycle?.cycle_detail.id}
+      onChange={(value: any) => {
+        value === issueCycle?.cycle_detail.id
+          ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
+          : handleCycleChange(value);
+      }}
+      options={options}
       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 ${
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
                 disabled ? "cursor-not-allowed" : ""
-              }`}
+              } max-w-[10rem]`}
             >
               <span
-                className={`truncate ${
+                className={`flex items-center gap-1.5 truncate ${
                   issueCycle ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
+                <span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
+                <span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
               </span>
             </button>
           </Tooltip>
         </div>
       }
-      value={issueCycle ? issueCycle.cycle_detail.id : null}
-      onChange={(value: any) => {
-        !value
-          ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-          : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
-      }}
-      width="w-full"
-      position="right"
-      maxHeight="rg"
+      width="max-w-[10rem]"
+      noChevron
       disabled={disabled}
-    >
-      {incompleteCycles ? (
-        incompleteCycles.length > 0 ? (
-          <>
-            {incompleteCycles.map((option) => (
-              <CustomSelect.Option key={option.id} value={option.id}>
-                <Tooltip position="left-bottom" tooltipContent={option.name}>
-                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                </Tooltip>
-              </CustomSelect.Option>
-            ))}
-            <CustomSelect.Option value={null}>None</CustomSelect.Option>
-          </>
-        ) : (
-          <div className="text-center">No cycles found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </CustomSelect>
+    />
   );
 };
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 0294d9475..a28d472ba 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -9,10 +9,9 @@ import useUser from "hooks/use-user";
 // icons
 import { X, CopyPlus } from "lucide-react";
 // components
-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 +22,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 +66,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) => ({
@@ -113,7 +115,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
               ? duplicateIssuesRelation.map((relation) => (
                   <div
                     key={relation.issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs  duration-300 "
                   >
                     <a
                       href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
@@ -121,7 +123,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
-                      <BlockerIcon height={10} width={10} />
+                      <CopyPlus height={10} width={10} />
                       {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
                     </a>
                     <button
@@ -130,7 +132,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/estimate.tsx b/web/components/issues/sidebar-select/estimate.tsx
index 7ebdfe2b9..cdc74cbb2 100644
--- a/web/components/issues/sidebar-select/estimate.tsx
+++ b/web/components/issues/sidebar-select/estimate.tsx
@@ -3,9 +3,9 @@ import React from "react";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 
 type Props = {
   value: number | null;
@@ -16,21 +16,21 @@ type Props = {
 export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const { estimatePoints } = useEstimateOption();
 
+  const currentEstimate = estimatePoints?.find((e) => e.key === value)?.value;
   return (
     <CustomSelect
       value={value}
       customButton={
-        <button
-          type="button"
-          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
-        >
-          <PlayIcon
-            className={`h-4 w-4 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
-          {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
-        </button>
+        <div className="flex items-center gap-1.5 text-xs bg-custom-background-80 rounded px-2.5 py-0.5">
+          {currentEstimate ? (
+            <>
+              <Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
+              {currentEstimate}
+            </>
+          ) : (
+            "No Estimate"
+          )}
+        </div>
       }
       onChange={onChange}
       disabled={disabled}
@@ -38,7 +38,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-3.5 w-3" />
           </span>
           None
         </>
@@ -48,7 +48,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
+                <Triangle className="h-3.5 w-3.5" />
               </span>
               {point.value}
             </>
diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 3ac2f552e..e997b6f49 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -1,32 +1,28 @@
 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 { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 // headless ui
-import { Listbox, Popover, Transition } from "@headlessui/react";
+import { 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 } from "@plane/ui";
+import { IssueLabelSelect } from "../select";
 // icons
-import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Plus, X } from "lucide-react";
 // types
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import useToast from "hooks/use-toast";
 
 type Props = {
   issueDetails: IIssue | undefined;
-  issueControl: any;
-  watchIssue: UseFormWatch<IIssue>;
+  labelList: string[];
   submitChanges: (formData: any) => void;
   isNotAllowed: boolean;
   uneditable: boolean;
@@ -37,10 +33,11 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "#ff0000",
 };
 
+const issueLabelService = new IssueLabelService();
+
 export const SidebarLabelSelect: React.FC<Props> = ({
   issueDetails,
-  issueControl,
-  watchIssue,
+  labelList,
   submitChanges,
   isNotAllowed,
   uneditable,
@@ -48,15 +45,17 @@ export const SidebarLabelSelect: React.FC<Props> = ({
   const [createLabelForm, setCreateLabelForm] = useState(false);
 
   const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
   const { workspaceSlug, projectId } = router.query;
 
   const {
-    register,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     reset,
     watch,
-    control: labelControl,
+    control,
     setFocus,
   } = useForm<Partial<IIssueLabels>>({
     defaultValues,
@@ -67,23 +66,31 @@ 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);
 
         issueLabelMutate((prevData: any) => [...(prevData ?? []), res], false);
 
-        submitChanges({ labels_list: [...(issueDetails?.labels ?? []), res.id] });
+        submitChanges({ labels: [...(issueDetails?.labels ?? []), res.id] });
 
         setCreateLabelForm(false);
+      })
+      .catch((error) => {
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.error ?? "Error while adding the label",
+        });
+        reset(formData);
       });
   };
 
@@ -95,243 +102,138 @@ export const SidebarLabelSelect: React.FC<Props> = ({
   }, [createLabelForm, reset, setFocus]);
 
   return (
-    <div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
-      <div className="flex items-start justify-between">
-        <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
-          <TagIcon className="h-4 w-4" />
-          <p>Label</p>
-        </div>
-        <div className="basis-1/2">
-          <div className="flex flex-wrap gap-1">
-            {watchIssue("labels_list")?.map((labelId) => {
-              const label = issueLabels?.find((l) => l.id === labelId);
+    <div className={`flex flex-col gap-3 ${uneditable ? "opacity-60" : ""}`}>
+      <div className="flex flex-wrap gap-1">
+        {labelList?.map((labelId) => {
+          const label = issueLabels?.find((l) => l.id === labelId);
 
-              if (label)
-                return (
-                  <span
-                    key={label.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
-                    onClick={() => {
-                      const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== labelId);
-                      submitChanges({
-                        labels_list: updatedLabels,
-                      });
-                    }}
-                  >
-                    <span
-                      className="h-2 w-2 flex-shrink-0 rounded-full"
-                      style={{
-                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
-                      }}
-                    />
-                    {label.name}
-                    <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
-                  </span>
-                );
-            })}
-            <Controller
-              control={issueControl}
-              name="labels_list"
-              render={({ field: { value } }) => (
-                <Listbox
-                  as="div"
-                  value={value}
-                  onChange={(val: any) => submitChanges({ labels_list: val })}
-                  className="flex-shrink-0"
-                  multiple
-                  disabled={isNotAllowed || uneditable}
-                >
-                  {({ open }) => (
-                    <div className="relative">
-                      <Listbox.Button
-                        className={`flex ${
-                          isNotAllowed || uneditable
-                            ? "cursor-not-allowed"
-                            : "cursor-pointer hover:bg-custom-background-90"
-                        } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
-                      >
-                        Select Label
-                      </Listbox.Button>
-
-                      <Transition
-                        show={open}
-                        as={React.Fragment}
-                        leave="transition ease-in duration-100"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                      >
-                        <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
-                          <div className="py-1">
-                            {issueLabels ? (
-                              issueLabels.length > 0 ? (
-                                issueLabels.map((label: IIssueLabels) => {
-                                  const children = issueLabels?.filter(
-                                    (l) => l.parent === label.id
-                                  );
-
-                                  if (children.length === 0) {
-                                    if (!label.parent)
-                                      return (
-                                        <Listbox.Option
-                                          key={label.id}
-                                          className={({ active, selected }) =>
-                                            `${
-                                              active || selected ? "bg-custom-background-90" : ""
-                                            } ${
-                                              selected ? "" : "text-custom-text-200"
-                                            } flex cursor-pointer select-none items-center gap-2 truncate p-2`
-                                          }
-                                          value={label.id}
-                                        >
-                                          <span
-                                            className="h-2 w-2 flex-shrink-0 rounded-full"
-                                            style={{
-                                              backgroundColor:
-                                                label.color && label.color !== ""
-                                                  ? label.color
-                                                  : "#000",
-                                            }}
-                                          />
-                                          {label.name}
-                                        </Listbox.Option>
-                                      );
-                                  } else
-                                    return (
-                                      <div className="border-y border-custom-border-100 bg-custom-background-90">
-                                        <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
-                                          <RectangleGroupIcon className="h-3 w-3" />
-                                          {label.name}
-                                        </div>
-                                        <div>
-                                          {children.map((child) => (
-                                            <Listbox.Option
-                                              key={child.id}
-                                              className={({ active, selected }) =>
-                                                `${
-                                                  active || selected
-                                                    ? "bg-custom-background-100"
-                                                    : ""
-                                                } ${
-                                                  selected ? "" : "text-custom-text-200"
-                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2`
-                                              }
-                                              value={child.id}
-                                            >
-                                              <span
-                                                className="h-2 w-2 flex-shrink-0 rounded-full"
-                                                style={{
-                                                  backgroundColor: child?.color ?? "black",
-                                                }}
-                                              />
-                                              {child.name}
-                                            </Listbox.Option>
-                                          ))}
-                                        </div>
-                                      </div>
-                                    );
-                                })
-                              ) : (
-                                <div className="text-center">No labels found</div>
-                              )
-                            ) : (
-                              <Spinner />
-                            )}
-                          </div>
-                        </Listbox.Options>
-                      </Transition>
-                    </div>
-                  )}
-                </Listbox>
-              )}
-            />
-            {!isNotAllowed && (
-              <button
-                type="button"
-                className={`flex ${
-                  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}
+          if (label)
+            return (
+              <span
+                key={label.id}
+                className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                onClick={() => {
+                  const updatedLabels = labelList?.filter((l) => l !== labelId);
+                  submitChanges({
+                    labels: updatedLabels,
+                  });
+                }}
               >
-                {createLabelForm ? (
-                  <>
-                    <XMarkIcon className="h-3 w-3" /> Cancel
-                  </>
-                ) : (
-                  <>
-                    <PlusIcon className="h-3 w-3" /> New
-                  </>
-                )}
-              </button>
+                <span
+                  className="h-2 w-2 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                  }}
+                />
+                {label.name}
+                <X className="h-2 w-2 group-hover:text-red-500" />
+              </span>
+            );
+        })}
+        <IssueLabelSelect
+          setIsOpen={setCreateLabelForm}
+          value={issueDetails?.labels ?? []}
+          onChange={(val: any) => submitChanges({ labels: val })}
+          projectId={issueDetails?.project_detail.id ?? ""}
+          label={
+            <span
+              className={`flex ${
+                isNotAllowed || uneditable ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
+              } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
+            >
+              Select Label
+            </span>
+          }
+        />
+        {!isNotAllowed && (
+          <button
+            type="button"
+            className={`flex ${
+              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 hover:text-custom-text-200 text-custom-text-300`}
+            onClick={() => setCreateLabelForm((prevData) => !prevData)}
+            disabled={uneditable}
+          >
+            {createLabelForm ? (
+              <>
+                <X className="h-3 w-3" /> Cancel
+              </>
+            ) : (
+              <>
+                <Plus className="h-3 w-3" /> New
+              </>
             )}
-          </div>
-        </div>
+          </button>
+        )}
       </div>
+
       {createLabelForm && (
         <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") !== "" && (
-                      <span
-                        className="h-6 w-6 rounded"
-                        style={{
-                          backgroundColor: watch("color") ?? "black",
-                        }}
-                      />
-                    )}
-                  </Popover.Button>
+              <>
+                <Popover.Button className="grid place-items-center outline-none">
+                  {watch("color") && watch("color") !== "" && (
+                    <span
+                      className="h-6 w-6 rounded"
+                      style={{
+                        backgroundColor: watch("color") ?? "black",
+                      }}
+                    />
+                  )}
+                </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 z-10 mt-1.5 max-w-xs px-2 sm:px-0">
-                      <Controller
-                        name="color"
-                        control={labelControl}
-                        render={({ field: { value, onChange } }) => (
-                          <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
-                        )}
-                      />
-                    </Popover.Panel>
-                  </Transition>
-                </>
-              )}
+                <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 z-10 mt-1.5 max-w-xs px-2 sm:px-0">
+                    <Controller
+                      name="color"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                      )}
+                    />
+                  </Popover.Panel>
+                </Transition>
+              </>
             </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"
             className="grid place-items-center rounded bg-red-500 p-2.5"
             onClick={() => setCreateLabelForm(false)}
           >
-            <XMarkIcon className="h-4 w-4 text-white" />
+            <X 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}
-          >
-            <PlusIcon className="h-4 w-4 text-white" />
+          <button type="submit" className="grid place-items-center rounded bg-green-500 p-2.5" disabled={isSubmitting}>
+            <Plus 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 c9599bdf4..0eff28a1e 100644
--- a/web/components/issues/sidebar-select/module.tsx
+++ b/web/components/issues/sidebar-select/module.tsx
@@ -1,47 +1,38 @@
 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";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { CustomSearchSelect, DiceIcon, Tooltip } from "@plane/ui";
 // types
-import { IIssue, IModule } from "types";
+import { IIssue } from "types";
 // fetch-keys
 import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
-  handleModuleChange: (module: IModule) => void;
+  handleModuleChange: (moduleId: string) => void;
   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));
@@ -51,64 +42,59 @@ export const SidebarModuleSelect: React.FC<Props> = ({
       });
   };
 
+  const options = modules?.map((module) => ({
+    value: module.id,
+    query: module.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <DiceIcon />
+        </span>
+        <span className="truncate flex-grow">{module.name}</span>
+      </div>
+    ),
+  }));
+
   const issueModule = issueDetail?.issue_module;
 
   return (
-    <CustomSelect
+    <CustomSearchSelect
+      value={issueModule?.module_detail.id}
+      onChange={(value: any) => {
+        value === issueModule?.module_detail.id
+          ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+          : handleModuleChange(value);
+      }}
+      options={options}
       customButton={
         <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"
-              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
                 disabled ? "cursor-not-allowed" : ""
-              }`}
+              } max-w-[10rem]`}
             >
               <span
-                className={`truncate ${
+                className={`flex items-center gap-1.5 truncate ${
                   issueModule ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                <span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
+                <span className="truncate">
+                  {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                </span>
               </span>
             </button>
           </Tooltip>
         </div>
       }
-      value={issueModule ? issueModule.module_detail?.id : null}
-      onChange={(value: any) => {
-        !value
-          ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
-          : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
-      }}
-      width="w-full"
-      position="right"
-      maxHeight="rg"
+      width="max-w-[10rem]"
+      noChevron
       disabled={disabled}
-    >
-      {modules ? (
-        modules.length > 0 ? (
-          <>
-            {modules.map((option) => (
-              <CustomSelect.Option key={option.id} value={option.id}>
-                <Tooltip position="left-bottom" tooltipContent={option.name}>
-                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                </Tooltip>
-              </CustomSelect.Option>
-            ))}
-            <CustomSelect.Option value={null}>None</CustomSelect.Option>
-          </>
-        ) : (
-          <div className="text-center">No modules found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </CustomSelect>
+    />
   );
 };
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/priority.tsx b/web/components/issues/sidebar-select/priority.tsx
index 543f79707..3d36acabc 100644
--- a/web/components/issues/sidebar-select/priority.tsx
+++ b/web/components/issues/sidebar-select/priority.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PriorityIcon } from "components/icons/priority-icon";
+import { CustomSelect, PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
@@ -18,8 +16,7 @@ type Props = {
 export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
   <CustomSelect
     customButton={
-      <button
-        type="button"
+      <div
         className={`flex items-center gap-1.5 text-left text-xs capitalize rounded px-2.5 py-0.5 ${
           value === "urgent"
             ? "border-red-500/20 bg-red-500/20 text-red-500"
@@ -33,10 +30,10 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
         }`}
       >
         <span className="grid place-items-center -my-1">
-          <PriorityIcon priority={value} className="!text-sm" />
+          <PriorityIcon priority={value} className="h-3.5 w-3.5" />
         </span>
         <span>{value ?? "None"}</span>
-      </button>
+      </div>
     }
     value={value}
     onChange={onChange}
@@ -46,7 +43,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
     {PRIORITIES.map((option) => (
       <CustomSelect.Option key={option} value={option} className="capitalize">
         <>
-          <PriorityIcon priority={option} className="text-sm" />
+          <PriorityIcon priority={option} className="h-3.5 w-3.5" />
           {option ?? "None"}
         </>
       </CustomSelect.Option>
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index b9e56dbeb..2f543e381 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -8,11 +8,11 @@ import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // icons
 import { X } from "lucide-react";
-import { BlockerIcon, RelatedIcon } from "components/icons";
+import { RelatedIcon } from "@plane/ui";
 // 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) => ({
@@ -113,7 +116,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
               ? relatedToIssueRelation.map((relation) => (
                   <div
                     key={relation.issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs duration-300"
                   >
                     <a
                       href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
@@ -121,7 +124,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
-                      <BlockerIcon height={10} width={10} />
+                      <RelatedIcon height={10} width={10} />
                       {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
                     </a>
                     <button
@@ -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 cf2cfe3b2..326a5cf48 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -5,13 +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";
-// icons
-import { StateGroupIcon } from "components/icons";
+import { CustomSearchSelect, StateGroupIcon } from "@plane/ui";
 // helpers
-import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // constants
 import { STATES_LIST } from "constants/fetch-keys";
@@ -22,28 +19,42 @@ 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(
+  const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
-  const states = getStatesList(stateGroups);
 
-  const selectedState = states?.find((s) => s.id === value);
+  const selectedOption = states?.find((s) => s.id === value);
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        {state.name}
+      </div>
+    ),
+  }));
 
   return (
-    <CustomSelect
+    <CustomSearchSelect
+      value={value}
+      onChange={onChange}
+      options={options}
       customButton={
-        <button type="button" className="bg-custom-background-80 text-xs rounded px-2.5 py-0.5">
-          {selectedState ? (
+        <div className="bg-custom-background-80 text-xs rounded px-2.5 py-0.5">
+          {selectedOption ? (
             <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-              <StateGroupIcon stateGroup={selectedState.group} color={selectedState.color} />
-              {addSpaceIfCamelCase(selectedState?.name ?? "")}
+              <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
+              {addSpaceIfCamelCase(selectedOption?.name ?? "")}
             </div>
           ) : inboxIssueId ? (
             <div className="flex items-center gap-1.5 text-left text-custom-text-100">
@@ -53,30 +64,11 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
           ) : (
             "None"
           )}
-        </button>
+        </div>
       }
-      value={value}
-      onChange={onChange}
-      optionsClassName="w-min"
-      position="left"
+      width="min-w-[10rem]"
+      noChevron
       disabled={disabled}
-    >
-      {states ? (
-        states.length > 0 ? (
-          states.map((state) => (
-            <CustomSelect.Option key={state.id} value={state.id}>
-              <>
-                <StateGroupIcon stateGroup={state.group} color={state.color} />
-                {state.name}
-              </>
-            </CustomSelect.Option>
-          ))
-        ) : (
-          <div className="text-center">No states found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </CustomSelect>
+    />
   );
 };
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index e0c370eaf..3ef335309 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -1,21 +1,17 @@
 import React, { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, UseFormWatch } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
-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";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
+import { IssueService } from "services/issue";
+import { ModuleService } from "services/module.service";
 // components
 import { LinkModal, LinksList } from "components/core";
 import {
@@ -34,27 +30,16 @@ import {
   SidebarRelatesSelect,
 } from "components/issues";
 // ui
-import { CustomDatePicker, Icon } from "components/ui";
+import { CustomDatePicker } from "components/ui";
 // icons
-import {
-  LinkIcon,
-  CalendarDaysIcon,
-  TrashIcon,
-  PlusIcon,
-  Squares2X2Icon,
-  ChartBarIcon,
-  UserGroupIcon,
-  PlayIcon,
-  UserIcon,
-  RectangleGroupIcon,
-} from "@heroicons/react/24/outline";
+import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, User2 } from "lucide-react";
+import { ContrastIcon, DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
+import type { IIssue, IIssueLink, linkDetails } from "types";
 // fetch-keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-import { ContrastIcon } from "components/icons";
 
 type Props = {
   control: any;
@@ -84,47 +69,48 @@ type Props = {
   uneditable?: boolean;
 };
 
-export const IssueDetailsSidebar: React.FC<Props> = ({
-  control,
-  submitChanges,
-  issueDetail,
-  watch: watchIssue,
-  fieldsToShow = ["all"],
-  uneditable = false,
-}) => {
+const issueService = new IssueService();
+const moduleService = new ModuleService();
+
+export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { control, submitChanges, issueDetail, watch: watchIssue, fieldsToShow = ["all"], uneditable = false } = props;
+
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [linkModal, setLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
 
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+  const userRole = userStore.currentProjectRole;
+
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
-  const { user } = useUserAuth();
-
   const { isEstimateActive } = useEstimateOption();
 
-  const { loading, handleSubscribe, handleUnsubscribe, subscribed } =
-    useUserIssueNotificationSubscription(workspaceSlug, projectId, issueId);
-
-  const { memberRole } = useProjectMyMembership();
+  const { loading, handleSubscribe, handleUnsubscribe, subscribed } = useUserIssueNotificationSubscription(
+    workspaceSlug,
+    projectId,
+    issueId
+  );
 
   const { setToastAlert } = useToast();
 
   const handleCycleChange = useCallback(
-    (cycleDetails: ICycle) => {
-      if (!workspaceSlug || !projectId || !issueDetail) return;
+    (cycleId: string) => {
+      if (!workspaceSlug || !projectId || !issueDetail || !user) return;
 
-      issuesService
+      issueService
         .addIssueToCycle(
           workspaceSlug as string,
           projectId as string,
-          cycleDetails.id,
+          cycleId,
           {
             issues: [issueDetail.id],
           },
           user
         )
-        .then((res) => {
+        .then(() => {
           mutate(ISSUE_DETAILS(issueId as string));
         });
     },
@@ -132,20 +118,20 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
   );
 
   const handleModuleChange = useCallback(
-    (moduleDetail: IModule) => {
-      if (!workspaceSlug || !projectId || !issueDetail) return;
+    (moduleId: string) => {
+      if (!workspaceSlug || !projectId || !issueDetail || !user) return;
 
-      modulesService
+      moduleService
         .addIssuesToModule(
           workspaceSlug as string,
           projectId as string,
-          moduleDetail.id,
+          moduleId,
           {
             issues: [issueDetail.id],
           },
           user
         )
-        .then((res) => {
+        .then(() => {
           mutate(ISSUE_DETAILS(issueId as string));
         });
     },
@@ -157,7 +143,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 +183,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 +204,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 +215,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 +241,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");
@@ -282,7 +257,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     setLinkModal(true);
   };
 
-  const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
+  const isNotAllowed = userRole === 5 || userRole === 10;
 
   return (
     <>
@@ -297,12 +272,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         createIssueLink={handleCreateLink}
         updateIssueLink={handleUpdateLink}
       />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueDetail ?? null}
-        user={user}
-      />
+      {issueDetail && (
+        <DeleteIssueModal handleClose={() => setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueDetail} />
+      )}
       <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
         <div className="flex items-center justify-between px-5 pb-3">
           <h4 className="text-sm font-medium">
@@ -321,7 +293,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     else handleSubscribe();
                   }}
                 >
-                  <Icon iconName="notifications" />
+                  <Bell className="h-3.5 w-3.5" />
                   {loading ? "Loading..." : subscribed ? "Unsubscribe" : "Subscribe"}
                 </button>
               )}
@@ -340,7 +312,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
                 onClick={() => setDeleteIssueModal(true)}
               >
-                <TrashIcon className="h-3.5 w-3.5" />
+                <Trash2 className="h-3.5 w-3.5" />
               </button>
             )}
           </div>
@@ -353,10 +325,10 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
                   <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">
-                      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
                       <p>State</p>
                     </div>
-                    <div className="sm:basis-1/2">
+                    <div>
                       <Controller
                         control={control}
                         name="state"
@@ -364,7 +336,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           <SidebarStateSelect
                             value={value}
                             onChange={(val: string) => submitChanges({ state: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            disabled={isNotAllowed || uneditable}
                           />
                         )}
                       />
@@ -377,15 +349,15 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
                       <p>Assignees</p>
                     </div>
-                    <div className="sm:basis-1/2">
+                    <div>
                       <Controller
                         control={control}
-                        name="assignees_list"
+                        name="assignees"
                         render={({ field: { value } }) => (
                           <SidebarAssigneeSelect
                             value={value}
-                            onChange={(val: string[]) => submitChanges({ assignees_list: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            onChange={(val: string[]) => submitChanges({ assignees: val })}
+                            disabled={isNotAllowed || uneditable}
                           />
                         )}
                       />
@@ -395,10 +367,10 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
                   <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">
-                      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
+                      <Signal className="h-4 w-4 flex-shrink-0" />
                       <p>Priority</p>
                     </div>
-                    <div className="sm:basis-1/2">
+                    <div>
                       <Controller
                         control={control}
                         name="priority"
@@ -406,37 +378,34 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           <SidebarPrioritySelect
                             value={value}
                             onChange={(val) => submitChanges({ priority: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            disabled={isNotAllowed || uneditable}
                           />
                         )}
                       />
                     </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">
+                      <Triangle className="h-4 w-4 flex-shrink-0 " />
+                      <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={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
             )}
             {showSecondSection && (
@@ -444,7 +413,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
                   <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">
-                      <UserIcon className="h-4 w-4 flex-shrink-0" />
+                      <User2 className="h-4 w-4 flex-shrink-0" />
                       <p>Parent</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -458,7 +427,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               onChange(val);
                             }}
                             issueDetails={issueDetail}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            disabled={isNotAllowed || uneditable}
                           />
                         )}
                       />
@@ -483,7 +452,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
-                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                    disabled={isNotAllowed || uneditable}
                   />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
@@ -504,7 +473,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
-                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                    disabled={isNotAllowed || uneditable}
                   />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
@@ -522,7 +491,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
-                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                    disabled={isNotAllowed || uneditable}
                   />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
@@ -540,13 +509,13 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
-                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                    disabled={isNotAllowed || uneditable}
                   />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
                   <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">
-                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
                       <p>Start date</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -574,7 +543,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
                   <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">
-                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
                       <p>Due date</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -609,11 +578,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       <ContrastIcon className="h-4 w-4 flex-shrink-0" />
                       <p>Cycle</p>
                     </div>
-                    <div className="space-y-1 sm:w-1/2">
+                    <div className="space-y-1">
                       <SidebarCycleSelect
                         issueDetail={issueDetail}
                         handleCycleChange={handleCycleChange}
-                        disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                        disabled={isNotAllowed || uneditable}
                       />
                     </div>
                   </div>
@@ -621,14 +590,14 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
+                      <DiceIcon className="h-4 w-4 flex-shrink-0" />
                       <p>Module</p>
                     </div>
-                    <div className="space-y-1 sm:w-1/2">
+                    <div className="space-y-1">
                       <SidebarModuleSelect
                         issueDetail={issueDetail}
                         handleModuleChange={handleModuleChange}
-                        disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                        disabled={isNotAllowed || uneditable}
                       />
                     </div>
                   </div>
@@ -637,14 +606,21 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             )}
           </div>
           {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-            <SidebarLabelSelect
-              issueDetails={issueDetail}
-              issueControl={control}
-              watchIssue={watchIssue}
-              submitChanges={submitChanges}
-              isNotAllowed={isNotAllowed}
-              uneditable={uneditable ?? false}
-            />
+            <div className="flex flex-wrap items-start py-2">
+              <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                <Tag className="h-4 w-4 flex-shrink-0" />
+                <p>Label</p>
+              </div>
+              <div className="space-y-1 sm:w-1/2">
+                <SidebarLabelSelect
+                  issueDetails={issueDetail}
+                  labelList={issueDetail?.labels ?? []}
+                  submitChanges={submitChanges}
+                  isNotAllowed={isNotAllowed}
+                  uneditable={uneditable ?? false}
+                />
+              </div>
+            </div>
           )}
           {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
             <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
@@ -659,7 +635,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     onClick={() => setLinkModal(true)}
                     disabled={uneditable}
                   >
-                    <PlusIcon className="h-4 w-4" />
+                    <Plus className="h-4 w-4" />
                   </button>
                 )}
               </div>
@@ -669,7 +645,12 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     links={issueDetail.issue_link}
                     handleDeleteLink={handleDeleteLink}
                     handleEditLink={handleEditLink}
-                    userAuth={memberRole}
+                    userAuth={{
+                      isGuest: userRole === 5,
+                      isViewer: userRole === 10,
+                      isMember: userRole === 15,
+                      isOwner: userRole === 20,
+                    }}
                   />
                 ) : null}
               </div>
@@ -679,4 +660,4 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
index a53d18bb9..fcf4c5906 100644
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -1,29 +1,17 @@
 import React from "react";
-// next imports
-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 { IssuePeekOverview } from "../issue-peek-overview";
 import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
-import { Tooltip, CustomMenu } from "components/ui";
+import { CustomMenu, 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";
 
 export interface ISubIssues {
   workspaceSlug: string;
@@ -31,7 +19,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;
@@ -42,6 +30,7 @@ export interface ISubIssues {
     issueId: string,
     issue?: IIssue | null
   ) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
 }
 
 export const SubIssues: React.FC<ISubIssues> = ({
@@ -57,52 +46,47 @@ export const SubIssues: React.FC<ISubIssues> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-}) => {
-  const router = useRouter();
-  const { query } = router;
-  const { peekIssue } = query as { peekIssue: string };
+  handleUpdateIssue,
+}) => (
+  <div>
+    {issue && (
+      <div
+        className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
+        style={{ paddingLeft: `${spacingLeft}px` }}
+      >
+        <div className="flex-shrink-0 w-[22px] h-[22px]">
+          {issue?.sub_issues_count > 0 && (
+            <>
+              {issuesLoader.sub_issues.includes(issue?.id) ? (
+                <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+                </div>
+              ) : (
+                <div
+                  className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
+                >
+                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
+                    <ChevronDown width={14} strokeWidth={2} />
+                  ) : (
+                    <ChevronRight width={14} strokeWidth={2} />
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
 
-  const openPeekOverview = (issue_id: string) => {
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: issue_id },
-    });
-  };
-
-  return (
-    <div>
-      {issue && (
-        <div
-          className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
-          style={{ paddingLeft: `${spacingLeft}px` }}
+        <IssuePeekOverview
+          workspaceSlug={issue?.workspace_detail?.slug}
+          projectId={issue?.project_detail?.id}
+          issueId={issue?.id}
+          handleIssue={(issueToUpdate) => {
+            console.log("issueToUpdate", issueToUpdate);
+            handleUpdateIssue(issue, { ...issue, ...issueToUpdate });
+          }}
         >
-          <div className="flex-shrink-0 w-[22px] h-[22px]">
-            {issue?.sub_issues_count > 0 && (
-              <>
-                {issuesLoader.sub_issues.includes(issue?.id) ? (
-                  <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
-                    <Loader width={14} strokeWidth={2} className="animate-spin" />
-                  </div>
-                ) : (
-                  <div
-                    className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
-                    onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
-                  >
-                    {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
-                      <ChevronDown width={14} strokeWidth={2} />
-                    ) : (
-                      <ChevronRight width={14} strokeWidth={2} />
-                    )}
-                  </div>
-                )}
-              </>
-            )}
-          </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">
             <div
               className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
               style={{
@@ -116,103 +100,86 @@ export const SubIssues: React.FC<ISubIssues> = ({
               <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
             </Tooltip>
           </div>
+        </IssuePeekOverview>
 
-          <div className="flex-shrink-0 text-sm">
-            <IssueProperty
-              workspaceSlug={workspaceSlug}
-              projectId={projectId}
-              parentIssue={parentIssue}
-              issue={issue}
-              user={user}
-              editable={editable}
-            />
-          </div>
+        <div className="flex-shrink-0 text-sm">
+          <IssueProperty
+            workspaceSlug={workspaceSlug}
+            parentIssue={parentIssue}
+            issue={issue}
+            user={user}
+            editable={editable}
+          />
+        </div>
 
-          <div className="flex-shrink-0 text-sm">
-            <CustomMenu width="auto" ellipsis>
-              {editable && (
-                <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>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-
-              {editable && (
-                <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>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-
-              <CustomMenu.MenuItem
-                onClick={() =>
-                  copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
-                }
-              >
+        <div className="flex-shrink-0 text-sm">
+          <CustomMenu width="auto" ellipsis>
+            {editable && (
+              <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
                 <div className="flex items-center justify-start gap-2">
-                  <LinkIcon width={14} strokeWidth={2} />
-                  <span>Copy issue link</span>
+                  <Pencil width={14} strokeWidth={2} />
+                  <span>Edit issue</span>
                 </div>
               </CustomMenu.MenuItem>
-            </CustomMenu>
-          </div>
+            )}
 
-          {editable && (
-            <>
-              {issuesLoader.delete.includes(issue?.id) ? (
-                <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
-                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+            {editable && (
+              <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>
                 </div>
-              ) : (
-                <div
-                  className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
-                  onClick={() => {
-                    handleIssuesLoader({ key: "delete", issueId: issue?.id });
-                    removeIssueFromSubIssues(parentIssue?.id, issue);
-                  }}
-                >
-                  <X width={14} strokeWidth={2} />
-                </div>
-              )}
-            </>
-          )}
+              </CustomMenu.MenuItem>
+            )}
+
+            <CustomMenu.MenuItem
+              onClick={() => copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)}
+            >
+              <div className="flex items-center justify-start gap-2">
+                <LinkIcon width={14} strokeWidth={2} />
+                <span>Copy issue link</span>
+              </div>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
         </div>
-      )}
 
-      {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
-        <SubIssuesRootList
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          parentIssue={issue}
-          spacingLeft={spacingLeft + 22}
-          user={user}
-          editable={editable}
-          removeIssueFromSubIssues={removeIssueFromSubIssues}
-          issuesLoader={issuesLoader}
-          handleIssuesLoader={handleIssuesLoader}
-          copyText={copyText}
-          handleIssueCrudOperation={handleIssueCrudOperation}
-        />
-      )}
+        {editable && (
+          <>
+            {issuesLoader.delete.includes(issue?.id) ? (
+              <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
+                <Loader width={14} strokeWidth={2} className="animate-spin" />
+              </div>
+            ) : (
+              <div
+                className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
+                onClick={() => {
+                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+                  removeIssueFromSubIssues(parentIssue?.id, issue);
+                }}
+              >
+                <X width={14} strokeWidth={2} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    )}
 
-      {peekIssue && peekIssue === issue?.id && (
-        <IssuePeekOverview
-          handleMutation={() =>
-            parentIssue && parentIssue?.id && mutate(SUB_ISSUES(parentIssue?.id))
-          }
-          projectId={issue?.project ?? ""}
-          workspaceSlug={workspaceSlug ?? ""}
-          readOnly={!editable}
-        />
-      )}
-    </div>
-  );
-};
+    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
+      <SubIssuesRootList
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        parentIssue={issue}
+        spacingLeft={spacingLeft + 22}
+        user={user}
+        editable={editable}
+        removeIssueFromSubIssues={removeIssueFromSubIssues}
+        issuesLoader={issuesLoader}
+        handleIssuesLoader={handleIssuesLoader}
+        copyText={copyText}
+        handleIssueCrudOperation={handleIssueCrudOperation}
+        handleUpdateIssue={handleUpdateIssue}
+      />
+    )}
+  </div>
+);
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
index 9fc77992e..65f459d95 100644
--- a/web/components/issues/sub-issues/issues-list.tsx
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -1,13 +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";
 
@@ -16,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;
@@ -27,8 +27,11 @@ export interface ISubIssuesRootList {
     issueId: string,
     issue?: IIssue | null
   ) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
 }
 
+const issueService = new IssueService();
+
 export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   workspaceSlug,
   projectId,
@@ -41,17 +44,16 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
+  handleUpdateIssue,
 }) => {
   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 {
@@ -59,6 +61,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
         handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
 
   return (
@@ -81,13 +84,12 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
             handleIssuesLoader={handleIssuesLoader}
             copyText={copyText}
             handleIssueCrudOperation={handleIssueCrudOperation}
+            handleUpdateIssue={handleUpdateIssue}
           />
         ))}
 
       <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..faf593efb 100644
--- a/web/components/issues/sub-issues/properties.tsx
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -1,42 +1,42 @@
 import React from "react";
-// swr
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// 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";
-import { StateSelect } from "components/states";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
+import { PrioritySelect } from "components/project";
 // 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";
+import { IssuePropertyAssignee, IssuePropertyState } from "../issue-layouts/properties";
 
 export interface IIssueProperty {
   workspaceSlug: string;
-  projectId: string;
   parentIssue: IIssue;
   issue: IIssue;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   editable: boolean;
 }
 
-export const IssueProperty: React.FC<IIssueProperty> = ({
-  workspaceSlug,
-  projectId,
-  parentIssue,
-  issue,
-  user,
-  editable,
-}) => {
-  const [properties] = useIssuesProperties(workspaceSlug, projectId);
+// services
+const issueService = new IssueService();
+const trackEventService = new TrackEventService();
+
+export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
+  const { workspaceSlug, parentIssue, issue, user, editable } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const displayProperties = issueFilterStore.userDisplayProperties ?? {};
 
   const handlePriorityChange = (data: any) => {
     partialUpdateIssue({ priority: data });
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -46,19 +46,16 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
+      user as IUser
     );
   };
 
-  const handleStateChange = (data: string, states: IState[] | undefined) => {
-    const oldState = states?.find((s) => s.id === issue.state);
-    const newState = states?.find((s) => s.id === data);
-
+  const handleStateChange = (data: IState) => {
     partialUpdateIssue({
-      state: data,
-      state_detail: newState,
+      state: data.id,
+      state_detail: data,
     });
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -68,34 +65,14 @@ 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(
-        {
-          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) => {
-    let newData = issue.assignees ?? [];
+  const handleAssigneeChange = (data: string[]) => {
+    partialUpdateIssue({ assignees: data });
 
-    if (newData && newData.length > 0) {
-      if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
-      else newData = [...newData, data];
-    } else newData = [...newData, data];
-
-    partialUpdateIssue({ assignees_list: data, assignees: data });
-
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -105,7 +82,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
+      user as IUser
     );
   };
 
@@ -123,13 +100,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),
@@ -146,7 +117,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
 
   return (
     <div className="relative flex items-center gap-1">
-      {properties.priority && (
+      {displayProperties.priority && (
         <div className="flex-shrink-0">
           <PrioritySelect
             value={issue.priority}
@@ -157,52 +128,51 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
         </div>
       )}
 
-      {properties.state && (
+      {displayProperties.state && (
         <div className="flex-shrink-0">
-          <StateSelect
-            value={issue.state_detail}
-            projectId={issue.project_detail.id}
-            onChange={handleStateChange}
-            hideDropdownArrow
-            disabled={!editable}
+          <IssuePropertyState
+            projectId={issue?.project_detail?.id || null}
+            value={issue?.state_detail || null}
+            onChange={(data) => handleStateChange(data)}
+            disabled={false}
+            hideDropdownArrow={true}
           />
         </div>
       )}
 
-      {properties.start_date && issue.start_date && (
+      {displayProperties.start_date && issue.start_date && (
         <div className="flex-shrink-0 w-[104px]">
           <ViewStartDateSelect
             issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            user={user}
-            isNotAllowed={!editable}
-          />
-        </div>
-      )}
-
-      {properties.due_date && issue.target_date && (
-        <div className="flex-shrink-0 w-[104px]">
-          <ViewDueDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            user={user}
-            isNotAllowed={!editable}
-          />
-        </div>
-      )}
-
-      {properties.assignee && (
-        <div className="flex-shrink-0">
-          <MembersSelect
-            value={issue.assignees}
-            projectId={issue.project_detail.id}
-            onChange={handleAssigneeChange}
-            membersDetails={issue.assignee_details}
-            hideDropdownArrow
+            onChange={(val) => partialUpdateIssue({ start_date: val })}
             disabled={!editable}
           />
         </div>
       )}
+
+      {displayProperties.due_date && issue.target_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          {user && (
+            <ViewDueDateSelect
+              issue={issue}
+              onChange={(val) => partialUpdateIssue({ target_date: val })}
+              disabled={!editable}
+            />
+          )}
+        </div>
+      )}
+
+      {displayProperties.assignee && (
+        <div className="flex-shrink-0">
+          <IssuePropertyAssignee
+            projectId={issue?.project_detail?.id || null}
+            value={issue?.assignees || null}
+            hideDropdownArrow={true}
+            onChange={(val) => handleAssigneeChange(val)}
+            disabled={false}
+          />
+        </div>
+      )}
     </div>
   );
-};
+});
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 4b29b97c9..3e8a345f8 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -1,32 +1,31 @@
-import React from "react";
-// next imports
+import React, { useCallback } from "react";
 import { useRouter } from "next/router";
-// swr
+import { observer } from "mobx-react-lite";
 import useSWR, { mutate } from "swr";
-// lucide icons
 import { Plus, ChevronRight, ChevronDown } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ExistingIssuesListModal } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { SubIssuesRootList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/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 {
@@ -39,23 +38,23 @@ export interface ISubIssuesRootLoadersHandler {
   issueId: string;
 }
 
-export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, peekIssue } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    peekIssue: string;
-  };
+const issueService = new IssueService();
+
+export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
+  const { parentIssue, user } = props;
+
+  const { user: userStore, issue: issueStore, issueDetail: issueDetailStore } = useMobxStore();
+  const userRole = userStore.currentProjectRole;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
 
-  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.toString(), projectId.toString(), parentIssue.id)
       : null
   );
 
@@ -114,20 +113,20 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
   };
 
   const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
+    if (!workspaceSlug || !projectId || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
     const issueId = issueCrudOperation?.existing?.issueId;
     const payload = {
       sub_issue_ids: data.map((i) => i.id),
     };
-    await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
+    await issueService.addSubIssues(workspaceSlug.toString(), projectId.toString(), issueId, payload).finally(() => {
       if (issueId) mutate(SUB_ISSUES(issueId));
     });
   };
 
   const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
-    if (!workspaceSlug || !parentIssue || !issue?.id) return;
-    issuesService
-      .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
+    if (!workspaceSlug || !projectId || !parentIssue || !issue?.id) return;
+    issueService
+      .patchIssue(workspaceSlug.toString(), projectId.toString(), issue.id, { parent: null }, user)
       .then(async () => {
         if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
         handleIssuesLoader({ key: "delete", issueId: issue?.id });
@@ -148,8 +147,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",
@@ -159,7 +157,22 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
     });
   };
 
-  const isEditable = memberRole?.isGuest || memberRole?.isViewer ? false : true;
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !user) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      issueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueStore, issueDetailStore, projectId, user, workspaceSlug]
+  );
+
+  const isEditable = userRole === 5 || userRole === 10 ? false : true;
 
   const mutateSubIssues = (parentIssueId: string | null) => {
     if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
@@ -177,9 +190,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) ? (
@@ -195,10 +206,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>
 
@@ -221,11 +229,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
               </div>
 
               {/* issues */}
-              {issuesLoader.visibility.includes(parentIssue?.id) && (
+              {issuesLoader.visibility.includes(parentIssue?.id) && workspaceSlug && projectId && (
                 <div className="border border-b-0 border-custom-border-100">
                   <SubIssuesRootList
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
+                    workspaceSlug={workspaceSlug.toString()}
+                    projectId={projectId.toString()}
                     parentIssue={parentIssue}
                     user={undefined}
                     editable={isEditable}
@@ -234,6 +242,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     handleIssuesLoader={handleIssuesLoader}
                     copyText={copyText}
                     handleIssueCrudOperation={handleIssueCrudOperation}
+                    handleUpdateIssue={handleUpdateIssue}
                   />
                 </div>
               )}
@@ -247,7 +256,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     </>
                   }
                   buttonClassName="whitespace-nowrap"
-                  position="left"
+                  // position="left"
                   noBorder
                   noChevron
                 >
@@ -283,7 +292,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                       </>
                     }
                     buttonClassName="whitespace-nowrap"
-                    position="left"
+                    // position="left"
                     noBorder
                     noChevron
                   >
@@ -320,17 +329,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,7 +352,8 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
           )}
           {isEditable &&
             issueCrudOperation?.delete?.toggle &&
-            issueCrudOperation?.delete?.issueId && (
+            issueCrudOperation?.delete?.issueId &&
+            issueCrudOperation?.delete?.issue && (
               <DeleteIssueModal
                 isOpen={issueCrudOperation?.delete?.toggle}
                 handleClose={() => {
@@ -353,12 +361,10 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                   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
deleted file mode 100644
index 1026f240d..000000000
--- a/web/components/issues/view-select/assignee.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-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";
-// ui
-import { AssigneesList, Avatar, CustomSearchSelect, Icon, Tooltip } from "components/ui";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-import useProjectMembers from "hooks/use-project-members";
-
-type Props = {
-  issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  position?: "left" | "right";
-  tooltipPosition?: "top" | "bottom";
-  selfPositioned?: boolean;
-  customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const ViewAssigneeSelect: React.FC<Props> = ({
-  issue,
-  partialUpdateIssue,
-  position = "left",
-  selfPositioned = false,
-  tooltipPosition = "top",
-  user,
-  isNotAllowed,
-  customButton = false,
-}) => {
-  const [fetchAssignees, setFetchAssignees] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { members } = useProjectMembers(workspaceSlug?.toString(), issue.project, fetchAssignees);
-
-  const options = members?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  const assigneeLabel = (
-    <Tooltip
-      position={tooltipPosition}
-      tooltipHeading="Assignees"
-      tooltipContent={
-        issue.assignee_details.length > 0
-          ? issue.assignee_details.map((assignee) => assignee?.display_name).join(", ")
-          : "No Assignee"
-      }
-    >
-      <div
-        className={`flex ${
-          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center gap-2 text-custom-text-200`}
-      >
-        {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
-          <div className="-my-0.5 flex items-center justify-center gap-2">
-            <AssigneesList userIds={issue.assignees} length={3} showLength={true} />
-          </div>
-        ) : (
-          <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300">
-            <Icon iconName="person" className="text-sm !leading-4" />
-          </div>
-        )}
-      </div>
-    </Tooltip>
-  );
-
-  return (
-    <CustomSearchSelect
-      value={issue.assignees}
-      buttonClassName="!p-0"
-      onChange={(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
-        );
-      }}
-      options={options}
-      {...(customButton ? { customButton: assigneeLabel } : { label: assigneeLabel })}
-      multiple
-      noChevron
-      position={position}
-      disabled={isNotAllowed}
-      onOpen={() => setFetchAssignees(true)}
-      selfPositioned={selfPositioned}
-      width="w-full min-w-[12rem]"
-    />
-  );
-};
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index 5cbc26452..9e409e80b 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -1,54 +1,53 @@
-import { useRouter } from "next/router";
-
 // ui
-import { CustomDatePicker, Tooltip } from "components/ui";
+import { CustomDatePicker } from "components/ui";
+import { Tooltip } from "@plane/ui";
+import { CalendarDays } from "lucide-react";
 // helpers
-import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// services
-import trackEventServices from "services/track-event.service";
+import {
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortDateWithYearFormat,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
-import useIssuesView from "hooks/use-issues-view";
+import { IIssue } from "types";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  onChange: (date: string | null) => void;
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
+  className?: string;
   noBorder?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
+  disabled: boolean;
 };
 
 export const ViewDueDateSelect: React.FC<Props> = ({
   issue,
-  partialUpdateIssue,
+  onChange,
   handleOnOpen,
   handleOnClose,
   tooltipPosition = "top",
+  className = "",
   noBorder = false,
-  user,
-  isNotAllowed,
+  disabled,
 }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { displayFilters } = useIssuesView();
-
   const minDate = issue.start_date ? new Date(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
 
+  const today = new Date();
+  const endDate = new Date(issue.target_date ?? "");
+  const areYearsEqual = endDate.getFullYear() === today.getFullYear();
+
   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
-        className={`group flex-shrink-0 relative max-w-[6.5rem] ${
+        className={`group flex-shrink-0 relative max-w-[6.5rem] ${className} ${
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
@@ -57,38 +56,37 @@ export const ViewDueDateSelect: React.FC<Props> = ({
         }`}
       >
         <CustomDatePicker
-          placeholder="Due date"
           value={issue?.target_date}
-          onChange={(val) => {
-            partialUpdateIssue(
-              {
-                target_date: val,
-              },
-              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_DUE_DATE",
-              user
-            );
-          }}
-          className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
-            displayFilters.layout === "kanban"
-              ? "bg-custom-background-90"
-              : "bg-custom-background-100"
-          }`}
+          onChange={onChange}
+          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          customInput={
+            <div
+              className={`flex items-center justify-center gap-2 px-2 py-1 text-xs cursor-pointer rounded border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80 ${
+                issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
+              }`}
+            >
+              {issue.target_date ? (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>
+                    {areYearsEqual
+                      ? renderShortDate(issue.target_date ?? "", "_ _")
+                      : renderShortMonthDate(issue.target_date ?? "", "_ _")}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>Due Date</span>
+                </>
+              )}
+            </div>
+          }
           minDate={minDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}
           handleOnClose={handleOnClose}
-          disabled={isNotAllowed}
+          disabled={disabled}
         />
       </div>
     </Tooltip>
diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx
index bef060e77..b161eb598 100644
--- a/web/components/issues/view-select/estimate.tsx
+++ b/web/components/issues/view-select/estimate.tsx
@@ -1,42 +1,28 @@
 import React from "react";
-
-import { useRouter } from "next/router";
-
-// services
-import trackEventServices from "services/track-event.service";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect, Tooltip } from "@plane/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IIssue } from "types";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  position?: "left" | "right";
+  onChange: (data: number) => void;
   tooltipPosition?: "top" | "bottom";
-  selfPositioned?: boolean;
   customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
+  disabled: boolean;
 };
 
 export const ViewEstimateSelect: React.FC<Props> = ({
   issue,
-  partialUpdateIssue,
-  position = "left",
+  onChange,
   tooltipPosition = "top",
-  selfPositioned = false,
   customButton = false,
-  user,
-  isNotAllowed,
+  disabled,
 }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
 
   const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
@@ -44,7 +30,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   const estimateLabels = (
     <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
       <div className="flex items-center gap-1 text-custom-text-200">
-        <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
+        <Triangle className="h-3 w-3" />
         {estimateValue ?? "None"}
       </div>
     </Tooltip>
@@ -55,33 +41,17 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   return (
     <CustomSelect
       value={issue.estimate_point}
-      onChange={(val: number) => {
-        partialUpdateIssue({ estimate_point: val }, 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_ESTIMATE",
-          user
-        );
-      }}
+      onChange={onChange}
       {...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
       maxHeight="md"
       noChevron
-      disabled={isNotAllowed}
-      position={position}
-      selfPositioned={selfPositioned}
+      disabled={disabled}
       width="w-full min-w-[8rem]"
     >
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-3 w-3" />
           </span>
           None
         </>
@@ -89,9 +59,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
       {estimatePoints?.map((estimate) => (
         <CustomSelect.Option key={estimate.id} value={estimate.key}>
           <>
-            <span>
-              <PlayIcon className="h-4 w-4 -rotate-90" />
-            </span>
+            <Triangle className="h-3 w-3" />
             {estimate.value}
           </>
         </CustomSelect.Option>
diff --git a/web/components/issues/view-select/index.ts b/web/components/issues/view-select/index.ts
index 99191eb3d..8eb88cb0d 100644
--- a/web/components/issues/view-select/index.ts
+++ b/web/components/issues/view-select/index.ts
@@ -1,6 +1,3 @@
-export * from "./assignee";
 export * from "./due-date";
 export * from "./estimate";
-export * from "./label";
-export * from "./priority";
-export * from "./start-date";
\ No newline at end of file
+export * from "./start-date";
diff --git a/web/components/issues/view-select/label.tsx b/web/components/issues/view-select/label.tsx
deleted file mode 100644
index 3a75763b2..000000000
--- a/web/components/issues/view-select/label.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// component
-import { CreateLabelModal } from "components/labels";
-// ui
-import { CustomSearchSelect, Tooltip } from "components/ui";
-// icons
-import { PlusIcon, TagIcon } from "@heroicons/react/24/outline";
-// types
-import { ICurrentUserResponse, IIssue, IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-
-type Props = {
-  issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  position?: "left" | "right";
-  selfPositioned?: boolean;
-  tooltipPosition?: "top" | "bottom";
-  customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const ViewLabelSelect: React.FC<Props> = ({
-  issue,
-  partialUpdateIssue,
-  position = "left",
-  selfPositioned = false,
-  tooltipPosition = "top",
-  user,
-  isNotAllowed,
-  customButton = false,
-}) => {
-  const [labelModal, setLabelModal] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const options = issueLabels?.map((label) => ({
-    value: label.id,
-    query: label.name,
-    content: (
-      <div className="flex items-center justify-start gap-2">
-        <span
-          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-          style={{
-            backgroundColor: label.color,
-          }}
-        />
-        <span>{label.name}</span>
-      </div>
-    ),
-  }));
-
-  const labelsLabel = (
-    <Tooltip
-      position={tooltipPosition}
-      tooltipHeading="Labels"
-      tooltipContent={
-        issue.labels.length > 0
-          ? issue.labels
-              .map((labelId) => {
-                const label = issueLabels?.find((l) => l.id === labelId);
-
-                return label?.name ?? "";
-              })
-              .join(", ")
-          : "No label"
-      }
-    >
-      <div
-        className={`flex ${
-          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center gap-2 text-custom-text-200`}
-      >
-        {issue.labels.length > 0 ? (
-          <>
-            {issue.labels.slice(0, 4).map((labelId, index) => {
-              const label = issueLabels?.find((l) => l.id === labelId);
-
-              return (
-                <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
-                  <span
-                    className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-200`}
-                    style={{
-                      backgroundColor: label?.color ?? "#000000",
-                    }}
-                  />
-                </div>
-              );
-            })}
-            {issue.labels.length > 4 ? <span>+{issue.labels.length - 4}</span> : null}
-          </>
-        ) : (
-          <>
-            <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
-          </>
-        )}
-      </div>
-    </Tooltip>
-  );
-
-  const footerOption = (
-    <button
-      type="button"
-      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
-      onClick={() => setLabelModal(true)}
-    >
-      <span className="flex items-center justify-start gap-1 text-custom-text-200">
-        <PlusIcon className="h-4 w-4" aria-hidden="true" />
-        <span>Create New Label</span>
-      </span>
-    </button>
-  );
-
-  return (
-    <>
-      {projectId && (
-        <CreateLabelModal
-          isOpen={labelModal}
-          handleClose={() => setLabelModal(false)}
-          projectId={projectId.toString()}
-          user={user}
-        />
-      )}
-      <CustomSearchSelect
-        value={issue.labels}
-        onChange={(data: string[]) => {
-          partialUpdateIssue({ labels_list: data }, issue);
-        }}
-        options={options}
-        {...(customButton ? { customButton: labelsLabel } : { label: labelsLabel })}
-        multiple
-        noChevron
-        position={position}
-        disabled={isNotAllowed}
-        selfPositioned={selfPositioned}
-        footerOption={footerOption}
-        width="w-full min-w-[12rem]"
-      />
-    </>
-  );
-};
diff --git a/web/components/issues/view-select/priority.tsx b/web/components/issues/view-select/priority.tsx
deleted file mode 100644
index 1bdbf3428..000000000
--- a/web/components/issues/view-select/priority.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// services
-import trackEventServices from "services/track-event.service";
-// ui
-import { CustomSelect, Tooltip } from "components/ui";
-// icons
-import { PriorityIcon } from "components/icons/priority-icon";
-// helpers
-import { capitalizeFirstLetter } from "helpers/string.helper";
-// types
-import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
-// constants
-import { PRIORITIES } from "constants/project";
-
-type Props = {
-  issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  position?: "left" | "right";
-  tooltipPosition?: "top" | "bottom";
-  selfPositioned?: boolean;
-  noBorder?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const ViewPrioritySelect: React.FC<Props> = ({
-  issue,
-  partialUpdateIssue,
-  position = "left",
-  tooltipPosition = "top",
-  selfPositioned = false,
-  noBorder = false,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <CustomSelect
-      value={issue.priority}
-      onChange={(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
-        );
-      }}
-      maxHeight="md"
-      customButton={
-        <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"
-              ? "border-red-500/20 bg-red-500"
-              : "border-custom-border-300 bg-custom-background-100"
-          } items-center`}
-        >
-          <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}
-                className={`text-sm ${
-                  issue.priority === "urgent"
-                    ? "text-white"
-                    : issue.priority === "high"
-                    ? "text-orange-500"
-                    : issue.priority === "medium"
-                    ? "text-yellow-500"
-                    : issue.priority === "low"
-                    ? "text-green-500"
-                    : "text-custom-text-200"
-                }`}
-              />
-              {noBorder ? capitalizeFirstLetter(issue.priority ?? "None") : ""}
-            </span>
-          </Tooltip>
-        </button>
-      }
-      noChevron
-      disabled={isNotAllowed}
-      position={position}
-      selfPositioned={selfPositioned}
-    >
-      {PRIORITIES?.map((priority) => (
-        <CustomSelect.Option key={priority} value={priority} className="capitalize">
-          <>
-            <PriorityIcon priority={priority} className="text-sm" />
-            {priority ?? "None"}
-          </>
-        </CustomSelect.Option>
-      ))}
-    </CustomSelect>
-  );
-};
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index 14b78f6ac..f4688be9b 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -1,86 +1,77 @@
-import { useRouter } from "next/router";
-
 // ui
-import { CustomDatePicker, Tooltip } from "components/ui";
+import { CustomDatePicker } from "components/ui";
+import { Tooltip } from "@plane/ui";
+import { CalendarDays } from "lucide-react";
 // helpers
-import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// services
-import trackEventServices from "services/track-event.service";
+import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
-import useIssuesView from "hooks/use-issues-view";
+import { IIssue } from "types";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  onChange: (date: string | null) => void;
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
+  className?: string;
   noBorder?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
+  disabled: boolean;
 };
 
 export const ViewStartDateSelect: React.FC<Props> = ({
   issue,
-  partialUpdateIssue,
+  onChange,
   handleOnOpen,
   handleOnClose,
   tooltipPosition = "top",
+  className = "",
   noBorder = false,
-  user,
-  isNotAllowed,
+  disabled,
 }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { displayFilters } = useIssuesView();
-
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
+  const today = new Date();
+  const startDate = new Date(issue.start_date ?? "");
+  const areYearsEqual = startDate.getFullYear() === today.getFullYear();
 
   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]">
+      <div className={`group flex-shrink-0 relative max-w-[6.5rem] ${className}`}>
         <CustomDatePicker
-          placeholder="Start date"
           value={issue?.start_date}
-          onChange={(val) => {
-            partialUpdateIssue(
-              {
-                start_date: val,
-              },
-              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_DUE_DATE",
-              user
-            );
-          }}
-          className={`${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
-            displayFilters.layout === "kanban"
-              ? "bg-custom-background-90"
-              : "bg-custom-background-100"
-          }`}
+          onChange={onChange}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}
+          customInput={
+            <div
+              className={`flex items-center justify-center gap-2 px-2 py-1 text-xs cursor-pointer rounded border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80 ${
+                issue?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
+              }`}
+            >
+              {issue?.start_date ? (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>
+                    {areYearsEqual
+                      ? renderShortDate(issue?.start_date, "_ _")
+                      : renderShortMonthDate(issue?.start_date, "_ _")}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>Start Date</span>
+                </>
+              )}
+            </div>
+          }
           handleOnClose={handleOnClose}
-          disabled={isNotAllowed}
+          disabled={disabled}
         />
       </div>
     </Tooltip>
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..e148f8231 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -1,26 +1,21 @@
 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";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDown } from "lucide-react";
 // types
-import type { ICurrentUserResponse, IIssueLabels, IState } from "types";
+import type { IIssueLabels, IState } from "types";
 // constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
+import useToast from "hooks/use-toast";
 
 // types
 type Props = {
@@ -28,7 +23,6 @@ type Props = {
   projectId: string;
   handleClose: () => void;
   onSuccess?: (response: IIssueLabels) => void;
-  user: ICurrentUserResponse | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -36,28 +30,34 @@ const defaultValues: Partial<IState> = {
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateLabelModal: React.FC<Props> = ({
-  isOpen,
-  projectId,
-  handleClose,
-  user,
-  onSuccess,
-}) => {
+export const CreateLabelModal: React.FC<Props> = observer((props) => {
+  const { isOpen, projectId, handleClose, onSuccess } = props;
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
     control,
     reset,
     setValue,
+    setFocus,
   } = useForm<IIssueLabels>({
     defaultValues,
   });
 
+  /**
+   * For setting focus on name input
+   */
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus, isOpen]);
+
   useEffect(() => {
     if (isOpen) setValue("color", getRandomLabelColor());
   }, [setValue, isOpen]);
@@ -67,22 +67,24 @@ export const CreateLabelModal: React.FC<Props> = ({
     reset(defaultValues);
   };
 
+  const { setToastAlert } = useToast();
+
   const onSubmit = async (formData: IIssueLabels) => {
     if (!workspaceSlug) return;
 
-    await issuesService
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+    await projectLabelStore
+      .createLabel(workspaceSlug.toString(), projectId.toString(), formData)
       .then((res) => {
-        mutate<IIssueLabels[]>(
-          PROJECT_ISSUE_LABELS(projectId),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
         onClose();
         if (onSuccess) onSuccess(res);
       })
       .catch((error) => {
-        console.log(error);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.error ?? "Error while adding the label",
+        });
+        reset(formData);
       });
   };
 
@@ -98,7 +100,7 @@ export const CreateLabelModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -112,13 +114,10 @@ export const CreateLabelModal: React.FC<Props> = ({
               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 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">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-custom-shadow-md 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">
@@ -138,7 +137,7 @@ export const CreateLabelModal: React.FC<Props> = ({
                                   }}
                                 />
                               )}
-                              <ChevronDownIcon
+                              <ChevronDown
                                 className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
@@ -176,27 +175,37 @@ 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}
+                              tabIndex={1}
+                              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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Creating Label..." : "Create Label"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
@@ -206,4 +215,4 @@ export const CreateLabelModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 264fb7901..f27bd517e 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -1,26 +1,20 @@
 import React, { forwardRef, useEffect } 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";
-// react-color
 import { TwitterPicker } from "react-color";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+
+// stores
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
+import useToast from "hooks/use-toast";
 
 type Props = {
   labelForm: boolean;
@@ -35,23 +29,27 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
-  function CreateUpdateLabelInline(props, ref) {
+export const CreateUpdateLabelInline = observer(
+  forwardRef<HTMLFormElement, Props>(function CreateUpdateLabelInline(props, ref) {
     const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
 
+    // router
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
-    const { user } = useUserAuth();
+    // store
+    const { projectLabel: projectLabelStore } = useMobxStore();
+
+    const { setToastAlert } = useToast();
 
     const {
       handleSubmit,
       control,
-      register,
       reset,
       formState: { errors, isSubmitting },
       watch,
       setValue,
+      setFocus,
     } = useForm<IIssueLabels>({
       defaultValues,
     });
@@ -65,63 +63,58 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
     const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
-      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
-          );
+      await projectLabelStore
+        .createLabel(workspaceSlug.toString(), projectId.toString(), formData)
+        .then(() => {
           handleClose();
+          reset(defaultValues);
+        })
+        .catch((error) => {
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: error?.error ?? "Error while adding the label",
+          });
+          reset(formData);
         });
     };
 
     const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
-      await issuesService
-        .patchIssueLabel(
-          workspaceSlug as string,
-          projectId as string,
-          labelToUpdate?.id ?? "",
-          formData,
-          user
-        )
+      await projectLabelStore
+        .updateLabel(workspaceSlug.toString(), projectId.toString(), labelToUpdate?.id!, formData)
         .then(() => {
           reset(defaultValues);
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) =>
-              prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
-            false
-          );
           handleClose();
+        })
+        .catch((error) => {
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: error?.error ?? "Error while updating the label",
+          });
+          reset(formData);
         });
     };
 
+    /**
+     * For settings focus on name input
+     */
     useEffect(() => {
-      if (!labelForm && isUpdating) return;
-
-      reset();
-    }, [labelForm, isUpdating, reset]);
+      setFocus("name");
+    }, [setFocus, labelForm]);
 
     useEffect(() => {
       if (!labelToUpdate) return;
 
-      setValue(
-        "color",
-        labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
-      );
       setValue("name", labelToUpdate.name);
+      setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
     }, [labelToUpdate, setValue]);
 
     useEffect(() => {
       if (labelToUpdate) {
-        setValue(
-          "color",
-          labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
-        );
+        setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
         return;
       }
 
@@ -129,11 +122,15 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
     }, [labelToUpdate, setValue]);
 
     return (
-      <div
+      <form
+        ref={ref}
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
+        }}
         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">
@@ -180,29 +177,34 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
           </Popover>
         </div>
         <div className="flex flex-1 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={() => handleClose()}>Cancel</SecondaryButton>
-        {isUpdating ? (
-          <PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
-            {isSubmitting ? "Updating" : "Update"}
-          </PrimaryButton>
-        ) : (
-          <PrimaryButton onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
-            {isSubmitting ? "Adding" : "Add"}
-          </PrimaryButton>
-        )}
-      </div>
+        <Button variant="neutral-primary" onClick={() => handleClose()}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
+        </Button>
+      </form>
     );
-  }
+  })
 );
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 8535539f9..f8faeef33 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -1,37 +1,39 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
+import { AlertTriangle } from "lucide-react";
 // 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";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import type { IIssueLabels } from "types";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: IIssueLabels | null;
-  user: ICurrentUserResponse | undefined;
 };
 
-export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+export const DeleteLabelModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data } = props;
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // hooks
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -44,23 +46,19 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
 
     setIsDeleteLoading(true);
 
-    mutate<IIssueLabels[]>(
-      PROJECT_ISSUE_LABELS(projectId.toString()),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
-      false
-    );
-
-    await issuesService
-      .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
-      .then(() => handleClose())
-      .catch(() => {
+    await projectLabelStore
+      .deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
         setIsDeleteLoading(false);
 
-        mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
+        const error = err?.error || "Label could not be deleted. Please try again.";
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Label could not be deleted. Please try again.",
+          message: error,
         });
       });
   };
@@ -77,7 +75,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -91,37 +89,33 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-200 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <AlertTriangle 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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -130,4 +124,4 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/labels/index.ts b/web/components/labels/index.ts
index 0c0629d92..c7316b037 100644
--- a/web/components/labels/index.ts
+++ b/web/components/labels/index.ts
@@ -1,6 +1,8 @@
 export * from "./create-label-modal";
 export * from "./create-update-label-inline";
 export * from "./delete-label-modal";
+export * from "./label-select";
 export * from "./labels-list-modal";
-export * from "./single-label-group";
-export * from "./single-label";
+export * from "./project-setting-label-group";
+export * from "./project-setting-label-list-item";
+export * from "./project-setting-label-list";
diff --git a/web/components/labels/label-select.tsx b/web/components/labels/label-select.tsx
new file mode 100644
index 000000000..162c78b96
--- /dev/null
+++ b/web/components/labels/label-select.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+
+type Props = {
+  value: string[];
+  onChange: (data: string[]) => void;
+  labels: IIssueLabels[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  maxRender?: number;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const LabelSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    labels,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    maxRender = 2,
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = labels?.map((label) => ({
+    value: label.id,
+    query: label.name,
+    content: (
+      <div className="flex items-center justify-start gap-2">
+        <span
+          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color,
+          }}
+        />
+        <span>{label.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      multiple
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button ref={setReferenceElement} type="button" className="h-full w-full">
+          {value.length > 0 ? (
+            value.length <= maxRender ? (
+              <div className="flex items-center gap-2 px-4 overflow-x-scroll">
+                {labels
+                  ?.filter((l) => value.includes(l.id))
+                  .map((label) => (
+                    <div
+                      key={label.id}
+                      className="flex items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
+                    >
+                      <div className="flex items-center gap-1.5 text-custom-text-200">
+                        <span
+                          className="h-2 w-2 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor: label?.color ?? "#000000",
+                          }}
+                        />
+                        {label.name}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            ) : (
+              <div
+                className={`h-full flex items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-4 text-xs ${buttonClassName}`}
+              >
+                <Tooltip
+                  position="top"
+                  tooltipHeading="Labels"
+                  tooltipContent={labels
+                    ?.filter((l) => value.includes(l.id))
+                    .map((l) => l.name)
+                    .join(", ")}
+                >
+                  <div className="h-full flex items-center gap-1.5 text-custom-text-200">
+                    <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+                    {`${value.length} Labels`}
+                  </div>
+                </Tooltip>
+              </div>
+            )
+          ) : (
+            <div
+              className={`flex items-center justify-between gap-1 w-full text-xs px-4 ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }  ${buttonClassName}`}
+            >
+              Select labels
+            </div>
+          )}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className={`h-3.5 w-3.5`} />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/web/components/labels/labels-list-modal.tsx b/web/components/labels/labels-list-modal.tsx
index 9042bde3a..e3176d8a0 100644
--- a/web/components/labels/labels-list-modal.tsx
+++ b/web/components/labels/labels-list-modal.tsx
@@ -1,40 +1,48 @@
 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";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // icons
-import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
+import { LayerStackIcon } from "@plane/ui";
+import { Search } from "lucide-react";
 // types
-import { ICurrentUserResponse, IIssueLabels } from "types";
-// constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IIssueLabels } from "types";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   parent: IIssueLabels | undefined;
-  user: ICurrentUserResponse | undefined;
 };
 
-export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent, user }) => {
-  const [query, setQuery] = useState("");
+export const LabelsListModal: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, parent } = props;
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+  // store
+  const { projectLabel: projectLabelStore, project: projectStore } = useMobxStore();
+
+  // states
+  const [query, setQuery] = useState("");
+
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
+  // derived values
+  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
+
   const filteredLabels: IIssueLabels[] =
     query === ""
       ? issueLabels ?? []
@@ -48,27 +56,9 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
   const addChildLabel = async (label: IIssueLabels) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate(
-      (prevData: any) =>
-        prevData?.map((l: any) => {
-          if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
-
-          return l;
-        }),
-      false
-    );
-
-    await issuesService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
-        label.id,
-        {
-          parent: parent?.id ?? "",
-        },
-        user
-      )
-      .then(() => mutate());
+    await projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+      parent: parent?.id!,
+    });
   };
 
   return (
@@ -83,7 +73,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -96,10 +86,10 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
               <Combobox>
                 <div className="relative m-1">
-                  <MagnifyingGlassIcon
+                  <Search
                     className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                     aria-hidden="true"
                   />
@@ -114,9 +104,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) => {
@@ -125,7 +113,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                           if (
                             (label.parent === "" || label.parent === null) && // issue does not have any other parent
                             label.id !== parent?.id && // issue is not itself
-                            children?.length === 0 // issue doesn't have any othe children
+                            children?.length === 0 // issue doesn't have any other children
                           )
                             return (
                               <Combobox.Option
@@ -160,7 +148,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
 
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
-                    <RectangleStackIcon
+                    <LayerStackIcon
                       className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -176,4 +164,4 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
similarity index 69%
rename from web/components/labels/single-label-group.tsx
rename to web/components/labels/project-setting-label-group.tsx
index 47a771174..8db46cb1d 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -1,82 +1,47 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Disclosure, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
-import {
-  ChevronDownIcon,
-  XMarkIcon,
-  PlusIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { Component, X } from "lucide-react";
+import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
 // types
-import { ICurrentUserResponse, IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IIssueLabels } from "types";
 
 type Props = {
   label: IIssueLabels;
   labelChildren: IIssueLabels[];
-  addLabelToGroup: (parentLabel: IIssueLabels) => void;
-  editLabel: (label: IIssueLabels) => void;
   handleLabelDelete: () => void;
-  user: ICurrentUserResponse | undefined;
+  editLabel: (label: IIssueLabels) => void;
+  addLabelToGroup: (parentLabel: IIssueLabels) => void;
 };
 
-export const SingleLabelGroup: React.FC<Props> = ({
-  label,
-  labelChildren,
-  addLabelToGroup,
-  editLabel,
-  handleLabelDelete,
-  user,
-}) => {
+export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
+  const { label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete } = props;
+
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
   const removeFromGroup = (label: IIssueLabels) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate<IIssueLabels[]>(
-      PROJECT_ISSUE_LABELS(projectId as string),
-      (prevData) =>
-        prevData?.map((l) => {
-          if (l.id === label.id) return { ...l, parent: null };
-
-          return l;
-        }),
-      false
-    );
-
-    issuesService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
-        label.id,
-        {
-          parent: null,
-        },
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUE_LABELS(projectId as string));
-      });
+    projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+      parent: null,
+    });
   };
 
   return (
     <Disclosure
       as="div"
-      className="rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
+      className="rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
       defaultOpen
     >
       {({ open }) => (
@@ -90,29 +55,27 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <CustomMenu ellipsis buttonClassName="!text-custom-sidebar-text-400">
                 <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
                   <span className="flex items-center justify-start gap-2">
-                    <PlusIcon className="h-4 w-4" />
+                    <Plus className="h-4 w-4" />
                     <span>Add more labels</span>
                   </span>
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={() => editLabel(label)}>
                   <span className="flex items-center justify-start gap-2">
-                    <PencilIcon className="h-4 w-4" />
+                    <Pencil className="h-4 w-4" />
                     <span>Edit label</span>
                   </span>
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleLabelDelete}>
                   <span className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-4 w-4" />
+                    <Trash2 className="h-4 w-4" />
                     <span>Delete label</span>
                   </span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
               <Disclosure.Button>
                 <span>
-                  <ChevronDownIcon
-                    className={`h-4 w-4 text-custom-sidebar-text-400 ${
-                      !open ? "rotate-90 transform" : ""
-                    }`}
+                  <ChevronDown
+                    className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
                   />
                 </span>
               </Disclosure.Button>
@@ -132,14 +95,13 @@ export const SingleLabelGroup: React.FC<Props> = ({
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between border-b border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
+                    className="group flex items-center justify-between border-b-[0.5px] border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
                   >
                     <h5 className="flex items-center gap-3">
                       <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}
@@ -155,13 +117,13 @@ export const SingleLabelGroup: React.FC<Props> = ({
                         >
                           <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
                             <span className="flex items-center justify-start gap-2">
-                              <XMarkIcon className="h-4 w-4" />
+                              <X className="h-4 w-4" />
                               <span>Remove from group</span>
                             </span>
                           </CustomMenu.MenuItem>
                           <CustomMenu.MenuItem onClick={() => editLabel(child)}>
                             <span className="flex items-center justify-start gap-2">
-                              <PencilIcon className="h-4 w-4" />
+                              <Pencil className="h-4 w-4" />
                               <span>Edit label</span>
                             </span>
                           </CustomMenu.MenuItem>
@@ -169,10 +131,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>
@@ -186,4 +145,4 @@ export const SingleLabelGroup: React.FC<Props> = ({
       )}
     </Disclosure>
   );
-};
+});
diff --git a/web/components/labels/single-label.tsx b/web/components/labels/project-setting-label-list-item.tsx
similarity index 80%
rename from web/components/labels/single-label.tsx
rename to web/components/labels/project-setting-label-list-item.tsx
index c163a3735..fec3bcd2e 100644
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/project-setting-label-list-item.tsx
@@ -3,12 +3,11 @@ import React, { useRef, useState } from "react";
 //hook
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { PencilIcon } from "@heroicons/react/24/outline";
-import { Component, X } from "lucide-react";
+import { Component, X, Pencil } from "lucide-react";
 
 type Props = {
   label: IIssueLabels;
@@ -17,19 +16,16 @@ type Props = {
   handleLabelDelete: () => void;
 };
 
-export const SingleLabel: React.FC<Props> = ({
-  label,
-  addLabelToGroup,
-  editLabel,
-  handleLabelDelete,
-}) => {
+export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
+  const { label, addLabelToGroup, editLabel, handleLabelDelete } = props;
+
   const [isMenuActive, setIsMenuActive] = useState(false);
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
   return (
-    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
+    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
       <div className="flex items-center gap-3">
         <span
           className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
@@ -39,6 +35,7 @@ export const SingleLabel: React.FC<Props> = ({
         />
         <h6 className="text-sm">{label.name}</h6>
       </div>
+
       <div
         ref={actionSectionRef}
         className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
@@ -60,16 +57,13 @@ export const SingleLabel: React.FC<Props> = ({
           </CustomMenu.MenuItem>
           <CustomMenu.MenuItem onClick={() => editLabel(label)}>
             <span className="flex items-center justify-start gap-2">
-              <PencilIcon className="h-4 w-4" />
+              <Pencil className="h-4 w-4" />
               <span>Edit label</span>
             </span>
           </CustomMenu.MenuItem>
         </CustomMenu>
         <div className="py-0.5">
-          <button
-            className="flex h-4 w-4 items-center justify-start gap-2"
-            onClick={handleLabelDelete}
-          >
+          <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={handleLabelDelete}>
             <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
           </button>
         </div>
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
new file mode 100644
index 000000000..84bda8f97
--- /dev/null
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -0,0 +1,166 @@
+import React, { useState, useRef } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  CreateUpdateLabelInline,
+  DeleteLabelModal,
+  LabelsListModal,
+  ProjectSettingLabelItem,
+  ProjectSettingLabelGroup,
+} from "components/labels";
+// ui
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
+// images
+import emptyLabel from "public/empty-state/label.svg";
+// types
+import { IIssueLabels } from "types";
+
+export const ProjectSettingsLabelList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // states
+  const [labelForm, setLabelForm] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [labelsListModal, setLabelsListModal] = useState(false);
+  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
+  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
+
+  // ref
+  const scrollToRef = useRef<HTMLFormElement>(null);
+
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
+
+  const newLabel = () => {
+    setIsUpdating(false);
+    setLabelForm(true);
+  };
+
+  const addLabelToGroup = (parentLabel: IIssueLabels) => {
+    setLabelsListModal(true);
+    setParentLabel(parentLabel);
+  };
+
+  const editLabel = (label: IIssueLabels) => {
+    setLabelForm(true);
+    setIsUpdating(true);
+    setLabelToUpdate(label);
+  };
+
+  return (
+    <>
+      <LabelsListModal isOpen={labelsListModal} parent={parentLabel} handleClose={() => setLabelsListModal(false)} />
+      <DeleteLabelModal
+        isOpen={!!selectDeleteLabel}
+        data={selectDeleteLabel ?? null}
+        onClose={() => setSelectDeleteLabel(null)}
+      />
+
+      <div className="flex items-center py-3.5 border-b border-custom-border-100 justify-between">
+        <h3 className="text-xl font-medium">Labels</h3>
+        <Button variant="primary" onClick={newLabel} size="sm">
+          Add label
+        </Button>
+      </div>
+      <div className="space-y-3 py-6 h-full w-full">
+        {labelForm && (
+          <CreateUpdateLabelInline
+            labelForm={labelForm}
+            setLabelForm={setLabelForm}
+            isUpdating={isUpdating}
+            labelToUpdate={labelToUpdate}
+            ref={scrollToRef}
+            onClose={() => {
+              setLabelForm(false);
+              setIsUpdating(false);
+              setLabelToUpdate(null);
+            }}
+          />
+        )}
+
+        {/* labels */}
+        {issueLabels &&
+          issueLabels.map((label) => {
+            const children = issueLabels?.filter((l) => l.parent === label.id);
+
+            if (children && children.length === 0) {
+              if (!label.parent)
+                return (
+                  <ProjectSettingLabelItem
+                    key={label.id}
+                    label={label}
+                    addLabelToGroup={() => addLabelToGroup(label)}
+                    editLabel={(label) => {
+                      editLabel(label);
+                      scrollToRef.current?.scrollIntoView({
+                        behavior: "smooth",
+                      });
+                    }}
+                    handleLabelDelete={() => setSelectDeleteLabel(label)}
+                  />
+                );
+            } else {
+              return (
+                <ProjectSettingLabelGroup
+                  key={label.id}
+                  label={label}
+                  labelChildren={children}
+                  addLabelToGroup={addLabelToGroup}
+                  editLabel={(label) => {
+                    editLabel(label);
+                    scrollToRef.current?.scrollIntoView({
+                      behavior: "smooth",
+                    });
+                  }}
+                  handleLabelDelete={() => setSelectDeleteLabel(label)}
+                />
+              );
+            }
+          })}
+
+        {/* loading state */}
+        {!issueLabels && (
+          <Loader className="space-y-5">
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+          </Loader>
+        )}
+
+        {/* empty state */}
+        {issueLabels && issueLabels.length === 0 && (
+          <EmptyState
+            title="No labels yet"
+            description="Create labels to help organize and filter issues in you project"
+            image={emptyLabel}
+            primaryButton={{
+              text: "Add label",
+              onClick: () => newLabel(),
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 9faede08f..45c951150 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -1,60 +1,55 @@
 import React, { 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";
 // 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";
+import { AlertTriangle } from "lucide-react";
 // types
-import type { ICurrentUserResponse, IModule } from "types";
-// fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
+import type { IModule } from "types";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
+  data: IModule;
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IModule;
-  user: ICurrentUserResponse | undefined;
+  onClose: () => void;
 };
 
-export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
+export const DeleteModuleModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
+  const { module: moduleStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsDeleteLoading(false);
   };
 
   const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId) return;
+
     setIsDeleteLoading(true);
 
-    if (!workspaceSlug || !projectId || !data) return;
-
-    mutate<IModule[]>(
-      MODULE_LIST(projectId as string),
-      (prevData) => prevData?.filter((m) => m.id !== data.id),
-      false
-    );
-
-    await modulesService
-      .deleteModule(workspaceSlug as string, projectId as string, data.id, user)
+    await moduleStore
+      .deleteModule(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
         if (moduleId) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
         handleClose();
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Module deleted successfully.",
+        });
       })
       .catch(() => {
         setToastAlert({
@@ -62,6 +57,8 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
           title: "Error!",
           message: "Module could not be deleted. Please try again.",
         });
+      })
+      .finally(() => {
         setIsDeleteLoading(false);
       });
   };
@@ -78,7 +75,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -92,40 +89,33 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <AlertTriangle 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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -134,4 +124,4 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 2715ba266..d47184907 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -1,18 +1,20 @@
 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";
+import { IssueProjectSelect } from "components/issues/select";
 
 type Props = {
   handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
   handleClose: () => void;
   status: boolean;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
   data?: IModule;
 };
 
@@ -21,19 +23,32 @@ const defaultValues: Partial<IModule> = {
   description: "",
   status: "backlog",
   lead: null,
-  members_list: [],
+  members: [],
 };
 
-export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+export const ModuleForm: React.FC<Props> = ({
+  handleFormSubmit,
+  handleClose,
+  status,
+  projectId,
+  setActiveProject,
+  data,
+}) => {
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
     control,
     reset,
   } = useForm<IModule>({
-    defaultValues,
+    defaultValues: {
+      project: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      status: data?.status || "backlog",
+      lead: data?.lead || null,
+      members: data?.members || [],
+    },
   });
 
   const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
@@ -63,37 +78,65 @@ 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>
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
+        </div>
+
         <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="Module Title"
+                  className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
+                />
+              )}
             />
           </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}
+                  onChange={onChange}
+                  placeholder="Description..."
+                  className="h-24 w-full resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
             />
           </div>
           <div className="flex flex-wrap items-center gap-2">
@@ -129,23 +172,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}>
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating Module..."
@@ -153,7 +194,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..5b527073a 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "components/ui";
-// icons
-import { ModuleStatusIcon } from "components/icons";
+import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 // types
@@ -27,16 +25,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..ee86cae27 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -1,78 +1,32 @@
-import { FC } from "react";
-
 import { useRouter } from "next/router";
-
-import { KeyedMutator } from "swr";
-
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useUser from "hooks/use-user";
-import useProjectDetails from "hooks/use-project-details";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
-import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
+import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
+import { ModuleGanttBlock } from "components/modules";
 // types
 import { IModule } from "types";
 
-type Props = {
-  modules: IModule[];
-  mutateModules: KeyedMutator<IModule[]>;
-};
-
-export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules }) => {
+export const ModulesListGanttChartView: React.FC = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
+  // store
+  const { project: projectStore, module: moduleStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  const modules = moduleStore.projectModules;
 
   const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
-    if (!workspaceSlug || !user) return;
+    if (!workspaceSlug) return;
 
-    mutateModules((prevData: any) => {
-      if (!prevData) return prevData;
-
-      const newList = prevData.map((p: any) => ({
-        ...p,
-        ...(p.id === module.id
-          ? {
-              start_date: payload.start_date ? payload.start_date : p.start_date,
-              target_date: payload.target_date ? payload.target_date : p.target_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);
-      }
-
-      return newList;
-    }, false);
-
-    const newPayload: any = { ...payload };
-
-    if (newPayload.sort_order && payload.sort_order)
-      newPayload.sort_order = payload.sort_order.newSortOrder;
-
-    modulesService.patchModule(
-      workspaceSlug.toString(),
-      module.project,
-      module.id,
-      newPayload,
-      user
-    );
+    moduleStore.updateModuleGanttStructure(workspaceSlug.toString(), module.project, module, payload);
   };
 
   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,
@@ -82,7 +36,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
           }))
       : [];
 
-  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+  const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
 
   return (
     <div className="w-full h-full overflow-y-auto">
@@ -90,9 +44,9 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
         title="Modules"
         loaderTitle="Modules"
         blocks={modules ? blockFormat(modules) : null}
+        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        SidebarBlockRender={ModuleGanttSidebarBlock}
-        BlockRender={ModuleGanttBlock}
+        blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
@@ -100,4 +54,4 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
       />
     </div>
   );
-};
+});
diff --git a/web/components/modules/index.ts b/web/components/modules/index.ts
index 2a7f54fb3..c87ea79d2 100644
--- a/web/components/modules/index.ts
+++ b/web/components/modules/index.ts
@@ -4,5 +4,8 @@ export * from "./delete-module-modal";
 export * from "./form";
 export * from "./gantt-chart";
 export * from "./modal";
+export * from "./modules-list-view";
 export * from "./sidebar";
-export * from "./single-module-card";
+export * from "./module-card-item";
+export * from "./module-list-item";
+export * from "./module-peek-overview";
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index e1aec085f..297dba3bb 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -1,29 +1,22 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ModuleForm } from "components/modules";
-// services
-import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import type { ICurrentUserResponse, IModule } from "types";
-// fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
+import type { IModule } from "types";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
   data?: IModule;
-  user: ICurrentUserResponse | undefined;
+  workspaceSlug: string;
+  projectId: string;
 };
 
 const defaultValues: Partial<IModule> = {
@@ -31,18 +24,23 @@ const defaultValues: Partial<IModule> = {
   description: "",
   status: "backlog",
   lead: null,
-  members_list: [],
+  members: [],
 };
 
-export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, workspaceSlug, projectId } = props;
+
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const { project: projectStore, module: moduleStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setIsOpen(false);
     reset(defaultValues);
+    onClose();
   };
 
   const { reset } = useForm<IModule>({
@@ -50,10 +48,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
   });
 
   const createModule = async (payload: Partial<IModule>) => {
-    await modulesService
-      .createModule(workspaceSlug as string, projectId as string, payload, user)
+    if (!workspaceSlug || !projectId) return;
+
+    await moduleStore
+      .createModule(workspaceSlug.toString(), projectId.toString(), payload)
       .then(() => {
-        mutate(MODULE_LIST(projectId as string));
         handleClose();
 
         setToastAlert({
@@ -72,19 +71,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
   };
 
   const updateModule = async (payload: Partial<IModule>) => {
-    await modulesService
-      .updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload, user)
-      .then((res) => {
-        mutate<IModule[]>(
-          MODULE_LIST(projectId as string),
-          (prevData) =>
-            prevData?.map((p) => {
-              if (p.id === res.id) return { ...p, ...payload };
+    if (!workspaceSlug || !projectId || !data) return;
 
-              return p;
-            }),
-          false
-        );
+    await moduleStore
+      .updateModuleDetails(workspaceSlug.toString(), projectId.toString(), data.id, payload)
+      .then(() => {
         handleClose();
 
         setToastAlert({
@@ -107,13 +98,33 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
 
     const payload: Partial<IModule> = {
       ...formData,
-      members_list: formData.members,
     };
 
     if (!data) await createModule(payload);
     else await updateModule(payload);
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -126,11 +137,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <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">
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -140,11 +151,13 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
               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-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
                   status={data ? true : false}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
                   data={data}
                 />
               </Dialog.Panel>
@@ -154,4 +167,4 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
new file mode 100644
index 000000000..ffe9d6cbe
--- /dev/null
+++ b/web/components/modules/module-card-item.tsx
@@ -0,0 +1,252 @@
+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";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// ui
+import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
+// icons
+import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  module: IModule;
+};
+
+export const ModuleCardItem: React.FC<Props> = observer((props) => {
+  const { module } = props;
+
+  const [editModal, setEditModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { module: moduleStore } = useMobxStore();
+
+  const moduleTotalIssues =
+    module.backlog_issues +
+    module.unstarted_issues +
+    module.started_issues +
+    module.completed_issues +
+    module.cancelled_issues;
+
+  const completionPercentage = (module.completed_issues / moduleTotalIssues) * 100;
+
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+
+  const isDateValid = module.target_date || module.start_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
+
+  const issueCount = module
+    ? moduleTotalIssues === 0
+      ? "0 Issue"
+      : moduleTotalIssues === module.completed_issues
+      ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
+      : `${module.completed_issues}/${moduleTotalIssues} Issues`
+    : "0 Issue";
+
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the module to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the module from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditModal(true);
+  };
+
+  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekModule: module.id },
+    });
+  };
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateModuleModal
+          isOpen={editModal}
+          onClose={() => setEditModal(false)}
+          data={module}
+          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip tooltipContent={module.name} position="top">
+                <span className="text-base font-medium truncate">{module.name}</span>
+              </Tooltip>
+              <div className="flex items-center gap-2">
+                {moduleStatus && (
+                  <span
+                    className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                  >
+                    {moduleStatus.label}
+                  </span>
+                )}
+                <button onClick={openModuleOverview}>
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
+              </div>
+              {module.members_detail.length > 0 && (
+                <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
+                  <div className="flex items-center gap-1 cursor-default">
+                    <AvatarGroup showTooltip={false}>
+                      {module.members_detail.map((member) => (
+                        <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+
+            <Tooltip
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex items-center w-full">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between">
+              {isDateValid ? (
+                <>
+                  <span className="text-xs text-custom-text-300">
+                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                    {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                  </span>
+                </>
+              ) : (
+                <span className="text-xs text-custom-text-400">No due date</span>
+              )}
+
+              <div className="flex items-center gap-1.5 z-10">
+                {module.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  </button>
+                )}
+                <CustomMenu width="auto" ellipsis className="z-10">
+                  <CustomMenu.MenuItem onClick={handleEditModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Edit module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3 w-3" />
+                      <span>Copy module link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+});
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
new file mode 100644
index 000000000..3489311b9
--- /dev/null
+++ b/web/components/modules/module-list-item.tsx
@@ -0,0 +1,226 @@
+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";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// ui
+import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
+// icons
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  module: IModule;
+};
+
+export const ModuleListItem: React.FC<Props> = observer((props) => {
+  const { module } = props;
+
+  const [editModal, setEditModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { module: moduleStore } = useMobxStore();
+
+  const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
+
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+
+  const renderDate = module.start_date || module.target_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const completedModuleCheck = module.status === "completed";
+
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the module to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the module from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditModal(true);
+  };
+
+  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekModule: module.id },
+    });
+  };
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateModuleModal
+          isOpen={editModal}
+          onClose={() => setEditModal(false)}
+          data={module}
+          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+          <div className="flex items-center gap-3 w-full truncate">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {completedModuleCheck ? (
+                    progress === 100 ? (
+                      <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                    ) : (
+                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    )
+                  ) : (
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                  )}
+                </CircularProgressIndicator>
+              </span>
+              <Tooltip tooltipContent={module.name} position="top">
+                <span className="text-base font-medium truncate">{module.name}</span>
+              </Tooltip>
+            </div>
+            <button onClick={openModuleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
+            <div className="flex items-center justify-center">
+              {moduleStatus && (
+                <span
+                  className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                >
+                  {moduleStatus.label}
+                </span>
+              )}
+            </div>
+
+            {renderDate && (
+              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                {" - "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            )}
+
+            <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
+              <div className="flex items-center justify-center gap-1 cursor-default w-16">
+                {module.members_detail.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {module.members_detail.map((member) => (
+                      <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                    ))}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {module.is_favorite ? (
+              <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
+                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+              </button>
+            ) : (
+              <button type="button" onClick={handleAddToFavorites} className="z-[1]">
+                <Star className="h-3.5 w-3.5 text-custom-text-300" />
+              </button>
+            )}
+
+            <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+              <CustomMenu.MenuItem onClick={handleEditModule}>
+                <span className="flex items-center justify-start gap-2">
+                  <Pencil className="h-3 w-3" />
+                  <span>Edit module</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                <span className="flex items-center justify-start gap-2">
+                  <Trash2 className="h-3 w-3" />
+                  <span>Delete module</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <span className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-3 w-3" />
+                  <span>Copy module link</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+});
diff --git a/web/components/modules/module-peek-overview.tsx b/web/components/modules/module-peek-overview.tsx
new file mode 100644
index 000000000..e5528cdcf
--- /dev/null
+++ b/web/components/modules/module-peek-overview.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ModuleDetailsSidebar } from "./sidebar";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+  const router = useRouter();
+  const { peekModule } = router.query;
+
+  const ref = React.useRef(null);
+
+  const { module: moduleStore } = useMobxStore();
+  const { fetchModuleDetails } = moduleStore;
+
+  const handleClose = () => {
+    delete router.query.peekModule;
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query },
+    });
+  };
+
+  useEffect(() => {
+    if (!peekModule) return;
+
+    fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
+  }, [fetchModuleDetails, peekModule, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekModule && (
+        <div
+          ref={ref}
+          className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+          style={{
+            boxShadow:
+              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+          }}
+        >
+          <ModuleDetailsSidebar moduleId={peekModule?.toString() ?? ""} handleClose={handleClose} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
new file mode 100644
index 000000000..8553ca865
--- /dev/null
+++ b/web/components/modules/modules-list-view.tsx
@@ -0,0 +1,94 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
+import { EmptyState } from "components/common";
+// ui
+import { Loader } from "@plane/ui";
+// assets
+import emptyModule from "public/empty-state/module.svg";
+
+export const ModulesListView: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, peekModule } = router.query;
+
+  const { module: moduleStore, commandPalette: commandPaletteStore } = useMobxStore();
+
+  const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
+
+  const modulesList = moduleStore.projectModules;
+
+  if (!modulesList)
+    return (
+      <Loader className="grid grid-cols-3 gap-4 p-8">
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+      </Loader>
+    );
+
+  return (
+    <>
+      {modulesList.length > 0 ? (
+        <>
+          {modulesView === "list" && (
+            <div className="h-full overflow-y-auto">
+              <div className="flex justify-between h-full w-full">
+                <div className="flex flex-col h-full w-full overflow-y-auto">
+                  {modulesList.map((module) => (
+                    <ModuleListItem key={module.id} module={module} />
+                  ))}
+                </div>
+                <ModulePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </div>
+            </div>
+          )}
+          {modulesView === "grid" && (
+            <div className="h-full w-full">
+              <div className="flex justify-between h-full w-full">
+                <div
+                  className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
+                    peekModule
+                      ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                      : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+                  } auto-rows-max transition-all `}
+                >
+                  {modulesList.map((module) => (
+                    <ModuleCardItem key={module.id} module={module} />
+                  ))}
+                </div>
+                <ModulePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </div>
+            </div>
+          )}
+          {modulesView === "gantt_chart" && <ModulesListGanttChartView />}
+        </>
+      ) : (
+        <EmptyState
+          title="Manage your project with modules"
+          description="Modules are smaller, focused projects that help you group and organize issues."
+          image={emptyModule}
+          primaryButton={{
+            icon: <Plus className="h-4 w-4" />,
+            text: "New Module",
+            onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
index e102cc21f..84da54748 100644
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@@ -1,16 +1,12 @@
 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 { ProjectMemberService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
 // icons
-import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { UserCircle } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -19,6 +15,8 @@ type Props = {
   onChange: () => void;
 };
 
+const projectMemberService = new ProjectMemberService();
+
 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)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -35,7 +33,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -50,14 +48,14 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       label={
         <div className="flex items-center gap-2">
           {selectedOption ? (
-            <Avatar user={selectedOption} />
+            <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
           ) : (
-            <UserCircleIcon className="h-4 w-4 text-custom-text-200" />
+            <UserCircle className="h-3 w-3 text-custom-text-300" />
           )}
           {selectedOption ? (
             selectedOption?.display_name
           ) : (
-            <span className="text-custom-text-200">Lead</span>
+            <span className={`${selectedOption ? "text-custom-text-200" : "text-custom-text-300"}`}>Lead</span>
           )}
         </div>
       }
diff --git a/web/components/modules/select/members.tsx b/web/components/modules/select/members.tsx
index a6e75f3a6..212b51cac 100644
--- a/web/components/modules/select/members.tsx
+++ b/web/components/modules/select/members.tsx
@@ -1,15 +1,10 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectServices from "services/project.service";
+import { ProjectMemberService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -18,6 +13,8 @@ type Props = {
   onChange: () => void;
 };
 
+const projectMemberService = new ProjectMemberService();
+
 export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -25,7 +22,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)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
   const options = members?.map((member) => ({
@@ -33,7 +30,7 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -46,13 +43,21 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
         <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
               <span className="text-custom-text-200">{value.length} Assignees</span>
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
-              <span className="text-custom-text-200">Assignee</span>
+            <div className="flex items-center justify-center gap-2 text-custom-text-300">
+              <UserGroupIcon className="h-3 w-3" />
+              <span>Assignee</span>
             </div>
           )}
         </div>
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
index 8c16ca14c..c4bc6ea60 100644
--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@@ -3,10 +3,7 @@ import React from "react";
 // react hook form
 import { Controller, FieldError, Control } from "react-hook-form";
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { ModuleStatusIcon } from "components/icons";
+import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
 // types
 import type { IModule } from "types";
 // constants
@@ -26,17 +23,11 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
       <CustomSelect
         value={value}
         label={
-          <div
-            className={`flex items-center justify-center gap-2 text-xs ${
-              error ? "text-red-500" : ""
-            }`}
-          >
+          <div className={`flex items-center justify-center gap-2 text-xs ${error ? "text-red-500" : ""}`}>
             {value ? (
               <ModuleStatusIcon status={value} />
             ) : (
-              <Squares2X2Icon
-                className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`}
-              />
+              <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
             )}
             {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
               <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
diff --git a/web/components/modules/sidebar-select/select-lead.tsx b/web/components/modules/sidebar-select/select-lead.tsx
index e00a5db25..a751ce015 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 { ProjectMemberService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
 // icons
-import { UserCircleIcon } from "@heroicons/react/24/outline";
-import User from "public/user.png";
+import { ChevronDown, UserCircle2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -20,14 +15,18 @@ type Props = {
   onChange: (val: string) => void;
 };
 
-export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
+const projectMemberService = new ProjectMemberService();
+
+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
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -36,7 +35,7 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -46,26 +45,30 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-        <UserCircleIcon className="h-5 w-5" />
-        <span>Lead</span>
+      <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+        <UserCircle2 className="h-4 w-4" />
+        <span className="text-base">Lead</span>
       </div>
-      <div className="sm:basis-1/2">
+      <div className="flex items-center w-1/2 rounded-sm">
         <CustomSearchSelect
+          className="w-full rounded-sm"
           value={value}
-          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>
-              )}
-            </div>
+          customButtonClassName="rounded-sm"
+          customButton={
+            selectedOption ? (
+              <div className="flex items-center justify-start gap-2 p-0.5 w-full">
+                <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
+                <span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
+              </div>
+            ) : (
+              <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
+                <span>No lead</span>
+                <ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
+              </div>
+            )
           }
           options={options}
           maxHeight="md"
-          position="right"
           onChange={onChange}
         />
       </div>
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
index 185f70cec..cbb3c3bda 100644
--- a/web/components/modules/sidebar-select/select-members.tsx
+++ b/web/components/modules/sidebar-select/select-members.tsx
@@ -1,15 +1,12 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectService from "services/project.service";
+import { ProjectMemberService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
+import { ChevronDown } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -18,6 +15,9 @@ type Props = {
   onChange: (val: string[]) => void;
 };
 
+// services
+const projectMemberService = new ProjectMemberService();
+
 export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -25,7 +25,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -34,7 +34,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
         {member.member.display_name}
       </div>
     ),
@@ -42,29 +42,38 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-        <UserGroupIcon className="h-5 w-5" />
-        <span>Members</span>
+      <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+        <UserGroupIcon className="h-4 w-4" />
+        <span className="text-base">Members</span>
       </div>
-      <div className="sm:basis-1/2">
+      <div className="flex items-center w-1/2 rounded-sm ">
         <CustomSearchSelect
+          className="w-full rounded-sm"
           value={value ?? []}
-          label={
-            <div className="flex items-center gap-2 text-custom-text-200">
-              {value && value.length > 0 && Array.isArray(value) ? (
-                <div className="flex items-center justify-center gap-2">
-                  <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-custom-text-200">{value.length} Assignees</span>
-                </div>
-              ) : (
-                "No members"
-              )}
-            </div>
+          customButtonClassName="rounded-sm"
+          customButton={
+            value && value.length > 0 && Array.isArray(value) ? (
+              <div className="px-1">
+                <AvatarGroup showTooltip={false}>
+                  {value.map((assigneeId) => {
+                    const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                    if (!member) return null;
+
+                    return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                  })}
+                </AvatarGroup>
+              </div>
+            ) : (
+              <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
+                <span>No members</span>
+                <ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
+              </div>
+            )
           }
           options={options}
           onChange={onChange}
           maxHeight="md"
-          position="right"
           multiple
         />
       </div>
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index f67f40222..9a1a31c34 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -3,9 +3,7 @@ import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
 // ui
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { CustomSelect } from "components/ui";
-// icons
+import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
 // types
 import { IModule } from "types";
 // common
@@ -21,7 +19,7 @@ type Props = {
 export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
   <div className="flex flex-wrap items-center py-2">
     <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
       <p>Status</p>
     </div>
     <div className="sm:basis-1/2">
@@ -31,11 +29,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
         render={({ field: { value } }) => (
           <CustomSelect
             label={
-              <span
-                className={`flex items-center gap-2 text-left capitalize ${
-                  value ? "" : "text-custom-text-100"
-                }`}
-              >
+              <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-custom-text-100"}`}>
                 <span
                   className="h-2 w-2 flex-shrink-0 rounded-full"
                   style={{
@@ -53,10 +47,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
             {MODULE_STATUS.map((option) => (
               <CustomSelect.Option key={option.value} value={option.value}>
                 <>
-                  <span
-                    className="h-2 w-2 flex-shrink-0 rounded-full"
-                    style={{ backgroundColor: option.color }}
-                  />
+                  <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
                   {option.label}
                 </>
               </CustomSelect.Option>
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index e815d1950..f4c14871b 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -1,43 +1,28 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// icons
-import {
-  ArrowLongRightIcon,
-  CalendarDaysIcon,
-  ChartPieIcon,
-  ChevronDownIcon,
-  DocumentIcon,
-  PlusIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-
-import { Disclosure, Popover, Transition } from "@headlessui/react";
-import DatePicker from "react-datepicker";
+import { Disclosure, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import modulesService from "services/modules.service";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 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";
+// ui
+import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon } from "@plane/ui";
 // icon
-import { ExclamationIcon } from "components/icons";
-import { LinkIcon } from "@heroicons/react/20/solid";
+import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react";
 // helpers
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, linkDetails, IModule, ModuleLink } from "types";
+import { linkDetails, IModule, ModuleLink } from "types";
 // fetch-keys
 import { MODULE_DETAILS } from "constants/fetch-keys";
 // constant
@@ -45,32 +30,40 @@ import { MODULE_STATUS } from "constants/module";
 
 const defaultValues: Partial<IModule> = {
   lead: "",
-  members_list: [],
+  members: [],
   start_date: null,
   target_date: null,
   status: "backlog",
 };
 
 type Props = {
-  module?: IModule;
-  isOpen: boolean;
-  moduleIssues?: IIssue[];
-  user: ICurrentUserResponse | undefined;
+  moduleId: string;
+  handleClose: () => void;
 };
 
-export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIssues, user }) => {
+// services
+const moduleService = new ModuleService();
+
+// TODO: refactor this component
+export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { moduleId, handleClose } = props;
+
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
+  const { workspaceSlug, projectId, peekModule } = router.query;
 
-  const { memberRole } = useProjectMyMembership();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser ?? undefined;
+  const userRole = userStore.currentProjectRole;
+  const moduleDetails = moduleStore.moduleDetails[moduleId] ?? undefined;
 
   const { setToastAlert } = useToast();
 
-  const { reset, watch, control } = useForm({
+  const { reset, control } = useForm({
     defaultValues,
   });
 
@@ -86,7 +79,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 +90,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) => {
@@ -121,7 +114,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
     const payload = { metadata: {}, ...formData };
 
-    const updatedLinks = module.link_module.map((l) =>
+    const updatedLinks = moduleDetails.link_module.map((l) =>
       l.id === linkId
         ? {
             ...l,
@@ -137,9 +130,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) => {
@@ -150,7 +143,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
   const handleDeleteLink = async (linkId: string) => {
     if (!workspaceSlug || !projectId || !module) return;
 
-    const updatedLinks = module.link_module.filter((l) => l.id !== linkId);
+    const updatedLinks = moduleDetails.link_module.filter((l) => l.id !== linkId);
 
     mutate<IModule>(
       MODULE_DETAILS(module.id),
@@ -158,9 +151,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,44 +162,61 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
       .then(() => {
         setToastAlert({
           type: "success",
-          title: "Module link copied to clipboard",
+          title: "Link copied",
+          message: "Module link copied to clipboard",
         });
       })
       .catch(() => {
         setToastAlert({
           type: "error",
-          title: "Some error occurred",
+          title: "Error!",
+          message: "Some error occurred",
         });
       });
   };
 
   useEffect(() => {
-    if (module)
+    if (moduleDetails)
       reset({
-        ...module,
-        members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
+        ...moduleDetails,
       });
-  }, [module, reset]);
+  }, [moduleDetails, reset]);
 
-  const isStartValid = new Date(`${module?.start_date}`) <= new Date();
-  const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
+  const isStartValid = new Date(`${moduleDetails?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${moduleDetails?.target_date}`) >= new Date(`${moduleDetails?.start_date}`);
 
-  const progressPercentage = module
-    ? Math.round((module.completed_issues / module.total_issues) * 100)
+  const progressPercentage = moduleDetails
+    ? Math.round((moduleDetails.completed_issues / moduleDetails.total_issues) * 100)
     : null;
 
   const handleEditLink = (link: linkDetails) => {
+    console.log("link", link);
     setSelectedLinkToUpdate(link);
     setModuleLinkModal(true);
   };
 
+  if (!moduleDetails) return null;
+
+  const startDate = new Date(moduleDetails.start_date ?? "");
+  const endDate = new Date(moduleDetails.target_date ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount =
+    moduleDetails.total_issues === 0
+      ? "0 Issue"
+      : moduleDetails.total_issues === moduleDetails.completed_issues
+      ? moduleDetails.total_issues > 1
+        ? `${moduleDetails.total_issues}`
+        : `${moduleDetails.total_issues}`
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+
   return (
     <>
       <LinkModal
@@ -220,366 +230,195 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
         createIssueLink={handleCreateLink}
         updateIssueLink={handleUpdateLink}
       />
-      <DeleteModuleModal
-        isOpen={moduleDeleteModal}
-        setIsOpen={setModuleDeleteModal}
-        data={module}
-        user={user}
-      />
-      <div
-        className={`fixed top-[66px] ${
-          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`}
-      >
-        {module ? (
-          <>
-            <div className="flex flex-col items-start justify-center">
-              <div className="flex gap-2.5 px-5 text-sm">
-                <div className="flex items-center ">
-                  <Controller
-                    control={control}
-                    name="status"
-                    render={({ field: { value } }) => (
-                      <CustomSelect
-                        customButton={
-                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
-                            {capitalizeFirstLetter(`${watch("status")}`)}
-                          </span>
-                        }
-                        value={value}
-                        onChange={(value: any) => {
-                          submitChanges({ status: value });
-                        }}
+      <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
+      {module ? (
+        <>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              <button
+                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                onClick={() => handleClose()}
+              >
+                <ChevronRight className="h-3 w-3 text-white stroke-2" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3.5">
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-3 w-3" />
+                    <span>Delete module</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
+            <div className="flex items-center gap-5">
+              <Controller
+                control={control}
+                name="status"
+                render={({ field: { value } }) => (
+                  <CustomSelect
+                    customButton={
+                      <span
+                        className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
                       >
-                        {MODULE_STATUS.map((option) => (
-                          <CustomSelect.Option key={option.value} value={option.value}>
-                            <span className="text-xs">{option.label}</span>
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                </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 ${
-                            module.start_date ? "" : "text-custom-text-200"
-                          }`}
-                        >
-                          <CalendarDaysIcon className="h-3 w-3" />
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(`${module.start_date}`),
-                              "Start date"
-                            )}
-                          </span>
-                        </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 -right-5 z-20  transform overflow-hidden">
-                            <DatePicker
-                              selected={
-                                watch("start_date")
-                                  ? new Date(`${watch("start_date")}`)
-                                  : new Date()
-                              }
-                              onChange={(date) => {
-                                submitChanges({
-                                  start_date: renderDateFormat(date),
-                                });
-                              }}
-                              selectsStart
-                              startDate={new Date(`${watch("start_date")}`)}
-                              endDate={new Date(`${watch("target_date")}`)}
-                              maxDate={new Date(`${watch("target_date")}`)}
-                              shouldCloseOnSelect
-                              inline
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                  <span>
-                    <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 ${
-                            module.target_date ? "" : "text-custom-text-200"
-                          }`}
-                        >
-                          <CalendarDaysIcon className="h-3 w-3 " />
-
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(`${module?.target_date}`),
-                              "End date"
-                            )}
-                          </span>
-                        </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 -right-5 z-20  transform overflow-hidden">
-                            <DatePicker
-                              selected={
-                                watch("target_date")
-                                  ? new Date(`${watch("target_date")}`)
-                                  : new Date()
-                              }
-                              onChange={(date) => {
-                                submitChanges({
-                                  target_date: renderDateFormat(date),
-                                });
-                              }}
-                              selectsEnd
-                              startDate={new Date(`${watch("start_date")}`)}
-                              endDate={new Date(`${watch("target_date")}`)}
-                              minDate={new Date(`${watch("start_date")}`)}
-                              shouldCloseOnSelect
-                              inline
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                </div>
-              </div>
-
-              <div className="flex w-full flex-col gap-6 px-6 py-6">
-                <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>
-                    </div>
-                    <CustomMenu width="lg" ellipsis>
-                      <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
-                        <span className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
-                          <span>Delete</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 link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-
-                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
-                    {module.description}
-                  </span>
-                </div>
-
-                <div className="flex flex-col  gap-4  text-sm">
-                  <Controller
-                    control={control}
-                    name="lead"
-                    render={({ field: { value } }) => (
-                      <SidebarLeadSelect
-                        value={value}
-                        onChange={(val: string) => {
-                          submitChanges({ lead: val });
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="members_list"
-                    render={({ field: { value } }) => (
-                      <SidebarMembersSelect
-                        value={value}
-                        onChange={(val: string[]) => {
-                          submitChanges({ members_list: val });
-                        }}
-                      />
-                    )}
-                  />
-
-                  <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <ChartPieIcon className="h-5 w-5" />
-                      <span>Progress</span>
-                    </div>
-
-                    <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}
-                        />
+                        {moduleStatus?.label ?? "Backlog"}
                       </span>
-                      {module.completed_issues}/{module.total_issues}
-                    </div>
-                  </div>
-                </div>
+                    }
+                    value={value}
+                    onChange={(value: any) => {
+                      submitChanges({ status: value });
+                    }}
+                  >
+                    {MODULE_STATUS.map((status) => (
+                      <CustomSelect.Option key={status.value} value={status.value}>
+                        <div className="flex items-center gap-2">
+                          <ModuleStatusIcon status={status.value} />
+                          {status.label}
+                        </div>
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+
+              <span className="text-sm text-custom-text-300 font-mediu cursor-default">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            </div>
+          </div>
+
+          {moduleDetails.description && (
+            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+              {moduleDetails.description}
+            </span>
+          )}
+
+          <div className="flex flex-col gap-5 pt-2.5 pb-6">
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value } }) => (
+                <SidebarLeadSelect
+                  value={value}
+                  onChange={(val: string) => {
+                    submitChanges({ lead: val });
+                  }}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="members"
+              render={({ field: { value } }) => (
+                <SidebarMembersSelect
+                  value={value}
+                  onChange={(val: string[]) => {
+                    submitChanges({ members: val });
+                  }}
+                />
+              )}
+            />
+
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <LayersIcon className="h-4 w-4" />
+                <span className="text-base">Issues</span>
+              </div>
+              <div className="flex items-center w-1/2">
+                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
               </div>
             </div>
+          </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
-              <Disclosure defaultOpen>
+          <div className="flex flex-col">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
                 {({ open }) => (
-                  <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={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
-                        {!open && moduleIssues && progressPercentage ? (
-                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        {progressPercentage ? (
+                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
                             {progressPercentage ? `${progressPercentage}%` : ""}
                           </span>
                         ) : (
                           ""
                         )}
-                      </div>
-
-                      {isStartValid && isEndValid ? (
-                        <Disclosure.Button className="p-1">
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
-                        </Disclosure.Button>
-                      ) : (
-                        <div className="flex items-center gap-1">
-                          <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>
-                        </div>
-                      )}
-                    </div>
-                    <Transition show={open}>
-                      <Disclosure.Panel>
-                        {isStartValid && isEndValid && moduleIssues ? (
-                          <div className=" h-full w-full py-4">
-                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-1">
-                                <span>
-                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
-                                </span>
-                                <span>
-                                  Pending Issues -{" "}
-                                  {module.total_issues -
-                                    (module.completed_issues + module.cancelled_issues)}{" "}
-                                </span>
-                              </div>
-
-                              <div className="flex items-center gap-3 text-custom-text-100">
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                  <span>Ideal</span>
-                                </div>
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                  <span>Current</span>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="relative h-40 w-80">
-                              <ProgressChart
-                                distribution={module.distribution.completion_chart}
-                                startDate={module.start_date ?? ""}
-                                endDate={module.target_date ?? ""}
-                                totalIssues={module.total_issues}
-                              />
-                            </div>
+                        {isStartValid && isEndValid ? (
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                        ) : (
+                          <div className="flex items-center gap-1">
+                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                            <span className="text-xs italic text-custom-text-200">
+                              Invalid date. Please enter valid date.
+                            </span>
                           </div>
-                        ) : (
-                          ""
                         )}
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            </div>
-
-            <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="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>
                       </div>
-
-                      {module.total_issues > 0 ? (
-                        <Disclosure.Button className="p-1">
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
-                        </Disclosure.Button>
-                      ) : (
-                        <div className="flex items-center gap-1">
-                          <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>
-                        </div>
-                      )}
-                    </div>
+                    </Disclosure.Button>
                     <Transition show={open}>
                       <Disclosure.Panel>
-                        {module.total_issues > 0 ? (
-                          <>
-                            <div className=" h-full w-full py-4">
+                        <div className="flex flex-col gap-3">
+                          {isStartValid && isEndValid ? (
+                            <div className=" h-full w-full pt-4">
+                              <div className="flex  items-start  gap-4 py-2 text-xs">
+                                <div className="flex items-center gap-3 text-custom-text-100">
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                    <span>Ideal</span>
+                                  </div>
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                    <span>Current</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="relative h-40 w-80">
+                                <ProgressChart
+                                  distribution={moduleDetails.distribution.completion_chart}
+                                  startDate={moduleDetails.start_date ?? ""}
+                                  endDate={moduleDetails.target_date ?? ""}
+                                  totalIssues={moduleDetails.total_issues}
+                                />
+                              </div>
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                          {moduleDetails.total_issues > 0 && (
+                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
                               <SidebarProgressStats
-                                distribution={module.distribution}
+                                distribution={moduleDetails.distribution}
                                 groupedIssues={{
-                                  backlog: module.backlog_issues,
-                                  unstarted: module.unstarted_issues,
-                                  started: module.started_issues,
-                                  completed: module.completed_issues,
-                                  cancelled: module.cancelled_issues,
+                                  backlog: moduleDetails.backlog_issues,
+                                  unstarted: moduleDetails.unstarted_issues,
+                                  started: moduleDetails.started_issues,
+                                  completed: moduleDetails.completed_issues,
+                                  cancelled: moduleDetails.cancelled_issues,
                                 }}
-                                totalIssues={module.total_issues}
-                                module={module}
+                                totalIssues={moduleDetails.total_issues}
+                                module={moduleDetails}
+                                isPeekView={Boolean(peekModule)}
                               />
                             </div>
-                          </>
-                        ) : (
-                          ""
-                        )}
+                          )}
+                        </div>
                       </Disclosure.Panel>
                     </Transition>
                   </div>
@@ -587,42 +426,89 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col border-t border-custom-border-200 px-6 pt-6 pb-10 text-xs">
-              <div className="flex w-full items-center justify-between">
-                <h4 className="text-sm font-medium text-custom-text-200">Links</h4>
-                <button
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
-                  onClick={() => setModuleLinkModal(true)}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                </button>
-              </div>
-              <div className="mt-2 space-y-2 hover:bg-custom-background-80">
-                {memberRole && module.link_module && module.link_module.length > 0 ? (
-                  <LinksList
-                    links={module.link_module}
-                    handleEditLink={handleEditLink}
-                    handleDeleteLink={handleDeleteLink}
-                    userAuth={memberRole}
-                  />
-                ) : null}
-              </div>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
+                {({ open }) => (
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-custom-text-200">Links</span>
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        <ChevronDown
+                          className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
+                          aria-hidden="true"
+                        />
+                      </div>
+                    </Disclosure.Button>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
+                          {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
+                            <>
+                              <div className="flex items-center justify-end w-full">
+                                <button
+                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  onClick={() => setModuleLinkModal(true)}
+                                >
+                                  <Plus className="h-3 w-3" />
+                                  Add link
+                                </button>
+                              </div>
+
+                              <LinksList
+                                links={moduleDetails.link_module}
+                                handleEditLink={handleEditLink}
+                                handleDeleteLink={handleDeleteLink}
+                                userAuth={{
+                                  isGuest: userRole === 5,
+                                  isViewer: userRole === 10,
+                                  isMember: userRole === 15,
+                                  isOwner: userRole === 20,
+                                }}
+                              />
+                            </>
+                          ) : (
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="flex items-center gap-2">
+                                <Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
+                                <span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
+                              </div>
+                              <button
+                                className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                onClick={() => setModuleLinkModal(true)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                Add link
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
             </div>
-          </>
-        ) : (
-          <Loader className="px-5">
-            <div className="space-y-2">
-              <Loader.Item height="15px" width="50%" />
-              <Loader.Item height="15px" width="30%" />
-            </div>
-            <div className="mt-8 space-y-3">
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-            </div>
-          </Loader>
-        )}
-      </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="px-5">
+          <div className="space-y-2">
+            <Loader.Item height="15px" width="50%" />
+            <Loader.Item height="15px" width="30%" />
+          </div>
+          <div className="mt-8 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      )}
     </>
   );
-};
+});
diff --git a/web/components/modules/single-module-card.tsx b/web/components/modules/single-module-card.tsx
deleted file mode 100644
index 7f7d761b5..000000000
--- a/web/components/modules/single-module-card.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-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";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { DeleteModuleModal } from "components/modules";
-// ui
-import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
-// icons
-import {
-  CalendarDaysIcon,
-  LinkIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { CalendarMonthIcon, 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";
-// fetch-key
-import { MODULE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  module: IModule;
-  handleEditModule: () => void;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, user }) => {
-  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const completionPercentage =
-    ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
-
-  const handleDeleteModule = () => {
-    if (!module) return;
-
-    setModuleDeleteModal(true);
-  };
-
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug || !projectId || !module) return;
-
-    mutate<IModule[]>(
-      MODULE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((m) => ({
-          ...m,
-          is_favorite: m.id === module.id ? true : m.is_favorite,
-        })),
-      false
-    );
-
-    modulesService
-      .addModuleToFavorites(workspaceSlug as string, projectId as string, {
-        module: module.id,
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the module to favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !projectId || !module) return;
-
-    mutate<IModule[]>(
-      MODULE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((m) => ({
-          ...m,
-          is_favorite: m.id === module.id ? false : m.is_favorite,
-        })),
-      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.",
-        });
-      });
-  };
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/modules/${module.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Module link copied to clipboard.",
-      });
-    });
-  };
-
-  const endDate = new Date(module.target_date ?? "");
-  const startDate = new Date(module.start_date ?? "");
-  const lastUpdated = new Date(module.updated_at ?? "");
-
-  return (
-    <>
-      <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">
-            <div className="flex items-start justify-between gap-2">
-              <Tooltip tooltipContent={module.name} position="top-left">
-                <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-                  <a className="w-auto max-w-[calc(100%-9rem)]">
-                    <h3 className="truncate break-words text-lg font-semibold text-custom-text-100">
-                      {truncateText(module.name, 75)}
-                    </h3>
-                  </a>
-                </Link>
-              </Tooltip>
-
-              <div className="flex items-center gap-1">
-                <div className="mr-2 flex whitespace-nowrap rounded bg-custom-background-90 px-2.5 py-2 text-custom-text-200">
-                  <span className="capitalize">{module?.status?.replace("-", " ")}</span>
-                </div>
-                {module.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>
-                )}
-
-                <CustomMenu width="auto" verticalEllipsis>
-                  <CustomMenu.MenuItem onClick={handleEditModule}>
-                    <span className="flex items-center justify-start gap-2">
-                      <PencilIcon className="h-4 w-4" />
-                      <span>Edit module</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                    <span className="flex items-center justify-start gap-2">
-                      <TrashIcon className="h-4 w-4" />
-                      <span>Delete module</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 module link</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-2 text-custom-text-200">
-              <div className="flex items-start gap-1">
-                <CalendarDaysIcon className="h-4 w-4" />
-                <span>Start:</span>
-                <span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
-              </div>
-              <div className="flex items-start gap-1">
-                <TargetIcon className="h-4 w-4" />
-                <span>End:</span>
-                <span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="flex h-20 flex-col items-end bg-custom-background-80">
-          <div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-custom-text-200">
-            <span>Progress</span>
-            <div className="bar relative h-1 w-full rounded bg-custom-background-90">
-              <div
-                className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
-                style={{
-                  width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
-                }}
-              />
-            </div>
-            <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
-          </div>
-          <div className="item-center flex h-full w-full justify-between px-4 pb-4 text-custom-text-200">
-            <p>
-              Last updated:
-              <span className="font-medium">{renderShortDateWithYearFormat(lastUpdated)}</span>
-            </p>
-            {module.members_detail.length > 0 && (
-              <div className="flex items-center gap-1">
-                <AssigneesList users={module.members_detail} length={4} />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 29fe579a8..978d13f0a 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-
 import Image from "next/image";
 import { useRouter } from "next/router";
-
+import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-
 // icons
-import { CustomMenu, Icon, Tooltip } from "components/ui";
-
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
+// constants
+import { snoozeOptions } from "constants/notification";
 // helper
-import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
+import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
 import {
   formatDateDistance,
   render12HourFormatTime,
@@ -18,14 +17,12 @@ import {
   renderShortDate,
   renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
-
 // type
 import type { IUserNotification } from "types";
-// constants
-import { snoozeOptions } from "constants/notification";
 
 type NotificationCardProps = {
   notification: IUserNotification;
+  isSnoozedTabOpen: boolean;
   markNotificationReadStatus: (notificationId: string) => Promise<void>;
   markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
   markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
@@ -36,6 +33,7 @@ type NotificationCardProps = {
 export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const {
     notification,
+    isSnoozedTabOpen,
     markNotificationReadStatus,
     markNotificationReadStatusToggle,
     markNotificationArchivedStatus,
@@ -48,6 +46,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
 
   const { setToastAlert } = useToast();
 
+  if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
+
   return (
     <div
       onClick={() => {
@@ -66,8 +66,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}
@@ -85,57 +84,61 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               ) : notification.triggered_by_details.display_name?.[0] ? (
                 notification.triggered_by_details.display_name?.[0]?.toUpperCase()
               ) : (
-                <Icon iconName="person" className="h-6 w-6" />
+                <User2 className="h-4 w-4" />
               )}
             </span>
           </div>
         )}
       </div>
       <div className="space-y-2.5 w-full overflow-hidden">
-        <div className="text-sm w-full break-words">
-          <span className="font-semibold">
-            {notification.triggered_by_details.is_bot
-              ? 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"
-            ? "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"
-            ? "to"
-            : ""}
-          <span className="font-semibold">
-            {" "}
-            {notification.data.issue_activity.field !== "None" ? (
-              notification.data.issue_activity.field !== "comment" ? (
-                notification.data.issue_activity.field === "target_date" ? (
-                  renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
-                ) : notification.data.issue_activity.field === "attachment" ? (
-                  "the issue"
-                ) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? (
-                  stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..."
+        {!notification.message ? (
+          <div className="text-sm w-full break-words">
+            <span className="font-semibold">
+              {notification.triggered_by_details.is_bot
+                ? 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"
+              ? "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"
+              ? "to"
+              : ""}
+            <span className="font-semibold">
+              {" "}
+              {notification.data.issue_activity.field !== "None" ? (
+                notification.data.issue_activity.field !== "comment" ? (
+                  notification.data.issue_activity.field === "target_date" ? (
+                    renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
+                  ) : notification.data.issue_activity.field === "attachment" ? (
+                    "the issue"
+                  ) : notification.data.issue_activity.field === "description" ? (
+                    stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
+                  ) : (
+                    notification.data.issue_activity.new_value
+                  )
                 ) : (
-                  stripHTML(notification.data.issue_activity.new_value)
+                  <span>
+                    {`"`}
+                    {notification.data.issue_activity.new_value.length > 55
+                      ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
+                      : notification.data.issue_activity.issue_comment}
+                    {`"`}
+                  </span>
                 )
               ) : (
-                <span>
-                  {`"`}
-                  {notification.data.issue_activity.new_value.length > 55
-                    ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
-                    : notification.data.issue_activity.issue_comment}
-                  {`"`}
-                </span>
-              )
-            ) : (
-              "the issue and assigned it to you."
-            )}
-          </span>
-        </div>
+                "the issue and assigned it to you."
+              )}
+            </span>
+          </div>
+        ) : (
+          <div className="text-sm w-full break-words">
+            <span className="semi-bold">{notification.message}</span>
+          </div>
+        )}
 
         <div className="flex justify-between gap-2 text-xs">
           <p className="text-custom-text-300">
@@ -146,16 +149,13 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           </p>
           {notification.snoozed_till ? (
             <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" />
+              <Clock className="h-4 w-4" />
               <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>
@@ -164,13 +164,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           {
             id: 1,
             name: notification.read_at ? "Mark as unread" : "Mark as read",
-            icon: "chat_bubble",
+            icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
             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",
                 });
               });
@@ -179,13 +177,15 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           {
             id: 2,
             name: notification.archived_at ? "Unarchive" : "Archive",
-            icon: notification.archived_at ? "unarchive" : "archive",
+            icon: notification.archived_at ? (
+              <ArchiveRestore className="h-3.5 w-3.5 text-custom-text-300" />
+            ) : (
+              <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-300" />
+            ),
             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",
                 });
               });
@@ -202,52 +202,47 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               key={item.id}
               className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded outline-none"
             >
-              <Icon iconName={item.icon} className="h-5 w-5 text-custom-text-300" />
+              {item.icon}
             </button>
           </Tooltip>
         ))}
 
         <Tooltip tooltipContent="Snooze">
-          <div>
-            <CustomMenu
-              menuButtonOnClick={(e: { stopPropagation: () => void }) => {
-                e.stopPropagation();
-              }}
-              customButton={
-                <button
-                  type="button"
-                  className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded"
-                >
-                  <Icon iconName="schedule" className="h-5 w-5 text-custom-text-300" />
-                </button>
-              }
-              optionsClassName="!z-20"
-            >
-              {snoozeOptions.map((item) => (
-                <CustomMenu.MenuItem
-                  key={item.label}
-                  renderAs="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
+          <CustomMenu
+            className="flex items-center"
+            menuButtonOnClick={(e: { stopPropagation: () => void }) => {
+              e.stopPropagation();
+            }}
+            customButton={
+              <div className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded">
+                <Clock className="h-3.5 w-3.5 text-custom-text-300" />
+              </div>
+            }
+            optionsClassName="!z-20"
+          >
+            {snoozeOptions.map((item) => (
+              <CustomMenu.MenuItem
+                key={item.label}
+                onClick={(e) => {
+                  e.stopPropagation();
 
-                    if (!item.value) {
-                      setSelectedNotificationForSnooze(notification.id);
-                      return;
-                    }
+                  if (!item.value) {
+                    setSelectedNotificationForSnooze(notification.id);
+                    return;
+                  }
 
-                    markSnoozeNotification(notification.id, item.value).then(() => {
-                      setToastAlert({
-                        title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
-                        type: "success",
-                      });
+                  markSnoozeNotification(notification.id, item.value).then(() => {
+                    setToastAlert({
+                      title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
+                      type: "success",
                     });
-                  }}
-                >
-                  {item.label}
-                </CustomMenu.MenuItem>
-              ))}
-            </CustomMenu>
-          </div>
+                  });
+                }}
+              >
+                {item.label}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
         </Tooltip>
       </div>
     </div>
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 0d181da98..44bce9049 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-
-// components
-import { CustomMenu, Icon, Tooltip } from "components/ui";
+import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
+// ui
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
-
 // type
 import type { NotificationType, NotificationCount } from "types";
 
@@ -75,7 +74,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 notificationMutate();
               }}
             >
-              <Icon iconName="refresh" className={`${isRefreshing ? "animate-spin" : ""}`} />
+              <RefreshCw className={`h-3.5 w-3.5 ${isRefreshing ? "animate-spin" : ""}`} />
             </button>
           </Tooltip>
           <Tooltip tooltipContent="Unread notifications">
@@ -87,24 +86,23 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 setReadNotification((prev) => !prev);
               }}
             >
-              <Icon iconName="filter_list" />
+              <ListFilter className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
           <CustomMenu
             customButton={
               <div className="grid place-items-center ">
-                <Icon iconName="more_vert" />
+                <MoreVertical className="h-3.5 w-3.5" />
               </div>
             }
           >
-            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
+            <CustomMenu.MenuItem onClick={markAllNotificationsAsRead}>
               <div className="flex items-center gap-2">
-                <Icon iconName="done_all" />
+                <CheckCheck className="h-3.5 w-3.5" />
                 Mark all as read
               </div>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
-              renderAs="button"
               onClick={() => {
                 setArchived(false);
                 setReadNotification(false);
@@ -112,12 +110,11 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               }}
             >
               <div className="flex items-center gap-2">
-                <Icon iconName="schedule" />
+                <Clock className="h-3.5 w-3.5" />
                 Show snoozed
               </div>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
-              renderAs="button"
               onClick={() => {
                 setSnoozed(false);
                 setReadNotification(false);
@@ -125,14 +122,14 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               }}
             >
               <div className="flex items-center gap-2">
-                <Icon iconName="archive" />
+                <ArchiveIcon className="h-3.5 w-3.5" />
                 Show archived
               </div>
             </CustomMenu.MenuItem>
           </CustomMenu>
           <Tooltip tooltipContent="Close">
             <button type="button" onClick={() => closePopover()}>
-              <Icon iconName="close" />
+              <X className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
         </div>
@@ -148,7 +145,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
             }}
           >
             <h4 className="flex items-center gap-2 pb-4">
-              <Icon iconName="arrow_back" />
+              <ArrowLeft className="h-3.5 w-3.5" />
               <span className="ml-2 font-medium">
                 {snoozed
                   ? "Snoozed Notifications"
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index f01fdafd1..90a1d7d71 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -1,22 +1,13 @@
 import React, { Fragment } from "react";
-
-// hooks
-import useTheme from "hooks/use-theme";
-
 import { Popover, Transition } from "@headlessui/react";
-
+import { Bell } from "lucide-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import useUserNotification from "hooks/use-user-notifications";
-
 // components
-import { Loader, EmptyState, Tooltip } from "components/ui";
-import {
-  SnoozeNotificationModal,
-  NotificationCard,
-  NotificationHeader,
-} from "components/notifications";
-// icons
-import { NotificationsOutlined } from "@mui/icons-material";
+import { EmptyState } from "components/common";
+import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
+import { Loader, Tooltip } from "@plane/ui";
 // images
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
@@ -24,8 +15,8 @@ import { getNumberCount } from "helpers/string.helper";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
-export const NotificationPopover = () => {
-  const store: any = useMobxStore();
+export const NotificationPopover = observer(() => {
+  const { theme: themeStore } = useMobxStore();
 
   const {
     notifications,
@@ -54,8 +45,7 @@ export const NotificationPopover = () => {
     markAllNotificationsAsRead,
   } = useUserNotification();
 
-  // theme context
-  const { collapsed: sidebarCollapse } = useTheme();
+  const isSidebarCollapsed = themeStore.sidebarCollapsed;
 
   return (
     <>
@@ -63,11 +53,7 @@ export const NotificationPopover = () => {
         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);
         }}
@@ -78,23 +64,18 @@ export const NotificationPopover = () => {
 
           return (
             <>
-              <Tooltip
-                tooltipContent="Notifications"
-                position="right"
-                className="ml-2"
-                disabled={!store?.theme?.sidebarCollapsed}
-              >
+              <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <Popover.Button
                   className={`relative 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"
-                  } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
+                  } ${isSidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  <NotificationsOutlined fontSize="small" />
-                  {store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
+                  <Bell className="h-4 w-4" />
+                  {isSidebarCollapsed ? null : <span>Notifications</span>}
                   {totalNotificationCount && totalNotificationCount > 0 ? (
-                    store?.theme?.sidebarCollapsed ? (
+                    isSidebarCollapsed ? (
                       <span className="absolute right-3.5 top-2 h-2 w-2 bg-custom-primary-300 rounded-full" />
                     ) : (
                       <span className="ml-auto bg-custom-primary-300 rounded-full text-xs text-white px-1.5">
@@ -137,6 +118,7 @@ export const NotificationPopover = () => {
                           {notifications.map((notification) => (
                             <NotificationCard
                               key={notification.id}
+                              isSnoozedTabOpen={snoozed}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
                               markNotificationReadStatus={markNotificationAsRead}
@@ -189,7 +171,6 @@ export const NotificationPopover = () => {
                           title="You're updated with all the notifications"
                           description="You have read all the notifications."
                           image={emptyNotification}
-                          isFullScreen={false}
                         />
                       </div>
                     )
@@ -210,4 +191,4 @@ export const NotificationPopover = () => {
       </Popover>
     </>
   );
-};
+});
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 99281350e..9ac60aa5b 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -1,28 +1,15 @@
-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";
+import { X } from "lucide-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";
-
+// ui
+import { Button, CustomSelect } from "@plane/ui";
+import { CustomDatePicker } from "components/ui";
 // types
 import type { IUserNotification } from "types";
 
@@ -48,7 +35,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 +117,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"
@@ -141,13 +128,13 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <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"
@@ -155,28 +142,23 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
               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-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md 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>
 
                     <div>
                       <button type="button" onClick={handleClose}>
-                        <Icon iconName="close" className="w-5 h-5 text-custom-text-100" />
+                        <X className="w-5 h-5 text-custom-text-100" />
                       </button>
                     </div>
                   </div>
 
                   <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}
@@ -189,7 +171,8 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                               setValue("time", null);
                               onChange(val);
                             }}
-                            className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 focus:outline-none !text-sm"
+                            className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none !text-sm"
+                            wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}
                           />
@@ -197,9 +180,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 +196,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 +238,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 +248,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" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" size="sm" 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..08617ca71 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -3,40 +3,32 @@ 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";
+import { Check, ChevronDown, Plus, X } from "lucide-react";
 // types
-import { ICurrentUserResponse, IWorkspace, TOnboardingSteps } from "types";
+import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } 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;
 };
 
 type EmailRole = {
   email: string;
-  role: 5 | 10 | 15 | 20;
+  role: TUserWorkspaceRole;
 };
 
 type FormValues = {
@@ -52,6 +44,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 +55,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 +70,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>
@@ -114,7 +107,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                 className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none"
               >
                 <span className="text-xs sm:text-sm">{ROLE[value]}</span>
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
               </Listbox.Button>
 
               <Transition
@@ -145,7 +138,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                         {({ selected }) => (
                           <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2">{value}</div>
-                            {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                            {selected && <Check className="h-4 w-4 flex-shrink-0" />}
                           </div>
                         )}
                       </Listbox.Option>
@@ -163,7 +156,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
           className="hidden group-hover:grid self-center place-items-center rounded -ml-3"
           onClick={() => remove(index)}
         >
-          <XMarkIcon className="h-3.5 w-3.5 text-custom-text-200" />
+          <X className="h-3.5 w-3.5 text-custom-text-200" />
         </button>
       )}
     </div>
@@ -261,17 +254,17 @@ export const InviteMembers: React.FC<Props> = (props) => {
           className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-xs font-medium py-2 pr-3"
           onClick={appendField}
         >
-          <PlusIcon className="h-3 w-3" />
+          <Plus className="h-3 w-3" />
           Add another
         </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..d846614dd 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -3,13 +3,13 @@ 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";
+import { CheckCircle } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -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,24 +106,19 @@ 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"
-                  }`}
-                >
-                  <CheckCircleIcon className="h-5 w-5" />
+                <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
+                  <CheckCircle className="h-5 w-5" />
                 </span>
               </div>
             );
           })}
       </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..713c1140e 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -1,16 +1,15 @@
 import { useState } from "react";
-
 import Image from "next/image";
-
-// hooks
-import useUser from "hooks/use-user";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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
+import { X } from "lucide-react";
+// assets
 import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
 import IssuesTour from "public/onboarding/issues.webp";
 import CyclesTour from "public/onboarding/cycles.webp";
@@ -52,8 +51,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",
@@ -76,10 +74,13 @@ const TOUR_STEPS: {
   },
 ];
 
-export const TourRoot: React.FC<Props> = ({ onComplete }) => {
+export const TourRoot: React.FC<Props> = observer((props) => {
+  const { onComplete } = props;
+  // states
   const [step, setStep] = useState<TTourSteps>("welcome");
 
-  const { user } = useUser();
+  const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const user = userStore.currentUser;
 
   const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
   const currentStep = TOUR_STEPS[currentStepIndex];
@@ -92,23 +93,27 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
             <div className="h-3/5 bg-custom-primary-100 grid place-items-center">
               <Image src={PlaneWhiteLogo} alt="Plane White Logo" />
             </div>
-            <div className="h-2/5 overflow-y-auto p-6">
+            <div className="h-2/5 flex flex-col overflow-y-auto p-6">
               <h3 className="font-semibold sm:text-xl">
                 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
-                  type="button"
-                  className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
-                  onClick={onComplete}
-                >
-                  No thanks, I will explore it myself
-                </button>
+              <div className="flex items-end h-full">
+                <div className="flex items-center gap-6 mt-8">
+                  <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"
+                    onClick={onComplete}
+                  >
+                    No thanks, I will explore it myself
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -120,7 +125,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
             className="fixed top-[19%] sm:top-[11.5%] right-[9%] md:right-[24%] lg:right-[19%] border border-custom-text-100 rounded-full p-1 translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
             onClick={onComplete}
           >
-            <XMarkIcon className="h-3 w-3 text-custom-text-100" />
+            <X className="h-3 w-3 text-custom-text-100" />
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 lg:col-span-7 h-full overflow-hidden">
@@ -137,19 +142,26 @@ 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>
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      onComplete();
+                      commandPaletteStore.toggleCreateProjectModal(true);
+                    }}
+                  >
+                    Create my first project
+                  </Button>
                 )}
               </div>
             </div>
@@ -158,4 +170,4 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
       )}
     </>
   );
-};
+});
diff --git a/web/components/onboarding/tour/sidebar.tsx b/web/components/onboarding/tour/sidebar.tsx
index dce49f098..dbabab4f5 100644
--- a/web/components/onboarding/tour/sidebar.tsx
+++ b/web/components/onboarding/tour/sidebar.tsx
@@ -1,11 +1,6 @@
 // icons
-import {
-  ArticleOutlined,
-  ContrastOutlined,
-  DatasetOutlined,
-  FilterNoneOutlined,
-  PhotoFilterOutlined,
-} from "@mui/icons-material";
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
+import { FileText } from "lucide-react";
 // types
 import { TTourSteps } from "./root";
 
@@ -15,23 +10,23 @@ const sidebarOptions: {
 }[] = [
   {
     key: "issues",
-    Icon: FilterNoneOutlined,
+    Icon: LayersIcon,
   },
   {
     key: "cycles",
-    Icon: ContrastOutlined,
+    Icon: ContrastIcon,
   },
   {
     key: "modules",
-    Icon: DatasetOutlined,
+    Icon: DiceIcon,
   },
   {
     key: "views",
-    Icon: PhotoFilterOutlined,
+    Icon: PhotoFilterIcon,
   },
   {
     key: "pages",
-    Icon: ArticleOutlined,
+    Icon: FileText,
   },
 ];
 
@@ -58,12 +53,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
           }`}
           onClick={() => setStep(option.key)}
         >
-          <option.Icon
-            sx={{
-              fontSize: 18,
-            }}
-            aria-hidden="true"
-          />
+          <option.Icon className="h-4 w-4" aria-hidden="true" />
           {option.key}
         </h5>
       ))}
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 2911bbc80..3e59668c6 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -1,19 +1,12 @@
 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 { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomSearchSelect, CustomSelect, Input, PrimaryButton } from "components/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IUser } from "types";
-// fetch-keys
-import { CURRENT_USER } from "constants/fetch-keys";
+import { IUser } from "types";
 // helpers
 import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
 // constants
@@ -36,11 +29,12 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
   content: timeZone.label,
 }));
 
-export const UserDetails: React.FC<Props> = ({ user }) => {
-  const { setToastAlert } = useToast();
+export const UserDetails: React.FC<Props> = observer((props) => {
+  const { user } = props;
+
+  const { user: userStore } = useMobxStore();
 
   const {
-    register,
     handleSubmit,
     control,
     reset,
@@ -60,31 +54,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
       },
     };
 
-    await userService
-      .updateUser(payload)
-      .then(() => {
-        mutate<ICurrentUserResponse>(
-          CURRENT_USER,
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              ...payload,
-            };
-          },
-          false
-        );
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Details updated successfully.",
-        });
-      })
-      .catch((err) => {
-        mutate(CURRENT_USER);
-      });
+    await userStore.updateCurrentUser(payload);
   };
 
   useEffect(() => {
@@ -113,38 +83,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,16 +146,9 @@ 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"
-                  verticalPosition="top"
                 >
                   {USER_ROLES.map((item) => (
                     <CustomSelect.Option key={item.value} value={item.value}>
@@ -190,29 +171,22 @@ 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}
-                  verticalPosition="top"
                   optionsClassName="w-full"
                   input
                 />
               )}
             />
-            {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..916c91f5d 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -1,9 +1,8 @@
 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 +10,13 @@ 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> = (props) => {
+  const { finishOnboarding, stepChange, updateLastWorkspace, user, workspaces } = props;
+
   const [defaultValues, setDefaultValues] = useState({
     name: "",
     slug: "",
@@ -54,16 +49,15 @@ export const Workspace: React.FC<Props> = ({
           onSubmit={completeStep}
           defaultValues={defaultValues}
           setDefaultValues={setDefaultValues}
-          user={user}
           primaryButtonText={{
             loading: "Creating...",
             default: "Continue",
           }}
           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..93928bede
--- /dev/null
+++ b/web/components/page-views/index.ts
@@ -0,0 +1,2 @@
+export * from "./signin";
+export * from "./workspace-dashboard";
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
new file mode 100644
index 000000000..547170632
--- /dev/null
+++ b/web/components/page-views/signin.tsx
@@ -0,0 +1,251 @@
+import { useState, useEffect, useCallback } from "react";
+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";
+// 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";
+// types
+import { IUser, IUserSettings } from "types";
+
+const authService = new AuthService();
+
+export const SignInView = observer(() => {
+  const {
+    user: { fetchCurrentUser, fetchCurrentUserSettings },
+    appConfig: { envConfig },
+  } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { next: next_url } = router.query as { next: string };
+  // states
+  const [isLoading, setLoading] = useState(false);
+  // toast
+  const { setToastAlert } = useToast();
+  // computed
+  const enableEmailPassword =
+    envConfig &&
+    (envConfig?.email_password_login ||
+      !(
+        envConfig?.email_password_login ||
+        envConfig?.magic_login ||
+        envConfig?.google_client_id ||
+        envConfig?.github_client_id
+      ));
+
+  const handleLoginRedirection = useCallback(
+    (user: IUser) => {
+      // if the user is not onboarded, redirect them to the onboarding page
+      if (!user.is_onboarded) {
+        router.push("/onboarding");
+        return;
+      }
+      // if next_url is provided, redirect the user to that url
+      if (next_url) {
+        router.push(next_url);
+        return;
+      }
+
+      // if the user is onboarded, fetch their last workspace details
+      fetchCurrentUserSettings()
+        .then((userSettings: IUserSettings) => {
+          const workspaceSlug =
+            userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
+          if (workspaceSlug) router.push(`/${workspaceSlug}`);
+          else if (userSettings.workspace.invites > 0) router.push("/invitations");
+          else router.push("/create-workspace");
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    },
+    [fetchCurrentUserSettings, router, next_url]
+  );
+
+  const mutateUserInfo = useCallback(() => {
+    fetchCurrentUser().then((user) => {
+      handleLoginRedirection(user);
+    });
+  }, [fetchCurrentUser, handleLoginRedirection]);
+
+  useEffect(() => {
+    mutateUserInfo();
+  }, [mutateUserInfo]);
+
+  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) {
+          mutateUserInfo();
+        }
+      } 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 (envConfig && envConfig.github_client_id && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: envConfig.github_client_id,
+        };
+        const response = await authService.socialAuth(socialAuthPayload);
+        if (response) {
+          mutateUserInfo();
+        }
+      } 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(() => {
+        mutateUserInfo();
+      })
+      .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) {
+        mutateUserInfo();
+      }
+    } 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>
+
+              {!envConfig ? (
+                <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} />}
+                    {envConfig?.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">
+                      {envConfig?.google_client_id && (
+                        <GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
+                      )}
+                      {envConfig?.github_client_id && (
+                        <GithubLoginButton clientId={envConfig?.github_client_id} 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/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
new file mode 100644
index 000000000..b7fcb7cb6
--- /dev/null
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -0,0 +1,84 @@
+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 { Button } from "@plane/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, commandPalette: commandPaletteStore } = 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>
+                <Button variant="primary" size="sm" onClick={() => commandPaletteStore.toggleCreateProjectModal(true)}>
+                  Create Project
+                </Button>
+              </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/pages/create-block.tsx b/web/components/pages/create-block.tsx
index dd3c63c26..1decabae0 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 { SendHorizonal } from "lucide-react";
+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,22 +92,29 @@ 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>
 
         <div className="absolute right-2 bottom-2 flex items-center p-1">
           <button type="submit">
-            <PaperAirplaneIcon className="h-5 w-5 text-custom-text-100" />
+            <SendHorizonal className="h-5 w-5 text-custom-text-100" />
           </button>
         </div>
       </form>
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index cee9fe8e3..c1b3c5155 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -1,30 +1,32 @@
-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 { Sparkle } from "lucide-react";
 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 { TipTapEditor } from "components/tiptap";
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Button, TextArea } from "@plane/ui";
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 // types
-import { ICurrentUserResponse, IPageBlock } from "types";
+import { IUser, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 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 = {
@@ -33,7 +35,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,
@@ -44,22 +51,23 @@ 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;
 
+  const editorSuggestion = useEditorSuggestions();
+
   const { setToastAlert } = useToast();
 
   const {
     handleSubmit,
-    register,
     control,
     watch,
     setValue,
     setFocus,
     reset,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = useForm<IPageBlock>({
     defaultValues,
   });
@@ -140,7 +148,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,
@@ -195,8 +203,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({
@@ -262,14 +269,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">
@@ -279,8 +294,10 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               render={({ field: { value, onChange } }) => {
                 if (!data)
                   return (
-                    <TipTapEditor
-                      workspaceSlug={workspaceSlug as string}
+                    <RichTextEditorWithRef
+                      cancelUploadImage={fileService.cancelUpload}
+                      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                      deleteFile={fileService.deleteImage}
                       ref={editorRef}
                       value={"<p></p>"}
                       debouncedUpdatesEnabled={false}
@@ -291,16 +308,18 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                         onChange(description_html);
                         setValue("description", description);
                       }}
+                      mentionHighlights={editorSuggestion.mentionHighlights}
+                      mentionSuggestions={editorSuggestion.mentionSuggestions}
                     />
                   );
                 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 (
-                  <TipTapEditor
-                    workspaceSlug={workspaceSlug as string}
+                  <RichTextEditorWithRef
+                    cancelUploadImage={fileService.cancelUpload}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                    deleteFile={fileService.deleteImage}
                     ref={editorRef}
                     value={
                       value && value !== "" && Object.keys(value).length > 0
@@ -332,7 +351,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   "Generating response..."
                 ) : (
                   <>
-                    <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                    <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                   </>
                 )}
               </button>
@@ -342,23 +361,19 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80"
                 onClick={() => setGptAssistantModal(true)}
               >
-                <SparklesIcon className="h-4 w-4" />
+                <Sparkle className="h-4 w-4" />
                 AI
               </button>
             </div>
           </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
@@ -371,9 +386,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..a5803fcad 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -7,31 +7,32 @@ 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;
+  workspaceSlug: string;
+  projectId: string;
 };
 
-export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
+// services
+const pageService = new PageService();
+
+export const CreateUpdatePageModal: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, data, user, workspaceSlug, projectId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -40,7 +41,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 +83,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));
@@ -152,7 +153,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -166,7 +167,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
               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-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <PageForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 68c2d6732..a8b4eb21c 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";
+import { AlertTriangle } from "lucide-react";
 // 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));
@@ -103,7 +96,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -117,40 +110,33 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <AlertTriangle 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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} 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..e898395c9 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" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" 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 34199b279..59bc8c842 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -1,18 +1,18 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
-
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
+import { EmptyState } from "components/common";
 // ui
-import { EmptyState, Loader } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// images
+import { Loader } from "@plane/ui";
+// assets
 import emptyPage from "public/empty-state/page.svg";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
@@ -22,15 +22,20 @@ import { RecentPagesResponse } from "types";
 // fetch-keys
 import { RECENT_PAGES_LIST } from "constants/fetch-keys";
 
-export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+// services
+const pageService = new PageService();
+
+export const RecentPagesList: React.FC<TPagesListProps> = observer((props) => {
+  const { viewType } = props;
+
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
   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 +48,8 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             if (pages[key].length === 0) return null;
 
             return (
-              <div key={key} className="h-full overflow-hidden">
-                <h2 className="text-xl font-semibold capitalize mb-2">
-                  {replaceUnderscoreIfSnakeCase(key)}
-                </h2>
+              <div key={key} className="h-full overflow-hidden pb-9">
+                <h2 className="text-xl font-semibold capitalize mb-2">{replaceUnderscoreIfSnakeCase(key)}</h2>
                 <PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
               </div>
             );
@@ -57,14 +60,9 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             description="You can think of Pages as an AI-powered notepad."
             image={emptyPage}
             primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
+              icon: <Plus className="h-4 w-4" />,
               text: "New Page",
-              onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "d",
-                });
-                document.dispatchEvent(e);
-              },
+              onClick: () => commandPaletteStore.toggleCreatePageModal(true),
             }}
           />
         )
@@ -77,4 +75,4 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
       )}
     </>
   );
-};
+});
diff --git a/web/components/pages/pages-view.tsx b/web/components/pages/pages-view.tsx
index 8178460e1..3154f7981 100644
--- a/web/components/pages/pages-view.tsx
+++ b/web/components/pages/pages-view.tsx
@@ -1,25 +1,20 @@
 import { useState } from "react";
-
-import useSWR, { mutate } from "swr";
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
+import useSWR, { mutate } from "swr";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import pagesService from "services/pages.service";
-import projectService from "services/project.service";
+import { PageService } from "services/page.service";
+import { ProjectMemberService } 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";
+import { EmptyState } from "components/common";
 // ui
-import { EmptyState, Loader } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Loader } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // types
@@ -37,24 +32,30 @@ type Props = {
   viewType: TPageViewProps;
 };
 
-export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
+// services
+const pageService = new PageService();
+const projectMemberService = new ProjectMemberService();
+
+export const PagesView: React.FC<Props> = observer(({ pages, viewType }) => {
+  // states
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
   const [selectedPageToUpdate, setSelectedPageToUpdate] = useState<IPage | null>(null);
-
   const [deletePageModal, setDeletePageModal] = useState(false);
   const [selectedPageToDelete, setSelectedPageToDelete] = useState<IPage | null>(null);
 
+  const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const user = userStore.currentUser ?? undefined;
+
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { user } = useUserAuth();
-
   const { setToastAlert } = useToast();
 
   const { data: people } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
@@ -91,13 +92,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 +144,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()));
@@ -167,7 +164,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
   };
 
   const partialUpdatePage = (page: IPage, formData: Partial<IPage>) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !user) return;
 
     mutate<IPage[]>(
       ALL_PAGES_LIST(projectId.toString()),
@@ -185,27 +182,32 @@ 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 (
     <>
-      <CreateUpdatePageModal
-        isOpen={createUpdatePageModal}
-        handleClose={() => setCreateUpdatePageModal(false)}
-        data={selectedPageToUpdate}
-        user={user}
-      />
-      <DeletePageModal
-        isOpen={deletePageModal}
-        setIsOpen={setDeletePageModal}
-        data={selectedPageToDelete}
-        user={user}
-      />
+      {workspaceSlug && projectId && (
+        <>
+          <CreateUpdatePageModal
+            isOpen={createUpdatePageModal}
+            handleClose={() => setCreateUpdatePageModal(false)}
+            data={selectedPageToUpdate}
+            user={user}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+          />
+          <DeletePageModal
+            isOpen={deletePageModal}
+            setIsOpen={setDeletePageModal}
+            data={selectedPageToDelete}
+            user={user}
+          />
+        </>
+      )}
+
       {pages ? (
         <div className="space-y-4 h-full overflow-y-auto">
           {pages.length > 0 ? (
@@ -261,14 +263,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               description="You can think of Pages as an AI-powered notepad."
               image={emptyPage}
               primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
+                icon: <Plus className="h-4 w-4" />,
                 text: "New Page",
-                onClick: () => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "d",
-                  });
-                  document.dispatchEvent(e);
-                },
+                onClick: () => commandPaletteStore.toggleCreatePageModal(true),
               }}
             />
           )}
@@ -293,4 +290,4 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       )}
     </>
   );
-};
+});
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index e4c1d94ac..6f6766f84 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -1,60 +1,47 @@
 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";
+import { Draggable } from "@hello-pangea/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";
 // components
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
-import { TipTapEditor } from "components/tiptap";
+import { RichTextEditor } from "@plane/rich-text-editor";
 // ui
-import { CustomMenu, TextArea } from "components/ui";
+import { CustomMenu, LayersIcon, TextArea } from "@plane/ui";
 // icons
-import { LayerDiagonalIcon } from "components/icons";
-import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
-import {
-  BoltIcon,
-  CheckIcon,
-  EllipsisVerticalIcon,
-  PencilIcon,
-  SparklesIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react";
 // 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 useEditorSuggestions from "hooks/use-editor-suggestions";
 
 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);
@@ -69,7 +56,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: {},
@@ -77,6 +64,8 @@ export const SinglePageBlock: React.FC<Props> = ({
     },
   });
 
+  const editorSuggestion = useEditorSuggestions();
+
   const updatePageBlock = async (formData: Partial<IPageBlock>) => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
@@ -95,7 +84,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    await pagesService
+    await pageService
       .patchPageBlock(
         workspaceSlug as string,
         projectId as string,
@@ -111,7 +100,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,
@@ -130,14 +119,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),
@@ -156,7 +139,7 @@ export const SinglePageBlock: React.FC<Props> = ({
           message: "Page block converted to issue successfully.",
         });
       })
-      .catch((res) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -174,14 +157,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",
@@ -221,8 +198,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({
@@ -270,7 +246,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
@@ -283,12 +259,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!",
@@ -332,8 +305,8 @@ export const SinglePageBlock: React.FC<Props> = ({
                 className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
-                <EllipsisVerticalIcon className="h-[18px]" />
-                <EllipsisVerticalIcon className="-ml-2.5 h-[18px]" />
+                <MoreVertical className="h-4" />
+                <MoreVertical className="-ml-5 h-4" />
               </button>
               <div
                 ref={actionSectionRef}
@@ -343,11 +316,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 ? <RefreshCw className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
                     {isSyncing ? "Syncing..." : "Synced"}
                   </div>
                 )}
@@ -363,7 +332,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                     "Generating response..."
                   ) : (
                     <>
-                      <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                      <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                     </>
                   )}
                 </button>
@@ -372,7 +341,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                   className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
-                  <SparklesIcon className="h-4 w-4" />
+                  <Sparkle className="h-4 w-4" />
                   AI
                 </button>
                 <button
@@ -380,23 +349,23 @@ export const SinglePageBlock: React.FC<Props> = ({
                   className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setCreateBlockForm(true)}
                 >
-                  <PencilIcon className="h-3.5 w-3.5" />
+                  <Pencil className="h-3.5 w-3.5" />
                 </button>
                 <CustomMenu
                   customButton={
-                    <button
+                    <div
                       className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-custom-background-90"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
-                      <BoltIcon className="h-4.5 w-3.5" />
-                    </button>
+                      <Zap className="h-3.5 w-3.5" />
+                    </div>
                   }
                 >
                   {block.issue ? (
                     <>
                       <CustomMenu.MenuItem onClick={handleBlockSync}>
                         <span className="flex items-center gap-1">
-                          <ArrowPathIcon className="h-4 w-4" />
+                          <RefreshCw className="h-4 w-4" />
                           <span>Turn sync {block.sync ? "off" : "on"}</span>
                         </span>
                       </CustomMenu.MenuItem>
@@ -410,14 +379,14 @@ export const SinglePageBlock: React.FC<Props> = ({
                   ) : (
                     <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
                       <span className="flex items-center gap-1">
-                        <LayerDiagonalIcon className="h-4 w-4" />
+                        <LayersIcon className="h-4 w-4" />
                         Push into issues
                       </span>
                     </CustomMenu.MenuItem>
                   )}
                   <CustomMenu.MenuItem onClick={deletePageBlock}>
                     <span className="flex items-center gap-1">
-                      <TrashIcon className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                       Delete block
                     </span>
                   </CustomMenu.MenuItem>
@@ -431,32 +400,35 @@ 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" />
+                            <LayersIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
                         </Link>
                       </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>
 
                   {showBlockDetails
                     ? block.description_html.length > 7 && (
-                        <TipTapEditor
-                          workspaceSlug={workspaceSlug as string}
+                        <RichTextEditor
+                          cancelUploadImage={fileService.cancelUpload}
+                          uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                          deleteFile={fileService.deleteImage}
                           value={block.description_html}
                           customClassName="text-sm min-h-[150px]"
                           noBorder
                           borderOnFocus={false}
+                          mentionSuggestions={editorSuggestion.mentionSuggestions}
+                          mentionHighlights={editorSuggestion.mentionHighlights}
                         />
                       )
                     : block.description_stripped.length > 0 && (
diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
index eca4df9f1..2ff00f2d5 100644
--- a/web/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@@ -7,24 +7,12 @@ 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, Tooltip } from "@plane/ui";
 // icons
-import {
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // 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 +43,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 +66,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 +87,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
@@ -119,7 +99,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                 </button>
               ) : (
                 <button
@@ -131,7 +111,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                 </button>
               )}
               {page.created_by === user?.id && (
@@ -151,9 +131,9 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     }}
                   >
                     {page.access ? (
-                      <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                      <Lock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     ) : (
-                      <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                      <Unlock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     )}
                   </button>
                 </Tooltip>
@@ -161,12 +141,11 @@ 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>
-                  <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                  <AlertCircle className="h-4 w-4 text-custom-text-200" />
                 </span>
               </Tooltip>
               <CustomMenu verticalEllipsis>
@@ -178,7 +157,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                 >
                   <span className="flex items-center justify-start gap-2">
-                    <PencilIcon className="h-3.5 w-3.5" />
+                    <Pencil className="h-3.5 w-3.5" />
                     <span>Edit Page</span>
                   </span>
                 </CustomMenu.MenuItem>
@@ -190,7 +169,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                 >
                   <span className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-3.5 w-3.5" />
+                    <Trash2 className="h-3.5 w-3.5" />
                     <span>Delete Page</span>
                   </span>
                 </CustomMenu.MenuItem>
@@ -210,9 +189,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..87d5bdab2 100644
--- a/web/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@@ -7,25 +7,12 @@ 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, Tooltip } from "@plane/ui";
 // icons
-import {
-  DocumentTextIcon,
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // 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 +43,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!",
@@ -76,10 +60,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
           <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <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>
+                <FileText className="h-4 w-4" />
+                <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 +84,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
@@ -119,7 +99,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleRemoveFromFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
@@ -130,7 +110,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   {page.created_by === user?.id && (
@@ -150,9 +130,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         }}
                       >
                         {page.access ? (
-                          <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                          <Lock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         ) : (
-                          <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                          <Unlock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         )}
                       </button>
                     </Tooltip>
@@ -160,12 +140,11 @@ 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>
-                      <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                      <AlertCircle className="h-4 w-4 text-custom-text-200" />
                     </span>
                   </Tooltip>
 
@@ -178,7 +157,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <PencilIcon className="h-3.5 w-3.5" />
+                        <Pencil className="h-3.5 w-3.5" />
                         <span>Edit Page</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -190,7 +169,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <TrashIcon className="h-3.5 w-3.5" />
+                        <Trash2 className="h-3.5 w-3.5" />
                         <span>Delete Page</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/web/components/profile/index.ts b/web/components/profile/index.ts
index 382994a38..ffd05c5a5 100644
--- a/web/components/profile/index.ts
+++ b/web/components/profile/index.ts
@@ -1,5 +1,5 @@
 export * from "./overview";
 export * from "./navbar";
-export * from "./profile-issues-view-options";
-export * from "./profile-issues-view";
 export * from "./sidebar";
+
+export * from "./profile-issues-filter";
diff --git a/web/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
index e8988d670..d6d31bd19 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -4,12 +4,11 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // components
-import { ProfileIssuesViewOptions } from "components/profile";
-// types
-import { UserAuth } from "types";
+import { ProfileIssuesFilter } from "components/profile";
 
 type Props = {
-  memberRole: UserAuth;
+  isAuthorized: boolean;
+  showProfileIssuesFilter?: boolean;
 };
 
 const viewerTabs = [
@@ -38,17 +37,16 @@ const adminTabs = [
   },
 ];
 
-export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
+export const ProfileNavbar: React.FC<Props> = (props) => {
+  const { isAuthorized, showProfileIssuesFilter } = props;
+
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
-  const tabsList =
-    memberRole.isOwner || memberRole.isMember || memberRole.isViewer
-      ? [...viewerTabs, ...adminTabs]
-      : viewerTabs;
+  const tabsList = isAuthorized ? [...viewerTabs, ...adminTabs] : viewerTabs;
 
   return (
-    <div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">
+    <div className="sticky -top-0.5 z-10 md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">
       <div className="flex items-center overflow-x-scroll">
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
@@ -64,7 +62,7 @@ export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
           </Link>
         ))}
       </div>
-      <ProfileIssuesViewOptions />
+      {showProfileIssuesFilter && <ProfileIssuesFilter />}
     </div>
   );
 };
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 045812363..e8c8bf984 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -3,11 +3,13 @@ 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 } from "components/ui";
+import { Loader } from "@plane/ui";
+import { Rocket } from "lucide-react";
 // image
 import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
 // helpers
@@ -15,14 +17,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 +57,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 />
                       ) : (
@@ -69,7 +70,7 @@ export const ProfileActivity = () => {
                             className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
                           >
                             Issue
-                            <Icon iconName="launch" className="!text-xs" />
+                            <Rocket className="h-3 w-3" />
                           </a>
                         </span>
                       )}
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/state-distribution.tsx b/web/components/profile/overview/state-distribution.tsx
index 77ec8e596..73024e367 100644
--- a/web/components/profile/overview/state-distribution.tsx
+++ b/web/components/profile/overview/state-distribution.tsx
@@ -42,9 +42,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
                 colors={(datum) => datum.data.color}
                 tooltip={(datum) => (
                   <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs">
-                    <span className="text-custom-text-200 capitalize">
-                      {datum.datum.label} issues:
-                    </span>{" "}
+                    <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
                     {datum.datum.value}
                   </div>
                 )}
@@ -59,10 +57,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
             <div className="flex items-center">
               <div className="space-y-4 w-full">
                 {stateDistribution.map((group) => (
-                  <div
-                    key={group.state_group}
-                    className="flex items-center justify-between gap-2 text-xs"
-                  >
+                  <div key={group.state_group} className="flex items-center justify-between gap-2 text-xs">
                     <div className="flex items-center gap-1.5">
                       <div
                         className="h-2.5 w-2.5 rounded-sm"
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index 0277ac5b3..b109b508d 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 { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
+import { UserCircle2 } from "lucide-react";
 // types
 import { IUserProfileData } from "types";
 
@@ -16,19 +17,19 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
 
   const overviewCards = [
     {
-      icon: "new_window",
+      icon: CreateIcon,
       route: "created",
       title: "Issues created",
       value: userProfile?.created_issues ?? "...",
     },
     {
-      icon: "account_circle",
+      icon: UserCircle2,
       route: "assigned",
       title: "Issues assigned",
       value: userProfile?.assigned_issues ?? "...",
     },
     {
-      icon: "subscriptions",
+      icon: LayerStackIcon,
       route: "subscribed",
       title: "Issues subscribed",
       value: userProfile?.subscribed_issues ?? "...",
@@ -44,7 +45,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
             <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
               <a className="flex items-center gap-3 p-4 rounded border border-custom-border-100 whitespace-nowrap">
                 <div className="h-11 w-11 bg-custom-background-90 rounded grid place-items-center">
-                  <Icon iconName={card.icon} className="!text-xl" />
+                  <card.icon className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
                   <p className="text-custom-text-400 text-sm">{card.title}</p>
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
new file mode 100644
index 000000000..28bc2259d
--- /dev/null
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -0,0 +1,78 @@
+import { observer } from "mobx-react-lite";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "components/issues";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ProfileIssuesFilter = observer(() => {
+  const { workspace: workspaceStore, profileIssueFilters: profileIssueFiltersStore }: RootStore = useMobxStore();
+
+  const handleLayoutChange = (_layout: string) => {
+    const payload = {
+      layout: _layout,
+      group_by: profileIssueFiltersStore.userDisplayFilters.group_by
+        ? profileIssueFiltersStore.userDisplayFilters.group_by
+        : "state_detail.group",
+    };
+
+    profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", payload);
+  };
+
+  const handleFilters = (key: any, value: any) => {
+    let updatesFilters: any = profileIssueFiltersStore?.userFilters;
+    updatesFilters = updatesFilters[key] || [];
+    if (updatesFilters && updatesFilters.length > 0 && updatesFilters.includes(value))
+      updatesFilters = updatesFilters.filter((item: any) => item !== value);
+    else updatesFilters.push(value);
+    profileIssueFiltersStore.handleIssueFilters("userFilters", { [key]: updatesFilters });
+  };
+
+  const handleDisplayFilters = (value: any) => profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", value);
+
+  const handleDisplayProperties = (value: any) =>
+    profileIssueFiltersStore.handleIssueFilters("userDisplayProperties", value);
+
+  const states = undefined;
+  const labels = workspaceStore.workspaceLabels || undefined;
+  const members = undefined;
+
+  const activeLayout = profileIssueFiltersStore?.userDisplayFilters?.layout;
+
+  return (
+    <div className="relative flex items-center justify-end gap-2">
+      <LayoutSelection
+        layouts={["list", "kanban"]}
+        onChange={(layout) => handleLayoutChange(layout)}
+        selectedLayout={activeLayout}
+      />
+
+      <FiltersDropdown title="Filters" placement="bottom-end">
+        <FilterSelection
+          filters={profileIssueFiltersStore.userFilters}
+          handleFiltersUpdate={handleFilters}
+          layoutDisplayFiltersOptions={
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+          }
+          states={states}
+          labels={labels}
+          members={members}
+        />
+      </FiltersDropdown>
+
+      <FiltersDropdown title="Display" placement="bottom-end">
+        <DisplayFiltersSelection
+          displayFilters={profileIssueFiltersStore.userDisplayFilters}
+          displayProperties={profileIssueFiltersStore.userDisplayProperties}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          handleDisplayPropertiesUpdate={handleDisplayProperties}
+          layoutDisplayFiltersOptions={
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+          }
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
deleted file mode 100644
index 40b27ec2c..000000000
--- a/web/components/profile/profile-issues-view-options.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// hooks
-import useProfileIssues from "hooks/use-profile-issues";
-import useEstimateOption from "hooks/use-estimate-option";
-// components
-import { MyIssuesSelectFilters } from "components/issues";
-// ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { Properties, TIssueViewOptions } from "types";
-// constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
-
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "kanban",
-    Icon: GridViewOutlined,
-  },
-];
-
-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 { isEstimateActive } = useEstimateOption();
-
-  if (
-    !router.pathname.includes("assigned") &&
-    !router.pathname.includes("created") &&
-    !router.pathname.includes("subscribed")
-  )
-    return null;
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x-1">
-        {issueViewOptions.map((option) => (
-          <Tooltip
-            key={option.type}
-            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 ${
-                displayFilters?.layout === option.type
-                  ? "bg-custom-sidebar-background-80"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => setDisplayFilters({ layout: option.type })}
-            >
-              <option.Icon
-                sx={{
-                  fontSize: 16,
-                }}
-                className={option.type === "gantt_chart" ? "rotate-90" : ""}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>
-      <MyIssuesSelectFilters
-        filters={filters}
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
-
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
-
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
-              setFilters({
-                [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                  (val) => val !== option.value
-                ),
-              });
-            else
-              setFilters({
-                [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-              });
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <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"
-              }`}
-            >
-              Display
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </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 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;
-
-                                  return (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => setDisplayFilters({ group_by: option.key })}
-                                    >
-                                      {option.name}
-                                    </CustomMenu.MenuItem>
-                                  );
-                                })}
-                              </CustomMenu>
-                            </div>
-                          </div>
-                          <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Order by</h4>
-                            <div className="w-28">
-                              <CustomMenu
-                                label={
-                                  ORDER_BY_OPTIONS.find(
-                                    (option) => option.key === displayFilters?.order_by
-                                  )?.name ?? "Select"
-                                }
-                                className="!w-full"
-                                buttonClassName="w-full"
-                              >
-                                {ORDER_BY_OPTIONS.map((option) => {
-                                  if (
-                                    displayFilters?.group_by === "priority" &&
-                                    option.key === "priority"
-                                  )
-                                    return null;
-                                  if (option.key === "sort_order") return null;
-
-                                  return (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => {
-                                        setDisplayFilters({ order_by: option.key });
-                                      }}
-                                    >
-                                      {option.name}
-                                    </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"}
-                            </span>
-                          }
-                          className="!w-full"
-                          buttonClassName="w-full"
-                        >
-                          {FILTER_ISSUE_OPTIONS.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() =>
-                                setDisplayFilters({
-                                  type: option.key,
-                                })
-                              }
-                            >
-                              {option.name}
-                            </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>
-                          </div>
-                        </>
-                      )}
-                  </div>
-
-                  <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                    <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                      {displayProperties &&
-                        Object.keys(displayProperties).map((key) => {
-                          if (key === "estimate" && !isEstimateActive) return null;
-
-                          if (
-                            displayFilters?.layout === "spreadsheet" &&
-                            (key === "attachment_count" ||
-                              key === "link" ||
-                              key === "sub_issue_count")
-                          )
-                            return null;
-
-                          if (
-                            displayFilters?.layout !== "spreadsheet" &&
-                            (key === "created_on" || key === "updated_on")
-                          )
-                            return null;
-
-                          return (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`rounded border px-2 py-1 text-xs capitalize ${
-                                displayProperties[key as keyof Properties]
-                                  ? "border-custom-primary bg-custom-primary text-white"
-                                  : "border-custom-border-200"
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          );
-                        })}
-                    </div>
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
-  );
-};
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
deleted file mode 100644
index 9d6a53ffe..000000000
--- a/web/components/profile/profile-issues-view.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-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";
-// hooks
-import useProfileIssues from "hooks/use-profile-issues";
-import useUser from "hooks/use-user";
-// components
-import { AllViews, FiltersList } from "components/core";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
-// fetch-keys
-import { USER_PROFILE_PROJECT_SEGREGATION, WORKSPACE_LABELS } from "constants/fetch-keys";
-
-export const ProfileIssuesView = () => {
-  // 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);
-
-  // trash box
-  const [trashBox, setTrashBox] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { user } = useUser();
-
-  const {
-    groupedIssues,
-    mutateProfileIssues,
-    displayFilters,
-    isEmpty,
-    filters,
-    setFilters,
-    displayProperties,
-    params,
-  } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
-
-  const { data: profileData } = useSWR(
-    workspaceSlug && userId
-      ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-      : null,
-    workspaceSlug && userId
-      ? () =>
-          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
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleOnDragEnd = useCallback(
-    async (result: DropResult) => {
-      setTrashBox(false);
-
-      if (
-        !result.destination ||
-        !workspaceSlug ||
-        !groupedIssues ||
-        displayFilters?.group_by !== "priority"
-      )
-        return;
-
-      const { source, destination } = result;
-
-      if (source.droppableId === destination.droppableId) return;
-
-      const draggedItem = groupedIssues[source.droppableId][source.index];
-
-      if (!draggedItem) return;
-
-      if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem);
-      else {
-        const sourceGroup = source.droppableId;
-        const destinationGroup = destination.droppableId;
-
-        draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
-
-        mutateProfileIssues((prevData: any) => {
-          if (!prevData) return prevData;
-
-          const sourceGroupArray = [...groupedIssues[sourceGroup]];
-          const destinationGroupArray = [...groupedIssues[destinationGroup]];
-
-          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);
-
-        // patch request
-        issuesService
-          .patchIssue(
-            workspaceSlug as string,
-            draggedItem.project,
-            draggedItem.id,
-            {
-              priority: draggedItem.priority,
-            },
-            user
-          )
-          .catch(() => mutateProfileIssues());
-      }
-    },
-    [displayFilters, groupedIssues, handleDeleteIssue, mutateProfileIssues, user, workspaceSlug]
-  );
-
-  const addIssueToGroup = useCallback(
-    (groupTitle: string) => {
-      setCreateIssueModal(true);
-
-      let preloadedValue: string | string[] = 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]
-  );
-
-  const addIssueToDate = useCallback(
-    (date: string) => {
-      setCreateIssueModal(true);
-      setPreloadedData({
-        target_date: date,
-        actionType: "createIssue",
-      });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  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 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 };
-
-  const nullFilters = Object.keys(filtersToDisplay).filter(
-    (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null
-  );
-  const areFiltersApplied =
-    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 disableAddIssueOption =
-    isSubscribedIssuesRoute || isMySubscribedIssues || user?.id !== userId;
-
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateProfileIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateProfileIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateProfileIssues();
-        }}
-      />
-      {areFiltersApplied && (
-        <>
-          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-            <FiltersList
-              filters={filtersToDisplay}
-              setFilters={setFilters}
-              labels={labels}
-              members={undefined}
-              states={undefined}
-              clearAllFilters={() =>
-                setFilters({
-                  labels: null,
-                  priority: null,
-                  state_group: null,
-                  start_date: null,
-                  target_date: null,
-                })
-              }
-            />
-          </div>
-          {<div className="mt-3 border-t border-custom-border-200" />}
-        </>
-      )}
-      <AllViews
-        addIssueToDate={addIssueToDate}
-        addIssueToGroup={addIssueToGroup}
-        disableUserActions={false}
-        dragDisabled={displayFilters?.group_by !== "priority"}
-        emptyState={{
-          title: router.pathname.includes("assigned")
-            ? `Issues assigned to ${profileData?.user_data.display_name} will appear here`
-            : router.pathname.includes("created")
-            ? `Issues created by ${profileData?.user_data.display_name} will appear here`
-            : `Issues subscribed by ${profileData?.user_data.display_name} will appear here`,
-        }}
-        handleOnDragEnd={handleOnDragEnd}
-        handleIssueAction={handleIssueAction}
-        openIssuesListModal={null}
-        removeIssue={null}
-        disableAddIssueOption={disableAddIssueOption}
-        trashBox={trashBox}
-        setTrashBox={setTrashBox}
-        viewProps={{
-          groupedIssues,
-          displayFilters,
-          isEmpty,
-          mutateIssues: mutateProfileIssues,
-          params,
-          properties: displayProperties,
-        }}
-      />
-    </>
-  );
-};
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 59cc5528b..9d2b7126c 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -6,19 +6,22 @@ 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 { Loader, Tooltip } from "@plane/ui";
 // icons
-import { EditOutlined } from "@mui/icons-material";
+import { ChevronDown, Pencil } from "lucide-react";
 // helpers
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 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 +29,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 +54,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>
       ),
     },
@@ -70,19 +69,14 @@ export const ProfileSidebar = () => {
               <div className="absolute top-3.5 right-3.5 h-5 w-5 bg-white rounded grid place-items-center">
                 <Link href={`/${workspaceSlug}/me/profile`}>
                   <a className="grid place-items-center text-black">
-                    <EditOutlined
-                      sx={{
-                        fontSize: 12,
-                      }}
-                    />
+                    <Pencil className="h-3 w-3" />
                   </a>
                 </Link>
               </div>
             )}
             <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"
@@ -92,7 +86,7 @@ export const ProfileSidebar = () => {
                 <img
                   src={userProjectsData.user_data.avatar}
                   alt={userProjectsData.user_data.display_name}
-                  className="rounded"
+                  className="rounded h-full w-full object-cover"
                 />
               ) : (
                 <div className="bg-custom-background-90 flex justify-center items-center w-[52px] h-[52px] rounded text-custom-text-100">
@@ -106,9 +100,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 +113,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 +121,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 +139,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 && (
@@ -174,7 +157,7 @@ export const ProfileSidebar = () => {
                                 </div>
                               </Tooltip>
                             )}
-                            <Icon iconName="arrow_drop_down" className="!text-lg" />
+                            <ChevronDown className="h-4 w-4" />
                           </div>
                         </Disclosure.Button>
                         <Transition
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
new file mode 100644
index 000000000..f364be084
--- /dev/null
+++ b/web/components/project/card-list.tsx
@@ -0,0 +1,66 @@
+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, commandPalette: commandPaletteStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  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 w-full p-8 overflow-y-auto">
+          {projectStore.searchedProjects.length == 0 ? (
+            <div className="w-full text-center text-custom-text-400 mt-10">No matching projects</div>
+          ) : (
+            <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: () => commandPaletteStore.toggleCreateProjectModal(true),
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
new file mode 100644
index 000000000..9bfe6b7a7
--- /dev/null
+++ b/web/components/project/card.tsx
@@ -0,0 +1,230 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// icons
+import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteProjectModal, JoinProjectModal } from "components/project";
+// ui
+import { Avatar, AvatarGroup, Button, Tooltip } from "@plane/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import type { IProject } from "types";
+
+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.",
+      });
+    });
+  };
+
+  const projectMembersIds = project.members.map((member) => member.member_id);
+
+  return (
+    <>
+      {/* Delete Project Modal  */}
+      <DeleteProjectModal
+        project={project}
+        isOpen={deleteProjectModalOpen}
+        onClose={() => setDeleteProjectModal(false)}
+      />
+      {/* Join Project Modal */}
+      {workspaceSlug && (
+        <JoinProjectModal
+          workspaceSlug={workspaceSlug?.toString()}
+          project={project}
+          isOpen={joinProjectModalOpen}
+          handleClose={() => setJoinProjectModal(false)}
+        />
+      )}
+
+      {/* Card Information */}
+      <div
+        onClick={() => {
+          if (project.is_member) router.push(`/${workspaceSlug?.toString()}/projects/${project.id}/issues`);
+          else setJoinProjectModal(true);
+        }}
+        className="flex flex-col rounded bg-custom-background-100 border border-custom-border-200 cursor-pointer"
+      >
+        <div className="relative h-[118px] w-full rounded-t ">
+          <div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+
+          <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"
+          />
+
+          <div className="absolute h-10 w-full bottom-4 z-10 flex items-center justify-between px-4">
+            <div className="flex items-center gap-2.5 flex-grow truncate">
+              <div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
+                <span className="flex items-center justify-center">
+                  {project.emoji
+                    ? renderEmoji(project.emoji)
+                    : project.icon_prop
+                    ? renderEmoji(project.icon_prop)
+                    : null}
+                </span>
+              </div>
+
+              <div className="flex flex-col gap-0.5 justify-between w-full truncate">
+                <h3 className="text-white font-semibold truncate">{project.name}</h3>
+                <span className="flex items-center gap-1.5">
+                  <p className="text-xs font-medium text-white">{project.identifier} </p>
+                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center h-full gap-2 flex-shrink-0">
+              <button
+                className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleCopyText();
+                }}
+              >
+                <LinkIcon className="h-3 w-3 text-white" />
+              </button>
+              <button
+                className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
+                onClick={(e) => {
+                  if (project.is_favorite) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemoveFromFavorites();
+                  } else {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleAddToFavorites();
+                  }
+                }}
+              >
+                <Star
+                  className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b">
+          <p className="text-sm text-custom-text-300 break-words line-clamp-2">{project.description}</p>
+          <div className="flex item-center justify-between">
+            <Tooltip
+              tooltipHeading="Members"
+              tooltipContent={
+                project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member"
+              }
+              position="top"
+            >
+              {projectMembersIds.length > 0 ? (
+                <div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
+                  <AvatarGroup showTooltip={false}>
+                    {projectMembersIds.map((memberId) => {
+                      const member = project.members?.find((m) => m.member_id === memberId);
+
+                      if (!member) return null;
+
+                      return <Avatar key={member.id} name={member.member__display_name} src={member.member__avatar} />;
+                    })}
+                  </AvatarGroup>
+                </div>
+              ) : (
+                <span className="text-sm italic text-custom-text-400">No Member Yet</span>
+              )}
+            </Tooltip>
+            {(isOwner || isMember) && (
+              <button
+                className="flex items-center justify-center p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200 rounded"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  router.push(`/${workspaceSlug}/projects/${project.id}/settings`);
+                }}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </button>
+            )}
+
+            {!project.is_member ? (
+              <div className="flex items-center">
+                <Button
+                  variant="link-primary"
+                  className="!p-0 font-semibold"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setJoinProjectModal(true);
+                  }}
+                >
+                  Join
+                </Button>
+              </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..c084407a2 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";
+import { AlertTriangle } from "lucide-react";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -13,7 +13,9 @@ type Props = {
   data?: any;
 };
 
-const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
+export const ConfirmProjectMemberRemove: React.FC<Props> = (props) => {
+  const { isOpen, onClose, data, handleDelete } = props;
+
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const handleClose = () => {
@@ -39,7 +41,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -53,37 +55,33 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-100 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"
-                      />
+                      <AlertTriangle 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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -93,5 +91,3 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
     </Transition.Root>
   );
 };
-
-export default ConfirmProjectMemberRemove;
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 5593d8c7c..e1d199239 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -1,154 +1,134 @@
-import React, { useState, useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
+import { useState, useEffect, Fragment, FC, ChangeEvent } from "react";
 import { useForm, Controller } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import projectServices from "services/project.service";
+import { observer } from "mobx-react-lite";
+// icons
+import { X } from "lucide-react";
 // hooks
+import { useMobxStore } from "lib/mobx/store-provider";
 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 { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // components
+import { WorkspaceMemberSelect } from "components/workspace";
 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 { IWorkspaceMember } from "types";
 // constants
-import { NETWORK_CHOICES } from "constants/project";
+import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
   setToFavorite?: boolean;
-  user: ICurrentUserResponse | undefined;
+  workspaceSlug: string;
 };
 
-const defaultValues: Partial<IProject> = {
-  cover_image:
-    "https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  description: "",
-  emoji_and_icon: getRandomEmoji(),
-  identifier: "",
-  name: "",
-  network: 2,
-  project_lead: null,
-};
+interface IIsGuestCondition {
+  onClose: () => void;
+}
 
-const IsGuestCondition: React.FC<{
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}> = ({ setIsOpen }) => {
+const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
   const { setToastAlert } = useToast();
 
   useEffect(() => {
-    setIsOpen(false);
-
+    onClose();
     setToastAlert({
       title: "Error",
       type: "error",
       message: "You don't have permission to create project.",
     });
-  }, [setIsOpen, setToastAlert]);
+  }, [onClose, setToastAlert]);
 
   return null;
 };
 
-export const CreateProjectModal: React.FC<Props> = ({
-  isOpen,
-  setIsOpen,
-  setToFavorite = false,
-  user,
-}) => {
-  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
-
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { memberDetails } = useWorkspaceMyMembership();
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+export interface ICreateProjectForm {
+  name: string;
+  identifier: string;
+  description: string;
+  emoji_and_icon: string;
+  network: number;
+  project_lead_member: IWorkspaceMember;
+  project_lead: string;
+  cover_image: string;
+  icon_prop: any;
+  emoji: string;
+}
 
+export const CreateProjectModal: FC<Props> = observer((props) => {
+  const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
+  // store
+  const {
+    project: projectStore,
+    workspaceMember: { workspaceMembers },
+  } = useMobxStore();
+  // states
+  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
+  // toast
+  const { setToastAlert } = useToast();
+  // form info
+  const cover_image = PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)];
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
     control,
     watch,
     setValue,
-  } = useForm<IProject>({
-    defaultValues,
+  } = useForm<ICreateProjectForm>({
+    defaultValues: {
+      cover_image,
+      description: "",
+      emoji_and_icon: getRandomEmoji(),
+      identifier: "",
+      name: "",
+      network: 2,
+      project_lead: undefined,
+    },
     reValidateMode: "onChange",
   });
 
+  const { memberDetails } = useWorkspaceMyMembership();
+
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  if (memberDetails && isOpen) if (memberDetails.role <= 10) return <IsGuestCondition onClose={onClose} />;
+
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsChangeInIdentifierRequired(true);
-    reset(defaultValues);
+    reset();
   };
 
   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;
-
-    const { emoji_and_icon, ...payload } = formData;
+  const onSubmit = async (formData: ICreateProjectForm) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { emoji_and_icon, project_lead_member, ...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)
+    payload.project_lead = formData.project_lead_member?.member.id;
+
+    return 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!",
@@ -170,9 +150,11 @@ export const CreateProjectModal: React.FC<Props> = ({
       });
   };
 
-  const changeIdentifierOnNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!isChangeInIdentifierRequired) return;
-
+  const handleNameChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isChangeInIdentifierRequired) {
+      onChange(e);
+      return;
+    }
     if (e.target.value === "") setValue("identifier", "");
     else
       setValue(
@@ -182,38 +164,21 @@ export const CreateProjectModal: React.FC<Props> = ({
           .toUpperCase()
           .substring(0, 5)
       );
+    onChange(e);
   };
 
-  const handleIdentifierChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
-
     const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
-
-    setValue("identifier", alphanumericValue.toUpperCase());
     setIsChangeInIdentifierRequired(false);
+    onChange(alphanumericValue.toUpperCase());
   };
 
-  const options = workspaceMembers?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
-
-  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"
@@ -221,13 +186,13 @@ export const CreateProjectModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <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"
@@ -235,7 +200,7 @@ export const CreateProjectModal: React.FC<Props> = ({
               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="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all p-3 w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all p-3 w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
                 <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
                   {watch("cover_image") !== null && (
                     <img
@@ -247,7 +212,7 @@ export const CreateProjectModal: React.FC<Props> = ({
 
                   <div className="absolute right-2 top-2 p-2">
                     <button type="button" onClick={handleClose}>
-                      <XMarkIcon className="h-5 w-5 text-white" />
+                      <X className="h-5 w-5 text-white" />
                     </button>
                   </div>
                   <div className="absolute bottom-2 right-2">
@@ -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,44 @@ 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, onChange } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              tabIndex={1}
+                              onChange={handleNameChange(onChange)}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Project Title"
+                              className="w-full focus:border-blue-400"
+                            />
+                          )}
                         />
+                        <span className="text-xs text-red-500">{errors?.name?.message}</span>
                       </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,22 +290,44 @@ export const CreateProjectModal: React.FC<Props> = ({
                               message: "Identifier must at most be of 12 characters",
                             },
                           }}
+                          render={({ field: { value, onChange } }) => (
+                            <Input
+                              id="identifier"
+                              name="identifier"
+                              type="text"
+                              value={value}
+                              tabIndex={2}
+                              onChange={handleIdentifierChange(onChange)}
+                              hasError={Boolean(errors.identifier)}
+                              placeholder="Identifier"
+                              className="text-xs w-full focus:border-blue-400"
+                            />
+                          )}
                         />
+                        <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
                       </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}
+                              tabIndex={3}
+                              placeholder="Description..."
+                              onChange={onChange}
+                              className="text-sm !h-24 focus:border-blue-400"
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
                         />
                       </div>
                     </div>
 
                     <div className="flex items-center gap-2 flex-wrap">
-                      <div className="flex-shrink-0">
+                      <div className="flex-shrink-0" tabIndex={4}>
                         <Controller
                           name="network"
                           control={control}
@@ -350,12 +335,12 @@ export const CreateProjectModal: React.FC<Props> = ({
                             <CustomSelect
                               value={value}
                               onChange={onChange}
-                              buttonClassName="border-[0.5px] !px-2 shadow-md"
+                              buttonClassName="border-[0.5px] shadow-md !py-1.5 shadow-none"
                               label={
-                                <div className="flex items-center gap-2 -mb-0.5 py-1">
+                                <div className="flex items-center gap-2 text-custom-text-300">
                                   {currentNetwork ? (
                                     <>
-                                      <Icon iconName={currentNetwork?.icon} className="!text-xs" />
+                                      <currentNetwork.icon className="h-[18px] w-[18px]" />
                                       {currentNetwork.label}
                                     </>
                                   ) : (
@@ -371,7 +356,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                                   value={network.key}
                                   className="flex items-center gap-1"
                                 >
-                                  <Icon iconName={network.icon} className="!text-xs" />
+                                  <network.icon className="h-4 w-4" />
                                   {network.label}
                                 </CustomSelect.Option>
                               ))}
@@ -379,60 +364,30 @@ export const CreateProjectModal: React.FC<Props> = ({
                           )}
                         />
                       </div>
-                      <div className="flex-shrink-0">
+                      <div className="flex-shrink-0" tabIndex={5}>
                         <Controller
-                          name="project_lead"
+                          name="project_lead_member"
                           control={control}
-                          render={({ field: { value, onChange } }) => {
-                            const selectedMember = workspaceMembers?.find(
-                              (m) => m.member.id === value
-                            );
-
-                            return (
-                              <CustomSearchSelect
-                                value={value}
-                                onChange={onChange}
-                                options={options}
-                                buttonClassName="border-[0.5px] !px-2 shadow-md"
-                                label={
-                                  <div className="flex items-center justify-center gap-2 py-[1px]">
-                                    {value ? (
-                                      <>
-                                        <Avatar user={selectedMember?.member} />
-                                        <span>{selectedMember?.member.display_name} </span>
-                                        <span onClick={() => onChange(null)}>
-                                          <Icon
-                                            iconName="close"
-                                            className="!text-xs -mb-0.5 text-custom-text-200 hover:text-custom-text-100"
-                                          />
-                                        </span>
-                                      </>
-                                    ) : (
-                                      <>
-                                        <Icon
-                                          iconName="group"
-                                          className="!text-sm text-custom-text-400"
-                                        />
-                                        <span className="text-custom-text-400">Lead</span>
-                                      </>
-                                    )}
-                                  </div>
-                                }
-                                verticalPosition="top"
-                                noChevron
-                              />
-                            );
-                          }}
+                          render={({ field: { value, onChange } }) => (
+                            <WorkspaceMemberSelect
+                              value={value}
+                              onChange={onChange}
+                              options={workspaceMembers || []}
+                              placeholder="Select Lead"
+                            />
+                          )}
                         />
                       </div>
                     </div>
                   </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" size="sm" onClick={handleClose} tabIndex={6}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
                       {isSubmitting ? "Creating..." : "Create Project"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
@@ -442,4 +397,4 @@ export const CreateProjectModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index d6f7ba0f0..90217e69e 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";
+import { AlertTriangle } from "lucide-react";
 // 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;
-
+  // 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,27 @@ 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(() => {
+        if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
+
         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`);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project deleted successfully.",
+        });
       })
-      .catch(() =>
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Something went wrong. Please try again later.",
-        })
-      );
+        });
+      });
   };
 
   return (
@@ -105,7 +89,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -119,14 +103,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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 +116,65 @@ 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"
+                          autoComplete="off"
                         />
                       )}
                     />
                   </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"
+                          autoComplete="off"
                         />
                       )}
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" size="sm" 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..297ab7110
--- /dev/null
+++ b/web/components/project/form.tsx
@@ -0,0 +1,285 @@
+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 { Button, CustomSelect, 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((error) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: error?.error ?? "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">
+        <div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+
+        <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
+        <div className="flex items-end z-10 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 font-medium"
+                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 font-medium"
+                  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 font-medium"
+                  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..56c5ba38c 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -1,12 +1,21 @@
+export * from "./publish-project";
+export * from "./settings";
+export * from "./card-list";
+export * from "./card";
 export * from "./create-project-modal";
 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 "./form-loader";
+export * from "./form";
+export * from "./join-project-modal";
+export * from "./leave-project-modal";
 export * from "./member-select";
 export * from "./members-select";
-export * from "./label-select";
 export * from "./priority-select";
+export * from "./sidebar-list-item";
+export * from "./sidebar-list";
+export * from "./integration-card";
+export * from "./member-list";
+export * from "./member-list-item";
+export * from "./project-settings-member-defaults";
+export * from "./send-project-invitation-modal";
+export * from "./confirm-project-member-remove";
diff --git a/web/components/project/single-integration-card.tsx b/web/components/project/integration-card.tsx
similarity index 87%
rename from web/components/project/single-integration-card.tsx
rename to web/components/project/integration-card.tsx
index e7095e9ad..786f5d79e 100644
--- a/web/components/project/single-integration-card.tsx
+++ b/web/components/project/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,7 +34,10 @@ const integrationDetails: { [key: string]: any } = {
   },
 };
 
-export const SingleIntegration: React.FC<Props> = ({ integration }) => {
+// services
+const projectService = new ProjectService();
+
+export const IntegrationCard: 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
   );
 
@@ -92,7 +91,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <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-center justify-between gap-2 border-b border-custom-border-100 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
@@ -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/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 3128a0a42..08f7ed1f0 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -1,28 +1,39 @@
-import React, { useState } from "react";
-
-// headless ui
+import { useState, Fragment } from "react";
+import { useRouter } from "next/router";
 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;
+  // states
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
+  // store
+  const { project: projectStore } = useMobxStore();
+  // router
+  const router = useRouter();
 
   const handleJoin = () => {
     setIsJoiningLoading(true);
 
-    onJoin()
+    projectStore
+      .joinProject(workspaceSlug, [project.id])
       .then(() => {
         setIsJoiningLoading(false);
+
+        router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
         handleClose();
       })
       .catch(() => {
@@ -30,15 +41,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"
@@ -46,13 +53,13 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <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"
@@ -60,25 +67,31 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg 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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md 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 the project <span className="font-semibold">{project?.name}</span>?
+                    Please click the &apos;Join Project&apos; button below to continue.
                   </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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    tabIndex={1}
+                    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
deleted file mode 100644
index c155dea14..000000000
--- a/web/components/project/label-select.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import useSWR from "swr";
-
-import { useRouter } from "next/router";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// headless ui
-import { Combobox } from "@headlessui/react";
-// component
-import { CreateLabelModal } from "components/labels";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "lucide-react";
-// types
-import { Tooltip } from "components/ui";
-import { ICurrentUserResponse, IIssueLabels } from "types";
-// constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-
-type Props = {
-  value: string[];
-  projectId: string;
-  onChange: (data: any) => void;
-  labelsDetails: any[];
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  maxRender?: number;
-  hideDropdownArrow?: boolean;
-  disabled?: boolean;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const LabelSelect: React.FC<Props> = ({
-  value,
-  projectId,
-  onChange,
-  labelsDetails,
-  className = "",
-  buttonClassName = "",
-  optionsClassName = "",
-  maxRender = 2,
-  hideDropdownArrow = false,
-  disabled = false,
-  user,
-}) => {
-  const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [fetchStates, setFetchStates] = useState(false);
-
-  const [labelModal, setLabelModal] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
-
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    projectId && fetchStates ? PROJECT_ISSUE_LABELS(projectId) : null,
-    workspaceSlug && projectId && fetchStates
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId)
-      : null
-  );
-
-  const options = issueLabels?.map((label) => ({
-    value: label.id,
-    query: label.name,
-    content: (
-      <div className="flex items-center justify-start gap-2">
-        <span
-          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-          style={{
-            backgroundColor: label.color,
-          }}
-        />
-        <span>{label.name}</span>
-      </div>
-    ),
-  }));
-
-  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
-
-  const label = (
-    <div className={`flex  items-center gap-2 text-custom-text-200`}>
-      {labelsDetails.length > 0 ? (
-        labelsDetails.length <= maxRender ? (
-          <>
-            {labelsDetails.map((label) => (
-              <div
-                key={label.id}
-                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"
-              >
-                <div className="flex items-center gap-1.5 text-custom-text-200">
-                  <span
-                    className="h-2 w-2 flex-shrink-0 rounded-full"
-                    style={{
-                      backgroundColor: label?.color ?? "#000000",
-                    }}
-                  />
-                  {label.name}
-                </div>
-              </div>
-            ))}
-          </>
-        ) : (
-          <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={labelsDetails.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" />
-                {`${value.length} Labels`}
-              </div>
-            </Tooltip>
-          </div>
-        )
-      ) : (
-        ""
-      )}
-    </div>
-  );
-
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-  const footerOption = (
-    <button
-      type="button"
-      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
-      onClick={() => setLabelModal(true)}
-    >
-      <span className="flex items-center justify-start gap-1 text-custom-text-200">
-        <PlusIcon className="h-4 w-4" aria-hidden="true" />
-        <span>Create New Label</span>
-      </span>
-    </button>
-  );
-
-  return (
-    <>
-      {projectId && (
-        <CreateLabelModal
-          isOpen={labelModal}
-          handleClose={() => setLabelModal(false)}
-          projectId={projectId}
-          user={user}
-        />
-      )}
-      <Combobox
-        as="div"
-        className={`flex-shrink-0 text-left ${className}`}
-        value={value}
-        onChange={onChange}
-        disabled={disabled}
-        multiple
-      >
-        {({ open }: { open: boolean }) => {
-          if (open) {
-            if (!isOpen) setIsOpen(true);
-            setFetchStates(true);
-          } else if (isOpen) setIsOpen(false);
-
-          return (
-            <>
-              <Combobox.Button
-                ref={dropdownBtn}
-                type="button"
-                className={`flex items-center justify-between gap-1 w-full text-xs ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : value.length <= maxRender
-                    ? "cursor-pointer"
-                    : "cursor-pointer hover:bg-custom-background-80"
-                }  ${buttonClassName}`}
-              >
-                {label}
-                {!hideDropdownArrow && !disabled && (
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                )}
-              </Combobox.Button>
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-                <Combobox.Options
-                  ref={dropdownOptions}
-                  className={`absolute z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap mt-1 ${optionsClassName}`}
-                >
-                  <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                    <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
-                    <Combobox.Input
-                      className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                      value={query}
-                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Search"
-                      displayValue={(assigned: any) => assigned?.name}
-                    />
-                  </div>
-                  <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                    {filteredOptions ? (
-                      filteredOptions.length > 0 ? (
-                        filteredOptions.map((option) => (
-                          <Combobox.Option
-                            key={option.value}
-                            value={option.value}
-                            className={({ active, selected }) =>
-                              `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                active && !selected ? "bg-custom-background-80" : ""
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                            }
-                          >
-                            {({ selected }) => (
-                              <>
-                                {option.content}
-                                {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
-                              </>
-                            )}
-                          </Combobox.Option>
-                        ))
-                      ) : (
-                        <span className="flex items-center gap-2 p-1">
-                          <p className="text-left text-custom-text-200 ">No matching results</p>
-                        </span>
-                      )
-                    ) : (
-                      <p className="text-center text-custom-text-200">Loading...</p>
-                    )}
-                  </div>
-                  {footerOption}
-                </Combobox.Options>
-              </div>
-            </>
-          );
-        }}
-      </Combobox>
-    </>
-  );
-};
diff --git a/web/components/project/confirm-project-leave-modal.tsx b/web/components/project/leave-project-modal.tsx
similarity index 65%
rename from web/components/project/confirm-project-leave-modal.tsx
rename to web/components/project/leave-project-modal.tsx
index 7d6582869..421234ab6 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 { AlertTriangleIcon } from "lucide-react";
 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,47 @@ 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, onClose } = 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 });
+    onClose();
   };
 
   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 +94,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"
@@ -116,13 +105,13 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              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"
@@ -130,14 +119,11 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangleIcon 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 +133,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 +167,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" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" size="sm" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Leaving..." : "Leave Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
new file mode 100644
index 000000000..84d29079c
--- /dev/null
+++ b/web/components/project/member-list-item.tsx
@@ -0,0 +1,201 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ConfirmProjectMemberRemove } from "components/project";
+// ui
+import { CustomSelect, Tooltip } from "@plane/ui";
+// icons
+import { ChevronDown, XCircle } from "lucide-react";
+// constants
+import { ROLE } from "constants/workspace";
+// types
+import { TUserProjectRole } from "types";
+
+type Props = {
+  member: any;
+};
+
+export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
+  const { member } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<any | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<any | null>(null);
+  // store
+  const {
+    user: userStore,
+    projectMember: {
+      projectMembers,
+      fetchProjectMembers,
+      removeMemberFromProject,
+      updateMember,
+      deleteProjectInvitation,
+    },
+  } = useMobxStore();
+  // hooks
+  const { setToastAlert } = useToast();
+  // fetching project members
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // derived values
+  const user = userStore.currentUser;
+  const { currentProjectMemberInfo, currentProjectRole } = userStore;
+  const isAdmin = currentProjectRole === 20;
+  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
+
+  return (
+    <>
+      <ConfirmProjectMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={selectedRemoveMember ?? selectedInviteRemoveMember}
+        handleDelete={async () => {
+          if (!workspaceSlug || !projectId) return;
+
+          // if the user is a member
+          if (selectedRemoveMember) {
+            await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), selectedRemoveMember.id);
+          }
+          // if the user is an invite
+          if (selectedInviteRemoveMember) {
+            await deleteProjectInvitation(
+              workspaceSlug.toString(),
+              projectId.toString(),
+              selectedInviteRemoveMember.id
+            );
+            mutate(`PROJECT_INVITATIONS_${projectId.toString()}`);
+          }
+
+          setToastAlert({
+            type: "success",
+            message: "Member removed successfully",
+            title: "Success",
+          });
+        }}
+      />
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
+        <div className="flex items-center gap-x-4 gap-y-2">
+          {member.avatar && member.avatar !== "" ? (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
+                <img
+                  src={member.avatar}
+                  alt={member.display_name || member.email}
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                />
+              </a>
+            </Link>
+          ) : (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
+                {(member.display_name ?? member.email ?? "?")[0]}
+              </a>
+            </Link>
+          )}
+
+          <div>
+            {member.member ? (
+              <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+                <a className="text-sm font-medium">
+                  {member.first_name} {member.last_name}
+                </a>
+              </Link>
+            ) : (
+              <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
+            )}
+            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs">
+          {!member?.status && (
+            <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs text-yellow-500 font-medium">
+              <p>Pending</p>
+            </div>
+          )}
+
+          <CustomSelect
+            customButton={
+              <div className="flex item-center gap-1 px-2 py-0.5 rounded">
+                <span
+                  className={`flex items-center text-xs font-medium rounded ${
+                    member.memberId !== currentProjectMemberInfo?.id ? "" : "text-custom-sidebar-text-400"
+                  }`}
+                >
+                  {ROLE[member.role as keyof typeof ROLE]}
+                </span>
+                {member.memberId !== currentProjectMemberInfo?.id && (
+                  <span className="grid place-items-center">
+                    <ChevronDown className="h-3 w-3" />
+                  </span>
+                )}
+              </div>
+            }
+            value={member.role}
+            onChange={(value: TUserProjectRole | undefined) => {
+              if (!workspaceSlug || !projectId) return;
+
+              updateMember(workspaceSlug.toString(), projectId.toString(), member.id, {
+                role: value,
+              }).catch((err) => {
+                const error = err.error;
+                const errorString = Array.isArray(error) ? error[0] : error;
+
+                setToastAlert({
+                  type: "error",
+                  title: "Error!",
+                  message: errorString ?? "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)
+            }
+            placement="bottom-end"
+          >
+            {Object.keys(ROLE).map((key) => {
+              if (currentProjectRole && currentProjectRole !== 20 && currentProjectRole < parseInt(key)) return null;
+
+              return (
+                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
+                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                </CustomSelect.Option>
+              );
+            })}
+          </CustomSelect>
+          {isAdmin && (
+            <Tooltip
+              tooltipContent={member.memberId === currentProjectMemberInfo?.member ? "Leave project" : "Remove member"}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  if (member.member) setSelectedRemoveMember(member);
+                  else setSelectedInviteRemoveMember(member);
+                }}
+                className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+              >
+                <XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
new file mode 100644
index 000000000..ba2a0198b
--- /dev/null
+++ b/web/components/project/member-list.tsx
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ProjectMemberService } from "services/project";
+// hooks
+import useUser from "hooks/use-user";
+// components
+import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
+// ui
+import { Button, Loader } from "@plane/ui";
+// icons
+import { Search } from "lucide-react";
+
+// services
+const projectInvitationService = new ProjectMemberService();
+
+export const ProjectMemberList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const {
+    project: projectStore,
+    projectMember: { projectMembers, fetchProjectMembers },
+  } = useMobxStore();
+
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const { user } = useUser();
+
+  const { data: projectInvitations } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_INVITATIONS_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => projectInvitationService.fetchProjectInvitations(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+
+  const members = [
+    ...(projectMembers?.map((item) => ({
+      id: item.id,
+      memberId: item.member?.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      display_name: item.member?.display_name,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(projectInvitations?.map((item: any) => ({
+      id: item.id,
+      memberId: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      display_name: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  const searchedMembers = members?.filter((member) => {
+    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+    const displayName = member.display_name.toLowerCase();
+    return displayName.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
+  });
+
+  return (
+    <>
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        members={members}
+        user={user}
+        onSuccess={() => {
+          mutate(`PROJECT_INVITATIONS_${projectId?.toString()}`);
+          fetchProjectMembers(workspaceSlug?.toString()!, projectId?.toString()!);
+        }}
+      />
+
+      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
+        <h4 className="text-xl font-medium">Members</h4>
+        <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+          <Search className="h-3.5 w-3.5" />
+          <input
+            className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            autoFocus={true}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <Button variant="primary" onClick={() => setInviteModal(true)}>
+          Add Member
+        </Button>
+      </div>
+      {!projectMembers || !projectInvitations ? (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      ) : (
+        <div className="divide-y divide-custom-border-100">
+          {members.length > 0
+            ? searchedMembers.map((member) => <ProjectMemberListItem key={member.id} member={member} />)
+            : null}
+          {searchedMembers.length === 0 && (
+            <h4 className="text-md text-custom-text-400 text-center mt-20">No matching member</h4>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 4fcb04268..f264a2645 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -1,17 +1,12 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// ui
-import { Avatar, CustomSearchSelect } from "components/ui";
-// icon
 import { Ban } from "lucide-react";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Avatar, CustomSearchSelect } from "@plane/ui";
 
 type Props = {
   value: any;
@@ -19,36 +14,40 @@ type Props = {
   isDisabled?: boolean;
 };
 
-export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = false }) => {
+export const MemberSelect: React.FC<Props> = observer((props) => {
+  const { value, onChange, isDisabled = false } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
+  // store
+  const {
+    projectMember: { fetchProjectMembers, projectMembers },
+  } = useMobxStore();
 
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null
   );
 
-  const options = members?.map((member) => ({
+  const options = projectMembers?.map((member) => ({
     value: member.member.id,
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
   }));
 
-  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+  const selectedOption = projectMembers?.find((m) => m.member.id === value)?.member;
 
   return (
     <CustomSearchSelect
       value={value}
       label={
         <div className="flex items-center gap-2">
-          {selectedOption && <Avatar user={selectedOption} />}
+          {selectedOption && <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />}
           {selectedOption ? (
             selectedOption?.display_name
           ) : (
@@ -77,10 +76,9 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = fa
         ]
       }
       maxHeight="md"
-      position="right"
       width="w-full"
       onChange={onChange}
       disabled={isDisabled}
     />
   );
-};
+});
diff --git a/web/components/project/members-select.tsx b/web/components/project/members-select.tsx
index 57523df8d..457dd7d80 100644
--- a/web/components/project/members-select.tsx
+++ b/web/components/project/members-select.tsx
@@ -1,193 +1,179 @@
-import React, { useRef, useState } from "react";
-
-import { useRouter } from "next/router";
-
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-import useProjectMembers from "hooks/use-project-members";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-// headless ui
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
-// components
-import { AssigneesList, Avatar, Icon, Tooltip } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
+// ui
+import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
 // types
-import { IUser } from "types";
+import { IUserLite } from "types";
 
 type Props = {
-  value: string | string[];
-  projectId: string;
-  onChange: (data: any) => void;
-  membersDetails: IUser[];
-  renderWorkspaceMembers?: boolean;
+  members: IUserLite[] | undefined;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
+  placement?: Placement;
   hideDropdownArrow?: boolean;
   disabled?: boolean;
-};
+} & (
+  | {
+      value: string[];
+      onChange: (data: string[]) => void;
+      multiple: true;
+    }
+  | {
+      value: string;
+      onChange: (data: string) => void;
+      multiple: false;
+    }
+);
 
 export const MembersSelect: React.FC<Props> = ({
   value,
-  projectId,
   onChange,
-  membersDetails,
-  renderWorkspaceMembers = false,
+  members,
   className = "",
   buttonClassName = "",
   optionsClassName = "",
+  placement,
   hideDropdownArrow = false,
   disabled = false,
+  multiple = true,
 }) => {
   const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [fetchStates, setFetchStates] = useState(false);
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
 
-  const { members } = useProjectMembers(
-    workspaceSlug?.toString(),
-    projectId,
-    fetchStates && !renderWorkspaceMembers
-  );
-
-  const { workspaceMembers } = useWorkspaceMembers(
-    workspaceSlug?.toString() ?? "",
-    fetchStates && renderWorkspaceMembers
-  );
-
-  const membersOptions = renderWorkspaceMembers ? workspaceMembers : members;
-
-  const options = membersOptions?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
+  const options = members?.map((member) => ({
+    value: member.id,
+    query: member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
+        <Avatar name={member.display_name} src={member.avatar} />
+        {member.display_name}
       </div>
     ),
   }));
 
   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="Assignee"
       tooltipContent={
-        membersDetails && membersDetails.length > 0
-          ? membersDetails.map((assignee) => assignee?.display_name).join(", ")
+        value && value.length > 0
+          ? members
+              ?.filter((m) => value.includes(m.display_name))
+              .map((m) => m.display_name)
+              .join(", ")
           : "No Assignee"
       }
       position="top"
     >
-      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+      <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
         {value && value.length > 0 && Array.isArray(value) ? (
-          <AssigneesList userIds={value} length={3} showLength={true} />
+          <AvatarGroup showTooltip={false}>
+            {value.map((assigneeId) => {
+              const member = members?.find((m) => m.id === assigneeId);
+
+              if (!member) return null;
+
+              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+            })}
+          </AvatarGroup>
         ) : (
           <span
-            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
+            className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
           "
           >
-            <Icon iconName="person" className="text-sm !leading-4" />
+            <User2 className="h-3 w-3" />
           </span>
         )}
       </div>
     </Tooltip>
   );
 
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+  const comboboxProps: any = { value, onChange, disabled };
+  if (multiple) comboboxProps.multiple = true;
 
   return (
-    <Combobox
-      as="div"
-      className={`flex-shrink-0 text-left ${className}`}
-      value={value}
-      onChange={onChange}
-      disabled={disabled}
-      multiple
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-          setFetchStates(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 w-full text-xs ${
-                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" />
-              )}
-            </Combobox.Button>
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap mt-1 ${optionsClassName}`}
-              >
-                <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                </div>
-                <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active && !selected ? "bg-custom-background-80" : ""
-                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                          }
-                        >
-                          {({ selected }) => (
-                            <>
-                              {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
-                            </>
-                          )}
-                        </Combobox.Option>
-                      ))
-                    ) : (
-                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </span>
-                    )
-                  ) : (
-                    <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
-                </div>
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
+    <Combobox as="div" className={`flex-shrink-0 text-left ${className}`} {...comboboxProps}>
+      <Combobox.Button as={React.Fragment}>
+        <button
+          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"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className={`h-3.5 w-3.5`} />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 };
diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx
index 4db844b5d..9c12e6433 100644
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@@ -1,26 +1,25 @@
-import React, { useRef, useState } from "react";
-
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// headless ui
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon } from "components/icons";
-// components
-import { Tooltip } from "components/ui";
+import { Check, ChevronDown, Search } from "lucide-react";
+import { PriorityIcon, Tooltip } from "@plane/ui";
+// helpers
+import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { TIssuePriorities } from "types";
 // constants
-import { PRIORITIES } from "constants/project";
+import { ISSUE_PRIORITIES } from "constants/issue";
 
 type Props = {
   value: TIssuePriorities;
-  onChange: (data: any) => void;
+  onChange: (data: TIssuePriorities) => void;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
+  placement?: Placement;
+  showTitle?: boolean;
+  highlightUrgentPriority?: boolean;
   hideDropdownArrow?: boolean;
   disabled?: boolean;
 };
@@ -31,64 +30,57 @@ export const PrioritySelect: React.FC<Props> = ({
   className = "",
   buttonClassName = "",
   optionsClassName = "",
+  placement,
+  showTitle = false,
+  highlightUrgentPriority = true,
   hideDropdownArrow = false,
   disabled = false,
 }) => {
   const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
 
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const options = PRIORITIES?.map((priority) => ({
-    value: priority,
-    query: priority,
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = ISSUE_PRIORITIES?.map((priority) => ({
+    value: priority.key,
+    query: priority.key,
     content: (
       <div className="flex items-center gap-2">
-        <PriorityIcon priority={priority} className="text-sm" />
-        {priority ?? "None"}
+        <PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />
+        {priority.title}
       </div>
     ),
   }));
 
   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";
+  const selectedOption = value ? capitalizeFirstLetter(value) : "None";
 
   const label = (
     <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"
-        } items-center`}
-      >
-        <span className="flex gap-1 items-center text-custom-text-200 text-xs">
-          <PriorityIcon
-            priority={value}
-            className={`text-sm ${
-              value === "urgent"
-                ? "text-white"
-                : value === "high"
-                ? "text-orange-500"
-                : value === "medium"
-                ? "text-yellow-500"
-                : value === "low"
-                ? "text-green-500"
-                : "text-custom-text-200"
-            }`}
-          />
-        </span>
+      <div className="flex items-center gap-2">
+        <PriorityIcon
+          priority={value}
+          className={`h-3.5 w-3.5 ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
+        />
+        {showTitle && <span className="capitalize text-xs">{value}</span>}
       </div>
     </Tooltip>
   );
 
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
   return (
     <Combobox
       as="div"
@@ -97,77 +89,77 @@ export const PrioritySelect: React.FC<Props> = ({
       onChange={onChange}
       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 text-xs ${
-                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" />
-              )}
-            </Combobox.Button>
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap mt-1 ${optionsClassName}`}
-              >
-                <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                </div>
-                <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active && !selected ? "bg-custom-background-80" : ""
-                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                          }
-                        >
-                          {({ selected }) => (
-                            <>
-                              {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
-                            </>
-                          )}
-                        </Combobox.Option>
-                      ))
-                    ) : (
-                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </span>
-                    )
-                  ) : (
-                    <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
-                </div>
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded border-[0.5px] ${
+            value === "urgent"
+              ? highlightUrgentPriority
+                ? "border-red-500/20 bg-red-500"
+                : "border-custom-border-300"
+              : "border-custom-border-300"
+          } ${
+            !disabled
+              ? `${
+                  value === "urgent" && highlightUrgentPriority ? "hover:bg-red-400" : "hover:bg-custom-background-80"
+                }`
+              : ""
+          } ${disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"} ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 };
diff --git a/web/components/project/project-settings-member-defaults.tsx b/web/components/project/project-settings-member-defaults.tsx
new file mode 100644
index 000000000..fd0f806c3
--- /dev/null
+++ b/web/components/project/project-settings-member-defaults.tsx
@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import { Controller, useForm } from "react-hook-form";
+
+import { MemberSelect } from "components/project";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IProject, IUserLite, IWorkspace } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
+export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  const { currentProjectRole } = userStore;
+  const isAdmin = currentProjectRole === 20;
+  // hooks
+  const { setToastAlert } = useToast();
+  // form info
+  const { reset, control } = useForm<IProject>({ defaultValues });
+  // fetching user members
+  useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useEffect(() => {
+    if (!currentProjectDetails) return;
+
+    reset({
+      ...currentProjectDetails,
+      default_assignee: currentProjectDetails.default_assignee?.id ?? currentProjectDetails.default_assignee,
+      project_lead: (currentProjectDetails.project_lead as IUserLite)?.id ?? currentProjectDetails.project_lead,
+      workspace: (currentProjectDetails.workspace as IWorkspace).id,
+    });
+  }, [currentProjectDetails, reset]);
+
+  const submitChanges = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    reset({
+      ...currentProjectDetails,
+      default_assignee: currentProjectDetails?.default_assignee?.id ?? currentProjectDetails?.default_assignee,
+      project_lead: (currentProjectDetails?.project_lead as IUserLite)?.id ?? currentProjectDetails?.project_lead,
+      ...formData,
+    });
+
+    await projectStore
+      .updateProject(workspaceSlug.toString(), projectId.toString(), {
+        default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
+        project_lead: formData.project_lead === "none" ? null : formData.project_lead,
+      })
+      .then(() => {
+        projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString());
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Defaults</h3>
+      </div>
+
+      <div className="flex flex-col gap-2 pb-4 w-full">
+        <div className="flex items-center py-8 gap-4 w-full">
+          <div className="flex flex-col gap-2 w-1/2">
+            <h4 className="text-sm">Project Lead</h4>
+            <div className="">
+              {currentProjectDetails ? (
+                <Controller
+                  control={control}
+                  name="project_lead"
+                  render={({ field: { value } }) => (
+                    <MemberSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ project_lead: val });
+                      }}
+                      isDisabled={!isAdmin}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2 w-1/2">
+            <h4 className="text-sm">Default Assignee</h4>
+            <div className="">
+              {currentProjectDetails ? (
+                <Controller
+                  control={control}
+                  name="default_assignee"
+                  render={({ field: { value } }) => (
+                    <MemberSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ default_assignee: val });
+                      }}
+                      isDisabled={!isAdmin}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
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..f03e0abcc 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -1,33 +1,24 @@
 import React, { useEffect, useState } from "react";
-// next imports
 import { useRouter } from "next/router";
-// react-hook-form
-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 { CustomPopover } from "./popover";
-// mobx react lite
 import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-import { IProjectPublishSettings, TProjectPublishViews } from "store/project-publish";
+// ui components
+import { Button, Loader, ToggleSwitch } from "@plane/ui";
+import { Check, CircleDot, Globe2 } from "lucide-react";
+import { CustomPopover } from "./popover";
+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";
+// types
+import { IProject } from "types";
 
 type Props = {
-  // user: ICurrentUserResponse | undefined;
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
 };
 
 type FormData = {
@@ -59,25 +50,21 @@ const viewOptions: {
   // { key: "spreadsheet", label: "Spreadsheet" },
 ];
 
-export const PublishProjectModal: React.FC<Props> = observer(() => {
+export const PublishProjectModal: React.FC<Props> = observer((props) => {
+  const { isOpen, project, onClose } = props;
+
   const [isUnpublishing, setIsUnpublishing] = useState(false);
   const [isUpdateRequired, setIsUpdateRequired] = useState(false);
 
   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";
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const store: RootStore = useMobxStore();
-  const { projectPublish } = store;
-
-  const { user } = useUser();
-
-  const { mutateProjectDetails } = useProjectDetails();
+  const { projectPublish: projectPublishStore } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
@@ -88,12 +75,12 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     handleSubmit,
     reset,
     watch,
-  } = useForm<FormData>({
+  } = useForm({
     defaultValues,
   });
 
   const handleClose = () => {
-    projectPublish.handleProjectModal(null);
+    onClose();
 
     setIsUpdateRequired(false);
     reset({ ...defaultValues });
@@ -102,13 +89,13 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
   // prefill form with the saved settings if the project is already published
   useEffect(() => {
     if (
-      projectPublish.projectPublishSettings &&
-      projectPublish.projectPublishSettings !== "not-initialized"
+      projectPublishStore.projectPublishSettings &&
+      projectPublishStore.projectPublishSettings !== "not-initialized"
     ) {
       let userBoards: TProjectPublishViews[] = [];
 
-      if (projectPublish.projectPublishSettings?.views) {
-        const savedViews = projectPublish.projectPublishSettings?.views;
+      if (projectPublishStore.projectPublishSettings?.views) {
+        const savedViews = projectPublishStore.projectPublishSettings?.views;
 
         if (!savedViews) return;
 
@@ -122,65 +109,46 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       }
 
       const updatedData = {
-        id: projectPublish.projectPublishSettings?.id || null,
-        comments: projectPublish.projectPublishSettings?.comments || false,
-        reactions: projectPublish.projectPublishSettings?.reactions || false,
-        votes: projectPublish.projectPublishSettings?.votes || false,
-        inbox: projectPublish.projectPublishSettings?.inbox || null,
+        id: projectPublishStore.projectPublishSettings?.id || null,
+        comments: projectPublishStore.projectPublishSettings?.comments || false,
+        reactions: projectPublishStore.projectPublishSettings?.reactions || false,
+        votes: projectPublishStore.projectPublishSettings?.votes || false,
+        inbox: projectPublishStore.projectPublishSettings?.inbox || null,
         views: userBoards,
       };
 
       reset({ ...updatedData });
     }
-  }, [reset, projectPublish.projectPublishSettings]);
+  }, [reset, projectPublishStore.projectPublishSettings]);
 
   // fetch publish settings
   useEffect(() => {
-    if (!workspaceSlug) return;
+    if (!workspaceSlug || !isOpen) return;
 
-    if (
-      projectPublish.projectPublishModal &&
-      projectPublish.project_id !== null &&
-      projectPublish?.projectPublishSettings === "not-initialized"
-    ) {
-      projectPublish.getProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectPublish.project_id,
-        null
-      );
+    if (projectPublishStore.projectPublishSettings === "not-initialized") {
+      projectPublishStore.getProjectSettingsAsync(workspaceSlug.toString(), project.id);
     }
-  }, [workspaceSlug, projectPublish, projectPublish.projectPublishModal]);
+  }, [isOpen, workspaceSlug, project, projectPublishStore]);
 
   const handlePublishProject = async (payload: IProjectPublishSettings) => {
-    if (!workspaceSlug || !user) return;
+    if (!workspaceSlug) return;
 
-    const projectId = projectPublish.project_id;
-
-    return projectPublish
-      .publishProject(workspaceSlug.toString(), projectId?.toString() ?? "", payload, user)
+    return projectPublishStore
+      .publishProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
-        mutateProjectDetails();
         handleClose();
-        if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
+        // window.open(`${plane_deploy_url}/${workspaceSlug}/${project.id}`, "_blank");
         return res;
       })
       .catch((err) => err);
   };
 
   const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
-    if (!workspaceSlug || !user) return;
+    if (!workspaceSlug) return;
 
-    await projectPublish
-      .updateProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectPublish.project_id?.toString() ?? "",
-        payload.id ?? "",
-        payload,
-        user
-      )
+    await projectPublishStore
+      .updateProjectSettingsAsync(workspaceSlug.toString(), project.id, payload.id ?? "", payload)
       .then((res) => {
-        mutateProjectDetails();
-
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -201,20 +169,19 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
     setIsUnpublishing(true);
 
-    projectPublish
-      .unPublishProject(
-        workspaceSlug.toString(),
-        projectPublish.project_id as string,
-        publishId,
-        null
-      )
+    await projectPublishStore
+      .unPublishProject(workspaceSlug.toString(), project.id, publishId)
       .then((res) => {
-        mutateProjectDetails();
-
         handleClose();
         return res;
       })
-      .catch((err) => err)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong while unpublishing the project.",
+        })
+      )
       .finally(() => setIsUnpublishing(false));
   };
 
@@ -263,19 +230,16 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       },
     };
 
-    if (watch("id")) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
+    if (project.is_deployed) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
     else await handlePublishProject(payload);
   };
 
   // check if an update is required or not
   const checkIfUpdateIsRequired = () => {
-    if (
-      !projectPublish.projectPublishSettings ||
-      projectPublish.projectPublishSettings === "not-initialized"
-    )
+    if (!projectPublishStore.projectPublishSettings || projectPublishStore.projectPublishSettings === "not-initialized")
       return;
 
-    const currentSettings = projectPublish.projectPublishSettings as IProjectPublishSettings;
+    const currentSettings = projectPublishStore.projectPublishSettings as IProjectPublishSettings;
     const newSettings = getValues();
 
     if (
@@ -289,8 +253,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) {
@@ -302,7 +265,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
   };
 
   return (
-    <Transition.Root show={projectPublish.projectPublishModal} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
@@ -313,7 +276,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -327,24 +290,24 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
               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="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5 ">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
                 <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
                   {/* heading */}
                   <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
+                    {project.is_deployed && (
+                      <Button
+                        variant="danger"
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
-                        className="!px-2 !py-1.5"
                         loading={isUnpublishing}
                       >
                         {isUnpublishing ? "Unpublishing..." : "Unpublish"}
-                      </DangerButton>
+                      </Button>
                     )}
                   </div>
 
                   {/* content */}
-                  {projectPublish.fetchSettingsLoader ? (
+                  {projectPublishStore.fetchSettingsLoader ? (
                     <Loader className="px-6 space-y-4">
                       <Loader.Item height="30px" />
                       <Loader.Item height="30px" />
@@ -353,21 +316,19 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </Loader>
                   ) : (
                     <div className="px-6">
-                      {watch("id") && (
+                      {project.is_deployed && (
                         <>
                           <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
                             <div className="truncate flex-grow text-sm">
-                              {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                              {`${plane_deploy_url}/${workspaceSlug}/${project.id}`}
                             </div>
                             <div className="flex-shrink-0 relative flex items-center gap-1">
-                              <CopyLinkToClipboard
-                                copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                              />
+                              <CopyLinkToClipboard copy_link={`${plane_deploy_url}/${workspaceSlug}/${project.id}`} />
                             </div>
                           </div>
                           <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
                             <div className="w-5 h-5 overflow-hidden flex items-center">
-                              <Icon iconName="radio_button_checked" className="!text-lg" />
+                              <CircleDot className="h-5 w-5" />
                             </div>
                             <div className="text-sm">This project is live on web</div>
                           </div>
@@ -416,11 +377,9 @@ 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-4 h-4 relative flex justify-center items-center`}>
                                         {value.length > 0 && value.includes(option.key) && (
-                                          <Icon iconName="done" className="!text-lg" />
+                                          <Check className="h-5 w-5" />
                                         )}
                                       </div>
                                     </div>
@@ -482,6 +441,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                           />
                         </div>
 
+                        {/* toggle inbox */}
                         {/* <div className="relative flex justify-between items-center gap-2">
                       <div className="text-sm">Allow issue proposals</div>
                       <Controller
@@ -499,24 +459,26 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   {/* modal handlers */}
                   <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
                     <div className="flex items-center gap-1 text-custom-text-400 text-sm">
-                      <Icon iconName="public" className="!text-base" />
+                      <Globe2 className="h-4 w-4" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
-                    {!projectPublish.fetchSettingsLoader && (
+                    {!projectPublishStore.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
-                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                        {watch("id") ? (
+                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                          Cancel
+                        </Button>
+                        {project.is_deployed ? (
                           <>
                             {isUpdateRequired && (
-                              <PrimaryButton type="submit" loading={isSubmitting}>
+                              <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                                 {isSubmitting ? "Updating..." : "Update settings"}
-                              </PrimaryButton>
+                              </Button>
                             )}
                           </>
                         ) : (
-                          <PrimaryButton type="submit" loading={isSubmitting}>
+                          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                             {isSubmitting ? "Publishing..." : "Publish"}
-                          </PrimaryButton>
+                          </Button>
                         )}
                       </div>
                     )}
diff --git a/web/components/project/publish-project/popover.tsx b/web/components/project/publish-project/popover.tsx
index 5ab2d6432..b116ea3dc 100644
--- a/web/components/project/publish-project/popover.tsx
+++ b/web/components/project/publish-project/popover.tsx
@@ -3,7 +3,7 @@ import React, { Fragment } from "react";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // icons
-import { Icon } from "components/ui";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 export const CustomPopover = ({
   children,
@@ -18,16 +18,10 @@ export const CustomPopover = ({
     <Popover className="relative">
       {({ open }) => (
         <>
-          <Popover.Button
-            className={`${open ? "" : ""}  relative flex items-center gap-1 ring-0 outline-none`}
-          >
+          <Popover.Button className={`${open ? "" : ""}  relative flex items-center gap-1 ring-0 outline-none`}>
             <div className="text-sm">{label ?? placeholder}</div>
             <div className="w-5 h-5 grid place-items-center">
-              {!open ? (
-                <Icon iconName="expand_more" className="!text-base" />
-              ) : (
-                <Icon iconName="expand_less" className="!text-base" />
-              )}
+              {!open ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
             </div>
           </Popover.Button>
 
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 07b90840c..8fc895fe5 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -1,32 +1,21 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
-
 import { useForm, Controller, useFieldArray } from "react-hook-form";
-
 import { Dialog, Transition } from "@headlessui/react";
+import { ChevronDown, Plus, X } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import {
-  Avatar,
-  CustomSearchSelect,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-} from "components/ui";
-//icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
 // services
-import projectService from "services/project.service";
-import workspaceService from "services/workspace.service";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
+import { ProjectMemberService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import { ICurrentUserResponse } from "types";
+import { IUser, TUserProjectRole } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
@@ -36,12 +25,12 @@ type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   members: any[];
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   onSuccess: () => void;
 };
 
 type member = {
-  role: 5 | 10 | 15 | 20;
+  role: TUserProjectRole;
   member_id: string;
 };
 
@@ -58,18 +47,24 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendProjectInvitationModal: React.FC<Props> = (props) => {
+// services
+const projectMemberService = new ProjectMemberService();
+const workspaceService = new WorkspaceService();
+
+export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
   const { isOpen, setIsOpen, members, user, onSuccess } = props;
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
-  const { memberDetails } = useProjectMyMembership();
+
+  const { user: userStore } = useMobxStore();
+  const userRole = userStore.currentProjectRole;
 
   const { data: people } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
   );
 
   const {
@@ -92,9 +87,11 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
 
   const onSubmit = async (formData: FormValues) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
+
     const payload = { ...formData };
-    await projectService
-      .inviteProject(workspaceSlug as string, projectId as string, payload, user)
+
+    await projectMemberService
+      .bulkAddMembersToProject(workspaceSlug.toString(), projectId.toString(), payload, user)
       .then(() => {
         setIsOpen(false);
         setToastAlert({
@@ -143,7 +140,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
     query: person.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={person.member} />
+        <Avatar name={person.member?.display_name} src={person.member?.avatar} />
         {person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
       </div>
     ),
@@ -161,7 +158,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -175,65 +172,51 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
               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-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md 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}
                               name={`members.${index}.member_id`}
                               rules={{ required: "Please select a member" }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomSearchSelect
-                                  value={value}
-                                  customButton={
-                                    <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
-                                          }
-                                        </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>
-                                  }
-                                  onChange={(val: string) => {
-                                    onChange(val);
-                                  }}
-                                  options={options}
-                                  position="left"
-                                  width="w-full min-w-[12rem]"
-                                />
-                              )}
+                              render={({ field: { value, onChange } }) => {
+                                const selectedMember = people?.find((p) => p.member.id === value)?.member;
+
+                                return (
+                                  <CustomSearchSelect
+                                    value={value}
+                                    customButton={
+                                      <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 name={selectedMember?.display_name} src={selectedMember?.avatar} />
+                                            {selectedMember?.display_name}
+                                          </div>
+                                        ) : (
+                                          <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
+                                        )}
+                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                      </button>
+                                    }
+                                    onChange={(val: string) => {
+                                      onChange(val);
+                                    }}
+                                    options={options}
+                                    width="w-full min-w-[12rem]"
+                                  />
+                                );
+                              }}
                             />
                             {errors.members && errors.members[index]?.member_id && (
                               <span className="text-sm px-1 text-red-500">
@@ -252,18 +235,18 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                   <CustomSelect
                                     {...field}
                                     customButton={
-                                      <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.5 text-sm text-left">
+                                      <div 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.5 text-sm text-left">
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
-                                        <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                                      </button>
+                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                      </div>
                                     }
                                     input
                                     width="w-full"
                                   >
                                     {Object.entries(ROLE).map(([key, label]) => {
-                                      if (parseInt(key) > (memberDetails?.role ?? 5)) return null;
+                                      if (parseInt(key) > (userRole ?? 5)) return null;
 
                                       return (
                                         <CustomSelect.Option key={key} value={key}>
@@ -287,7 +270,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                   className="self-center place-items-center rounded"
                                   onClick={() => remove(index)}
                                 >
-                                  <XMarkIcon className="h-4 w-4 text-custom-text-200" />
+                                  <X className="h-4 w-4 text-custom-text-200" />
                                 </button>
                               )}
                             </div>
@@ -303,18 +286,18 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                       className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" size="sm" 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>
@@ -325,6 +308,4 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
-
-export default SendProjectInvitationModal;
+});
diff --git a/web/components/project/settings-sidebar.tsx b/web/components/project/settings-sidebar.tsx
deleted file mode 100644
index 123dc6282..000000000
--- a/web/components/project/settings-sidebar.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-export const SettingsSidebar = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const projectLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    },
-    {
-      label: "Members",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
-    },
-    {
-      label: "Features",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
-    },
-    {
-      label: "States",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
-    },
-    {
-      label: "Labels",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
-    },
-    {
-      label: "Integrations",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
-    },
-    {
-      label: "Estimates",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
-    },
-    {
-      label: "Automations",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
-    },
-  ];
-
-  const workspaceLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: `/${workspaceSlug}/settings`,
-    },
-    {
-      label: "Members",
-      href: `/${workspaceSlug}/settings/members`,
-    },
-    {
-      label: "Billing & Plans",
-      href: `/${workspaceSlug}/settings/billing`,
-    },
-    {
-      label: "Integrations",
-      href: `/${workspaceSlug}/settings/integrations`,
-    },
-    {
-      label: "Imports",
-      href: `/${workspaceSlug}/settings/imports`,
-    },
-    {
-      label: "Exports",
-      href: `/${workspaceSlug}/settings/exports`,
-    },
-  ];
-
-  const profileLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "Profile",
-      href: `/${workspaceSlug}/me/profile`,
-    },
-    {
-      label: "Activity",
-      href: `/${workspaceSlug}/me/profile/activity`,
-    },
-    {
-      label: "Preferences",
-      href: `/${workspaceSlug}/me/profile/preferences`,
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-6 w-80 px-5">
-      <div className="flex flex-col gap-2">
-        <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
-        <div className="flex flex-col gap-1 w-full">
-          {(projectId ? projectLinks : workspaceLinks).map((link) => (
-            <Link key={link.href} href={link.href}>
-              <a>
-                <div
-                  className={`px-4 py-2 text-sm font-medium rounded-md ${
-                    (
-                      link.label === "Import"
-                        ? router.asPath.includes(link.href)
-                        : router.asPath === link.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"
-                  }`}
-                >
-                  {link.label}
-                </div>
-              </a>
-            </Link>
-          ))}
-        </div>
-      </div>
-      {!projectId && (
-        <div className="flex flex-col gap-2">
-          <span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
-          <div className="flex flex-col gap-1 w-full">
-            {profileLinks.map((link) => (
-              <Link key={link.href} href={link.href}>
-                <a>
-                  <div
-                    className={`px-4 py-2 text-sm font-medium rounded-md ${
-                      (
-                        link.label === "Import"
-                          ? router.asPath.includes(link.href)
-                          : router.asPath === link.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"
-                    }`}
-                  >
-                    {link.label}
-                  </div>
-                </a>
-              </Link>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/web/components/project/settings/delete-project-section.tsx b/web/components/project/settings/delete-project-section.tsx
new file mode 100644
index 000000000..7d5b3d26b
--- /dev/null
+++ b/web/components/project/settings/delete-project-section.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+// ui
+import { Disclosure, Transition } from "@headlessui/react";
+import { Button, Loader } from "@plane/ui";
+// icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+// types
+import { IProject } from "types";
+
+export interface IDeleteProjectSection {
+  projectDetails: IProject;
+  handleDelete: () => void;
+}
+
+export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) => {
+  const { projectDetails, handleDelete } = props;
+
+  return (
+    <Disclosure as="div" className="border-t border-custom-border-100">
+      {({ 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>
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+          </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={handleDelete}>
+                        Delete my project
+                      </Button>
+                    </div>
+                  ) : (
+                    <Loader className="mt-2 w-full">
+                      <Loader.Item height="38px" width="144px" />
+                    </Loader>
+                  )}
+                </div>
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
new file mode 100644
index 000000000..fc32c6a92
--- /dev/null
+++ b/web/components/project/settings/features-list.tsx
@@ -0,0 +1,134 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react";
+import { DiceIcon, ToggleSwitch } from "@plane/ui";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { MiscellaneousEventType, TrackEventService } from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IProject } from "types";
+
+type Props = {};
+
+const PROJECT_FEATURES_LIST = [
+  {
+    title: "Cycles",
+    description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    icon: <ContrastIcon className="h-4 w-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.",
+    icon: <DiceIcon 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.",
+    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.",
+    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.",
+    icon: <Inbox className="h-4 w-4 text-fuchsia-500 flex-shrink-0" />,
+    property: "inbox_view",
+  },
+];
+
+const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType => {
+  switch (feature) {
+    case "Cycles":
+      return toggle ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF";
+    case "Modules":
+      return toggle ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF";
+    case "Views":
+      return toggle ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF";
+    case "Pages":
+      return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
+    case "Inbox":
+      return toggle ? "TOGGLE_INBOX_ON" : "TOGGLE_INBOX_OFF";
+    default:
+      throw new Error("Invalid feature");
+  }
+};
+
+// services
+const trackEventService = new TrackEventService();
+
+export const ProjectFeaturesList: FC<Props> = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const {
+    project: { currentProjectDetails, updateProject },
+    user: { currentUser, currentProjectRole },
+  } = useMobxStore();
+  const isAdmin = currentProjectRole === 20;
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleSubmit = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId || !currentProjectDetails) return;
+    setToastAlert({
+      type: "success",
+      title: "Success!",
+      message: "Project feature updated successfully.",
+    });
+    updateProject(workspaceSlug.toString(), projectId.toString(), formData);
+  };
+
+  if (!currentUser) return <></>;
+
+  return (
+    <div>
+      {PROJECT_FEATURES_LIST.map((feature) => (
+        <div
+          key={feature.property}
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 p-4"
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">{feature.icon}</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>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={currentProjectDetails?.[feature.property as keyof IProject]}
+            onChange={() => {
+              trackEventService.trackMiscellaneousEvent(
+                {
+                  workspaceId: (currentProjectDetails?.workspace as any)?.id,
+                  workspaceSlug,
+                  projectId,
+                  projectIdentifier: currentProjectDetails?.identifier,
+                  projectName: currentProjectDetails?.name,
+                },
+                getEventType(feature.title, !currentProjectDetails?.[feature.property as keyof IProject]),
+                currentUser
+              );
+              handleSubmit({
+                [feature.property]: !currentProjectDetails?.[feature.property as keyof IProject],
+              });
+            }}
+            disabled={!isAdmin}
+            size="sm"
+          />
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/project/settings/index.ts b/web/components/project/settings/index.ts
new file mode 100644
index 000000000..0bf79ec17
--- /dev/null
+++ b/web/components/project/settings/index.ts
@@ -0,0 +1,2 @@
+export * from "./delete-project-section";
+export * from "./features-list";
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
deleted file mode 100644
index f6ed8be3b..000000000
--- a/web/components/project/settings/single-label.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-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";
-// icons
-import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssueLabels } from "types";
-
-type Props = {
-  label: IIssueLabels;
-  issueLabels: IIssueLabels[];
-  editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: (labelId: string) => void;
-};
-
-const defaultValues: Partial<IIssueLabels> = {
-  name: "",
-  color: "#ff0000",
-};
-
-const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
-  const [newLabelForm, setNewLabelForm] = useState(false);
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    watch,
-    control,
-  } = useForm<IIssueLabels>({ defaultValues });
-
-  const children = issueLabels?.filter((l) => l.parent === label.id);
-
-  return (
-    <>
-      {children && children.length === 0 ? (
-        <div className="gap-2 space-y-3 divide-y rounded-md border  border-custom-border-200 p-3 md:w-2/3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span
-                className="h-3 w-3 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: label.color,
-                }}
-              />
-              <h6 className="text-sm">{label.name}</h6>
-            </div>
-            <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>
-          </div>
-          <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
-            <div className="h-8 w-8 flex-shrink-0">
-              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-custom-background-80">
-                {({ open }) => (
-                  <>
-                    <Popover.Button
-                      className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                        open ? "text-custom-text-100" : "text-custom-text-200"
-                      }`}
-                    >
-                      {watch("color") && watch("color") !== "" && (
-                        <span
-                          className="h-4 w-4 rounded"
-                          style={{
-                            backgroundColor: watch("color") ?? "black",
-                          }}
-                        />
-                      )}
-                    </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
-                              color={value}
-                              onChange={(value) => onChange(value.hex)}
-                            />
-                          )}
-                        />
-                      </Popover.Panel>
-                    </Transition>
-                  </>
-                )}
-              </Popover>
-            </div>
-            <div className="flex w-full 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={() => setNewLabelForm(false)}>Cancel</SecondaryButton>
-            <PrimaryButton loading={isSubmitting}>{isSubmitting ? "Adding" : "Add"}</PrimaryButton>
-          </div>
-        </div>
-      ) : (
-        <div className="rounded-md bg-custom-background-80 p-4 text-custom-text-100">
-          <h3 className="flex items-center gap-2 font-medium leading-5">
-            <RectangleGroupIcon className="h-5 w-5" />
-            This is the label group title
-          </h3>
-          <div className="mt-4 pl-5">
-            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-custom-background-90">
-              <h5 className="flex items-center gap-2">
-                <div className="h-2 w-2 rounded-full bg-red-600" />
-                This is the label title
-              </h5>
-              <button type="button" className="hidden group-hover:block">
-                <PencilIcon className="h-3 w-3" />
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default SingleLabel;
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
new file mode 100644
index 000000000..02014ed50
--- /dev/null
+++ b/web/components/project/sidebar-list-item.tsx
@@ -0,0 +1,343 @@
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { Disclosure, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+// icons
+import {
+  MoreVertical,
+  PenSquare,
+  LinkIcon,
+  Star,
+  Trash2,
+  FileText,
+  Settings,
+  Share2,
+  LogOut,
+  ChevronDown,
+} 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";
+// components
+import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
+import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project";
+
+type Props = {
+  project: IProject;
+  provided?: DraggableProvided;
+  snapshot?: DraggableStateSnapshot;
+  handleCopyText: () => void;
+  shortContextMenu?: boolean;
+};
+
+const navigation = (workspaceSlug: string, projectId: string) => [
+  {
+    name: "Issues",
+    href: `/${workspaceSlug}/projects/${projectId}/issues`,
+    Icon: LayersIcon,
+  },
+  {
+    name: "Cycles",
+    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+    Icon: ContrastIcon,
+  },
+  {
+    name: "Modules",
+    href: `/${workspaceSlug}/projects/${projectId}/modules`,
+    Icon: DiceIcon,
+  },
+  {
+    name: "Views",
+    href: `/${workspaceSlug}/projects/${projectId}/views`,
+    Icon: PhotoFilterIcon,
+  },
+  {
+    name: "Pages",
+    href: `/${workspaceSlug}/projects/${projectId}/pages`,
+    Icon: FileText,
+  },
+  {
+    name: "Settings",
+    href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    Icon: Settings,
+  },
+];
+
+export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
+  const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
+  // store
+  const { project: projectStore, theme: themeStore } = 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 [publishModalOpen, setPublishModal] = useState(false);
+
+  const isAdmin = project.member_role === 20;
+  const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
+
+  const isCollapsed = themeStore.sidebarCollapsed;
+
+  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 isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
+      <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-2.5 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
+                      isCollapsed ? "" : "group-hover:!flex"
+                    } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
+                    {...provided?.dragHandleProps}
+                  >
+                    <MoreVertical className="h-3.5" />
+                    <MoreVertical className="-ml-5 h-3.5" />
+                  </button>
+                </Tooltip>
+              )}
+              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
+                <Disclosure.Button
+                  as="div"
+                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                    isCollapsed ? "justify-center" : `justify-between`
+                  }`}
+                >
+                  <div
+                    className={`flex items-center flex-grow w-full truncate gap-x-2 ${
+                      isCollapsed ? "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>
+                    )}
+
+                    {!isCollapsed && (
+                      <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>
+                    )}
+                  </div>
+                  {!isCollapsed && (
+                    <ChevronDown
+                      className={`h-4 w-4 flex-shrink-0 ${
+                        open ? "rotate-180" : ""
+                      } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
+                    />
+                  )}
+                </Disclosure.Button>
+              </Tooltip>
+
+              {!isCollapsed && (
+                <CustomMenu
+                  className="hidden group-hover:block flex-shrink-0"
+                  buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
+                  ellipsis
+                  placement="bottom-start"
+                >
+                  {!project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <Star className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Add to favorites</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  {project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <Star className="h-3.5 w-3.5 stroke-[1.5] 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-3.5 w-3.5 stroke-[1.5]" />
+                      <span>Copy project link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+
+                  {/* publish project settings */}
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
+                      <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">
+                          <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        </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">
+                        <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <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="h-3.5 w-3.5 stroke-[1.5] 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">
+                      <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>Settings</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+
+                  {/* leave project */}
+                  {isViewerOrGuest && (
+                    <CustomMenu.MenuItem onClick={handleLeaveProject}>
+                      <div className="flex items-center justify-start gap-2">
+                        <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Leave Project</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+
+                  {!shortContextMenu && isAdmin && (
+                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
+                      <span className="flex items-center justify-start gap-2 ">
+                        <Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Delete project</span>
+                      </span>
+                    </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-1 mt-1 ${isCollapsed ? "" : "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={!isCollapsed}
+                        >
+                          <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-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                            } ${isCollapsed ? "justify-center" : ""}`}
+                          >
+                            <item.Icon className="h-4 w-4 stroke-[1.5]" />
+                            {!isCollapsed && 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..a889e7fae 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -1,57 +1,41 @@
 import React, { useState, FC, useRef, useEffect } from "react";
-
 import { useRouter } from "next/router";
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
-// headless ui
+import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
 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";
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyUrlToClipboard } 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();
-
+export const ProjectSidebarList: FC = observer(() => {
+  // states
   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);
-
-  // router
-  const [isScrolled, setIsScrolled] = useState(false);
-
+  const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
+  // refs
   const containerRef = useRef<HTMLDivElement | null>(null);
 
+  const { theme: themeStore, project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  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,15 +45,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 : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -85,39 +62,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 +75,22 @@ export const ProjectSidebarList: FC = () => {
       });
   };
 
-  const handleScroll = () => {
-    if (containerRef.current) {
-      const scrollTop = containerRef.current.scrollTop;
-      setIsScrolled(scrollTop > 0);
-    }
-  };
+  const isCollapsed = themeStore.sidebarCollapsed || false;
 
+  /**
+   * 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);
@@ -150,21 +100,19 @@ export const ProjectSidebarList: FC = () => {
 
   return (
     <>
-      <CreateProjectModal
-        isOpen={isProjectModalOpen}
-        setIsOpen={setIsProjectModalOpen}
-        setToFavorite={isFavoriteProjectCreate}
-        user={user}
-      />
-      <DeleteProjectModal
-        isOpen={deleteProjectModal}
-        onClose={() => setDeleteProjectModal(false)}
-        data={projectToDelete}
-        user={user}
-      />
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isProjectModalOpen}
+          onClose={() => {
+            setIsProjectModalOpen(false);
+          }}
+          setToFavorite={isFavoriteProjectCreate}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
       <div
         ref={containerRef}
-        className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
+        className={`h-full overflow-y-auto px-4 space-y-2 ${
           isScrolled ? "border-t border-custom-sidebar-border-300" : ""
         }`}
       >
@@ -173,21 +121,22 @@ export const ProjectSidebarList: FC = () => {
             {(provided) => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
                 {orderedFavProjects && orderedFavProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
+                  <Disclosure as="div" className="flex flex-col" defaultOpen>
                     {({ open }) => (
                       <>
-                        {!store?.theme?.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">
+                        {!isCollapsed && (
+                          <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
                               type="button"
-                              className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
+                              className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
                             >
                               Favorites
-                              <Icon
-                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                              />
+                              {open ? (
+                                <ChevronDown className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              )}
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
@@ -196,36 +145,42 @@ export const ProjectSidebarList: FC = () => {
                                 setIsProjectModalOpen(true);
                               }}
                             >
-                              <Icon iconName="add" />
+                              <Plus className="h-3 w-3" />
                             </button>
                           </div>
                         )}
-                        <Disclosure.Panel as="div" className="space-y-2">
-                          {orderedFavProjects.map((project, index) => (
-                            <Draggable
-                              key={project.id}
-                              draggableId={project.id}
-                              index={index}
-                              isDragDisabled={!project.is_member}
-                            >
-                              {(provided, snapshot) => (
-                                <div ref={provided.innerRef} {...provided.draggableProps}>
-                                  <SingleSidebarProject
-                                    key={project.id}
-                                    project={project}
-                                    sidebarCollapse={store?.theme?.sidebarCollapsed}
-                                    provided={provided}
-                                    snapshot={snapshot}
-                                    handleDeleteProject={() => handleDeleteProject(project)}
-                                    handleCopyText={() => handleCopyText(project.id)}
-                                    handleProjectLeave={() => setProjectToLeaveId(project.id)}
-                                    shortContextMenu
-                                  />
-                                </div>
-                              )}
-                            </Draggable>
-                          ))}
-                        </Disclosure.Panel>
+                        <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 as="div" className="space-y-2">
+                            {orderedFavProjects.map((project, index) => (
+                              <Draggable
+                                key={project.id}
+                                draggableId={project.id}
+                                index={index}
+                                isDragDisabled={!project.is_member}
+                              >
+                                {(provided, snapshot) => (
+                                  <div ref={provided.innerRef} {...provided.draggableProps}>
+                                    <ProjectSidebarListItem
+                                      key={project.id}
+                                      project={project}
+                                      provided={provided}
+                                      snapshot={snapshot}
+                                      handleCopyText={() => handleCopyText(project.id)}
+                                      shortContextMenu
+                                    />
+                                  </div>
+                                )}
+                              </Draggable>
+                            ))}
+                          </Disclosure.Panel>
+                        </Transition>
                         {provided.placeholder}
                       </>
                     )}
@@ -240,21 +195,22 @@ export const ProjectSidebarList: FC = () => {
             {(provided) => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
                 {orderedJoinedProjects && orderedJoinedProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
+                  <Disclosure as="div" className="flex flex-col" defaultOpen>
                     {({ open }) => (
                       <>
-                        {!store?.theme?.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">
+                        {!isCollapsed && (
+                          <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
                               type="button"
-                              className="flex items-center gap-1 font-semibold text-left whitespace-nowrap"
+                              className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
                             >
                               Projects
-                              <Icon
-                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                              />
+                              {open ? (
+                                <ChevronDown className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              )}
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
@@ -263,7 +219,7 @@ export const ProjectSidebarList: FC = () => {
                                 setIsProjectModalOpen(true);
                               }}
                             >
-                              <Icon iconName="add" />
+                              <Plus className="h-3 w-3" />
                             </button>
                           </div>
                         )}
@@ -280,14 +236,11 @@ 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}
                                       provided={provided}
                                       snapshot={snapshot}
-                                      handleDeleteProject={() => handleDeleteProject(project)}
-                                      handleProjectLeave={() => setProjectToLeaveId(project.id)}
                                       handleCopyText={() => handleCopyText(project.id)}
                                     />
                                   </div>
@@ -310,18 +263,13 @@ export const ProjectSidebarList: FC = () => {
           <button
             type="button"
             className="flex w-full items-center gap-2 px-3 text-sm text-custom-sidebar-text-200"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "p",
-              });
-              document.dispatchEvent(e);
-            }}
+            onClick={() => commandPaletteStore.toggleCreateProjectModal(true)}
           >
-            <PlusIcon className="h-5 w-5" />
-            {!store?.theme?.sidebarCollapsed && "Add Project"}
+            <Plus className="h-5 w-5" />
+            {!isCollapsed && "Add Project"}
           </button>
         )}
       </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..a22f2545d 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -1,27 +1,20 @@
 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";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDown } from "lucide-react";
 // types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
-// fetch keys
-import { STATES_LIST } from "constants/fetch-keys";
+import type { IState } from "types";
 // constants
 import { GROUP_CHOICES } from "constants/project";
 
@@ -30,7 +23,6 @@ type Props = {
   isOpen: boolean;
   projectId: string;
   handleClose: () => void;
-  user: ICurrentUserResponse | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -40,14 +32,18 @@ const defaultValues: Partial<IState> = {
   group: "backlog",
 };
 
-export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
+export const CreateStateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, projectId, handleClose } = props;
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
@@ -69,36 +65,32 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
       ...formData,
     };
 
-    await stateService
-      .createState(workspaceSlug as string, projectId, payload, user)
-      .then((res) => {
-        mutate<IStateResponse>(
-          STATES_LIST(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              [res.group]: [...prevData[res.group], res],
-            };
-          },
-          false
-        );
+    await projectStateStore
+      .createState(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => {
         onClose();
       })
       .catch((err) => {
-        if (err.status === 400)
+        const error = err.response;
+
+        if (typeof error === "object") {
+          Object.keys(error).forEach((key) => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: Array.isArray(error[key]) ? error[key].join(", ") : error[key],
+            });
+          });
+        } else {
           setToastAlert({
             type: "error",
             title: "Error!",
-            message: "Another state exists with the same name. Please try again with another name.",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "State could not be created. Please try again.",
+            message:
+              error ?? err.status === 400
+                ? "Another state exists with the same name. Please try again with another name."
+                : "State could not be created. Please try again.",
           });
+        }
       });
   };
 
@@ -114,7 +106,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -128,29 +120,38 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg 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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-custom-shadow-md 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>
@@ -180,7 +181,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                           {({ open }) => (
                             <>
                               <Popover.Button
-                                className={`group inline-flex items-center rounded-md bg-custom-background-80 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                className={`group inline-flex items-center rounded-md bg-custom-background-100 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
                                   open ? "text-custom-text-100" : "text-custom-text-200"
                                 }`}
                               >
@@ -193,7 +194,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                     }}
                                   />
                                 )}
-                                <ChevronDownIcon
+                                <ChevronDown
                                   className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                     open ? "text-gray-600" : "text-gray-400"
                                   }`}
@@ -215,10 +216,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 +226,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" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Creating State..." : "Create State"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
@@ -253,4 +262,4 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 87ad14731..15a268272 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -1,23 +1,19 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
-// headless ui
 import { Popover, Transition } from "@headlessui/react";
-// services
-import stateService from "services/state.service";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
+import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
 // types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
+import type { IState } from "types";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
 // constants
@@ -26,33 +22,33 @@ import { GROUP_CHOICES } from "constants/project";
 type Props = {
   data: IState | null;
   onClose: () => void;
-  selectedGroup: StateGroup | null;
-  user: ICurrentUserResponse | undefined;
   groupLength: number;
+  selectedGroup: StateGroup | null;
 };
 
 export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
 
 const defaultValues: Partial<IState> = {
   name: "",
+  description: "",
   color: "rgb(var(--color-text-200))",
   group: "backlog",
 };
 
-export const CreateUpdateStateInline: React.FC<Props> = ({
-  data,
-  onClose,
-  selectedGroup,
-  user,
-  groupLength,
-}) => {
+export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
+  const { data, onClose, selectedGroup, groupLength } = props;
+
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // hooks
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
@@ -62,15 +58,19 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
     defaultValues,
   });
 
+  /**
+   * @description pre-populate form with data if data is present
+   */
   useEffect(() => {
     if (!data) return;
-
     reset(data);
   }, [data, reset]);
 
+  /**
+   * @description pre-populate form with default values if data is not present
+   */
   useEffect(() => {
     if (data) return;
-
     reset({
       ...defaultValues,
       group: selectedGroup ?? "backlog",
@@ -82,88 +82,73 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
     reset({ name: "", color: "#000000", group: "backlog" });
   };
 
-  const onSubmit = async (formData: IState) => {
+  const handleCreate = async (formData: IState) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
 
+    await projectStateStore
+      .createState(workspaceSlug.toString(), projectId.toString(), formData)
+      .then(() => {
+        handleClose();
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "State created successfully.",
+        });
+      })
+      .catch((error) => {
+        if (error.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State with that name already exists. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be created. Please try again.",
+          });
+      });
+  };
+
+  const handleUpdate = async (formData: IState) => {
+    if (!workspaceSlug || !projectId || !data || isSubmitting) return;
+
+    await projectStateStore
+      .updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
+      .then(() => {
+        mutate(STATES_LIST(projectId.toString()));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "State updated successfully.",
+        });
+      })
+      .catch((error) => {
+        if (error.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Another state exists with the same name. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be updated. Please try again.",
+          });
+      });
+  };
+
+  const onSubmit = async (formData: IState) => {
     const payload: IState = {
       ...formData,
     };
 
-    if (!data) {
-      await stateService
-        .createState(workspaceSlug.toString(), projectId.toString(), { ...payload }, user)
-        .then((res) => {
-          mutate<IStateResponse>(
-            STATES_LIST(projectId.toString()),
-            (prevData) => {
-              if (!prevData) return prevData;
-
-              return {
-                ...prevData,
-                [res.group]: [...prevData[res.group], res],
-              };
-            },
-            false
-          );
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "State created successfully.",
-          });
-        })
-        .catch((err) => {
-          if (err.status === 400)
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "State with that name already exists. Please try again with another name.",
-            });
-          else
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "State could not be created. Please try again.",
-            });
-        });
-    } else {
-      await stateService
-        .updateState(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          data.id,
-          {
-            ...payload,
-          },
-          user
-        )
-        .then(() => {
-          mutate(STATES_LIST(projectId.toString()));
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "State updated successfully.",
-          });
-        })
-        .catch((err) => {
-          if (err.status === 400)
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message:
-                "Another state exists with the same name. Please try again with another name.",
-            });
-          else
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "State could not be updated. Please try again.",
-            });
-        });
-    }
+    if (data) await handleUpdate(payload);
+    else await handleCreate(payload);
   };
 
   return (
@@ -213,26 +198,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 +247,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..d1785d5b6 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -1,37 +1,38 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// services
-import stateServices from "services/state.service";
+import { AlertTriangle } from "lucide-react";
 // 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";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
+import type { IState } from "types";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: IState | null;
-  user: ICurrentUserResponse | undefined;
 };
 
-export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+export const DeleteStateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data } = props;
 
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -44,28 +45,12 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
 
     setIsDeleteLoading(true);
 
-    await stateServices
-      .deleteState(workspaceSlug as string, data.project, data.id, user)
+    await projectStateStore
+      .deleteState(workspaceSlug.toString(), data.project, data.id)
       .then(() => {
-        mutate<IStateResponse>(
-          STATES_LIST(data.project),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            const stateGroup = [...prevData[data.group]].filter((s) => s.id !== data.id);
-
-            return {
-              ...prevData,
-              [data.group]: stateGroup,
-            };
-          },
-          false
-        );
         handleClose();
       })
       .catch((err) => {
-        setIsDeleteLoading(false);
-
         if (err.status === 400)
           setToastAlert({
             type: "error",
@@ -79,6 +64,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
       });
   };
 
@@ -94,7 +82,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -108,38 +96,33 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-100 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"
-                      />
+                      <AlertTriangle 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}>
+                <div className="flex justify-end gap-2 p-4 sm:px-6 bg-custom-background-100">
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -148,4 +131,4 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/states/index.ts b/web/components/states/index.ts
index 96c26eee3..f10af487a 100644
--- a/web/components/states/index.ts
+++ b/web/components/states/index.ts
@@ -1,5 +1,6 @@
 export * from "./create-update-state-inline";
 export * from "./create-state-modal";
 export * from "./delete-state-modal";
-export * from "./single-state";
+export * from "./project-setting-state-list-item";
 export * from "./state-select";
+export * from "./project-setting-state-list";
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
new file mode 100644
index 000000000..b264ad4bb
--- /dev/null
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Tooltip, StateGroupIcon } from "@plane/ui";
+// icons
+import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IState } from "types";
+
+type Props = {
+  index: number;
+  state: IState;
+  statesList: IState[];
+  handleEditState: () => void;
+  handleDeleteState: () => void;
+};
+
+export const ProjectSettingListItem: React.FC<Props> = observer((props) => {
+  const { index, state, statesList, handleEditState, handleDeleteState } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const {
+    projectState: { markStateAsDefault, moveStatePosition },
+  } = useMobxStore();
+
+  // states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // derived values
+  const groupStates = statesList.filter((s) => s.group === state.group);
+  const groupLength = groupStates.length;
+
+  const handleMakeDefault = () => {
+    if (!workspaceSlug || !projectId) return;
+    setIsSubmitting(true);
+    markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => {
+      setIsSubmitting(false);
+    });
+  };
+
+  const handleMove = (state: IState, direction: "up" | "down") => {
+    if (!workspaceSlug || !projectId) return;
+    moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index);
+  };
+
+  return (
+    <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-3">
+      <div className="flex items-center gap-3">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
+        <div>
+          <h6 className="text-sm font-medium">{addSpaceIfCamelCase(state.name)}</h6>
+          <p className="text-xs text-custom-text-200">{state.description}</p>
+        </div>
+      </div>
+      <div className="group flex items-center gap-2.5">
+        {index !== 0 && (
+          <button
+            type="button"
+            className="hidden text-custom-text-200 group-hover:inline-block"
+            onClick={() => handleMove(state, "up")}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </button>
+        )}
+        {!(index === groupLength - 1) && (
+          <button
+            type="button"
+            className="hidden text-custom-text-200 group-hover:inline-block"
+            onClick={() => handleMove(state, "down")}
+          >
+            <ArrowDown className="h-4 w-4" />
+          </button>
+        )}
+
+        <div className=" items-center gap-2.5 hidden group-hover:flex">
+          {state.default ? (
+            <span className="text-xs text-custom-text-200">Default</span>
+          ) : (
+            <button
+              type="button"
+              className="hidden text-xs text-custom-sidebar-text-400 group-hover:inline-block"
+              onClick={handleMakeDefault}
+              disabled={isSubmitting}
+            >
+              Mark as default
+            </button>
+          )}
+          <button
+            type="button"
+            className="grid place-items-center group-hover:opacity-100 opacity-0"
+            onClick={handleEditState}
+          >
+            <Pencil className="h-3.5 w-3.5 text-custom-text-200" />
+          </button>
+
+          <button
+            type="button"
+            className={`group-hover:opacity-100 opacity-0 ${
+              state.default || groupLength === 1 ? "cursor-not-allowed" : ""
+            } grid place-items-center`}
+            onClick={handleDeleteState}
+            disabled={state.default || groupLength === 1}
+          >
+            {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"}`} />
+              </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"}`} />
+              </Tooltip>
+            ) : (
+              <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
new file mode 100644
index 000000000..b5ac492ce
--- /dev/null
+++ b/web/components/states/project-setting-state-list.tsx
@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateStateInline, DeleteStateModal, ProjectSettingListItem, StateGroup } from "components/states";
+// ui
+import { Loader } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// helpers
+import { orderStateGroups } from "helpers/state.helper";
+import { sortByField } from "helpers/array.helper";
+// fetch-keys
+import { STATES_LIST } from "constants/fetch-keys";
+
+export const ProjectSettingStateList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const {
+    projectState: { groupedProjectStates, projectStates, fetchProjectStates },
+  } = useMobxStore();
+  // state
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
+
+  useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId.toString()) : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
+  );
+
+  // derived values
+  const orderedStateGroups = orderStateGroups(groupedProjectStates!);
+
+  console.log("groupedStates", groupedProjectStates);
+  console.log("orderedStateGroups", orderedStateGroups);
+
+  return (
+    <>
+      <DeleteStateModal
+        isOpen={!!selectDeleteState}
+        onClose={() => setSelectDeleteState(null)}
+        data={projectStates?.find((s) => s.id === selectDeleteState) ?? null}
+      />
+
+      <div className="space-y-8 py-6">
+        {orderedStateGroups ? (
+          <>
+            {Object.keys(orderedStateGroups).map((group) => (
+              <div key={group} className="flex flex-col gap-2">
+                <div className="flex w-full justify-between">
+                  <h4 className="text-base font-medium text-custom-text-200 capitalize">{group}</h4>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
+                    onClick={() => setActiveGroup(group as keyof StateGroup)}
+                  >
+                    <Plus className="h-4 w-4" />
+                  </button>
+                </div>
+                <div className="flex flex-col gap-2 rounded">
+                  {group === activeGroup && (
+                    <CreateUpdateStateInline
+                      data={null}
+                      groupLength={orderedStateGroups[group].length}
+                      onClose={() => {
+                        setActiveGroup(null);
+                        setSelectedState(null);
+                      }}
+                      selectedGroup={group as keyof StateGroup}
+                    />
+                  )}
+                  {sortByField(orderedStateGroups[group], "sequence").map((state, index) =>
+                    state.id !== selectedState ? (
+                      <ProjectSettingListItem
+                        key={state.id}
+                        index={index}
+                        state={state}
+                        statesList={projectStates ?? []}
+                        handleEditState={() => setSelectedState(state.id)}
+                        handleDeleteState={() => setSelectDeleteState(state.id)}
+                      />
+                    ) : (
+                      <div className="border-b-[0.5px] border-custom-border-200 last:border-b-0" key={state.id}>
+                        <CreateUpdateStateInline
+                          onClose={() => {
+                            setActiveGroup(null);
+                            setSelectedState(null);
+                          }}
+                          groupLength={orderedStateGroups[group].length}
+                          data={projectStates?.find((state) => state.id === selectedState) ?? null}
+                          selectedGroup={group as keyof StateGroup}
+                        />
+                      </div>
+                    )
+                  )}
+                </div>
+              </div>
+            ))}
+          </>
+        ) : (
+          <Loader className="space-y-5 md:w-2/3">
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
+        )}
+      </div>
+
+      {/* <div className="space-y-8 py-6">
+        {states && currentProjectDetails && orderedStateGroups ? (
+          Object.keys(orderedStateGroups || {}).map((key) => {
+            if (orderedStateGroups[key].length !== 0)
+              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>
+                    <button
+                      type="button"
+                      className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
+                      onClick={() => setActiveGroup(key as keyof StateGroup)}
+                    >
+                      <Plus className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="flex flex-col gap-2 rounded">
+                    {key === activeGroup && (
+                      <CreateUpdateStateInline
+                        data={null}
+                        groupLength={orderedStateGroups[key].length}
+                        onClose={() => {
+                          setActiveGroup(null);
+                          setSelectedState(null);
+                        }}
+                        selectedGroup={key as keyof StateGroup}
+                      />
+                    )}
+                    {orderedStateGroups[key].map((state, index) =>
+                      state.id !== selectedState ? (
+                        <ProjectSettingListItem
+                          key={state.id}
+                          index={index}
+                          state={state}
+                          statesList={statesList ?? []}
+                          handleEditState={() => setSelectedState(state.id)}
+                          handleDeleteState={() => setSelectDeleteState(state.id)}
+                        />
+                      ) : (
+                        <div className="border-b-[0.5px] 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}
+                            selectedGroup={key as keyof StateGroup}
+                          />
+                        </div>
+                      )
+                    )}
+                  </div>
+                </div>
+              );
+          })
+        ) : (
+          <Loader className="space-y-5 md:w-2/3">
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
+        )}
+      </div> */}
+    </>
+  );
+});
diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
deleted file mode 100644
index eb2d9b610..000000000
--- a/web/components/states/single-state.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// services
-import stateService from "services/state.service";
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
-import { Pencil, X } from "lucide-react";
-
-// helpers
-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";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  index: number;
-  state: IState;
-  statesList: IState[];
-  handleEditState: () => void;
-  handleDeleteState: () => void;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const SingleState: React.FC<Props> = ({
-  index,
-  state,
-  statesList,
-  handleEditState,
-  handleDeleteState,
-  user,
-}) => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const groupStates = statesList.filter((s) => s.group === state.group);
-  const groupLength = groupStates.length;
-
-  const handleMakeDefault = () => {
-    setIsSubmitting(true);
-
-    const currentDefaultState = statesList.find((s) => s.default);
-
-    let newStatesList = statesList.map((s) => ({
-      ...s,
-      default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default,
-    }));
-    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
-
-    mutate(
-      STATES_LIST(projectId as string),
-      orderStateGroups(groupBy(newStatesList, "group")),
-      false
-    );
-
-    if (currentDefaultState)
-      stateService
-        .patchState(
-          workspaceSlug as string,
-          projectId as string,
-          currentDefaultState?.id ?? "",
-          {
-            default: false,
-          },
-          user
-        )
-        .then(() => {
-          stateService
-            .patchState(
-              workspaceSlug as string,
-              projectId as string,
-              state.id,
-              {
-                default: true,
-              },
-              user
-            )
-            .then(() => {
-              mutate(STATES_LIST(projectId as string));
-              setIsSubmitting(false);
-            })
-            .catch(() => {
-              setIsSubmitting(false);
-            });
-        });
-    else
-      stateService
-        .patchState(
-          workspaceSlug as string,
-          projectId as string,
-          state.id,
-          {
-            default: true,
-          },
-          user
-        )
-        .then(() => {
-          mutate(STATES_LIST(projectId as string));
-          setIsSubmitting(false);
-        })
-        .catch(() => {
-          setIsSubmitting(false);
-        });
-  };
-
-  const handleMove = (state: IState, direction: "up" | "down") => {
-    let newSequence = 15000;
-
-    if (direction === "up") {
-      if (index === 1) newSequence = groupStates[0].sequence - 15000;
-      else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2;
-    } else {
-      if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000;
-      else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
-    }
-
-    let newStatesList = statesList.map((s) => ({
-      ...s,
-      sequence: s.id === state.id ? newSequence : s.sequence,
-    }));
-    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
-
-    mutate(
-      STATES_LIST(projectId as string),
-      orderStateGroups(groupBy(newStatesList, "group")),
-      false
-    );
-
-    stateService
-      .patchState(
-        workspaceSlug as string,
-        projectId as string,
-        state.id,
-        {
-          sequence: newSequence,
-        },
-        user
-      )
-      .then((res) => {
-        console.log(res);
-        mutate(STATES_LIST(projectId as string));
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  };
-
-  return (
-    <div className="group flex items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-3">
-      <div className="flex items-center gap-3">
-        <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
-        <div>
-          <h6 className="text-sm font-medium">{addSpaceIfCamelCase(state.name)}</h6>
-          <p className="text-xs text-custom-text-200">{state.description}</p>
-        </div>
-      </div>
-      <div className="group flex items-center gap-2.5">
-        {index !== 0 && (
-          <button
-            type="button"
-            className="hidden text-custom-text-200 group-hover:inline-block"
-            onClick={() => handleMove(state, "up")}
-          >
-            <ArrowUpIcon className="h-4 w-4" />
-          </button>
-        )}
-        {!(index === groupLength - 1) && (
-          <button
-            type="button"
-            className="hidden text-custom-text-200 group-hover:inline-block"
-            onClick={() => handleMove(state, "down")}
-          >
-            <ArrowDownIcon className="h-4 w-4" />
-          </button>
-        )}
-
-        <div className=" items-center gap-2.5 hidden group-hover:flex">
-          {state.default ? (
-            <span className="text-xs text-custom-text-200">Default</span>
-          ) : (
-            <button
-              type="button"
-              className="hidden text-xs text-custom-sidebar-text-400 group-hover:inline-block"
-              onClick={handleMakeDefault}
-              disabled={isSubmitting}
-            >
-              Mark as default
-            </button>
-          )}
-          <button
-            type="button"
-            className="grid place-items-center group-hover:opacity-100 opacity-0"
-            onClick={handleEditState}
-          >
-            <Pencil className="h-3.5 w-3.5 text-custom-text-200" />
-          </button>
-
-          <button
-            type="button"
-            className={`group-hover:opacity-100 opacity-0 ${
-              state.default || groupLength === 1 ? "cursor-not-allowed" : ""
-            } grid place-items-center`}
-            onClick={handleDeleteState}
-            disabled={state.default || groupLength === 1}
-          >
-            {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"
-                  }`}
-                />
-              </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"
-                  }`}
-                />
-              </Tooltip>
-            ) : (
-              <X
-                className={`h-4 w-4 ${
-                  groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"
-                }`}
-              />
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
index 9f6b40d04..8f1872f19 100644
--- a/web/components/states/state-select.tsx
+++ b/web/components/states/state-select.tsx
@@ -1,67 +1,54 @@
-import React, { useRef, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// services
-import stateService from "services/state.service";
-// headless ui
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
+import { Check, ChevronDown, Search } from "lucide-react";
+// ui
+import { StateGroupIcon, Tooltip } from "@plane/ui";
 // types
-import { Tooltip } from "components/ui";
-// constants
 import { IState } from "types";
-import { STATES_LIST } from "constants/fetch-keys";
-// helper
-import { getStatesList } from "helpers/state.helper";
 
 type Props = {
   value: IState;
-  onChange: (data: any, states: IState[] | undefined) => void;
-  projectId: string;
+  onChange: (state: IState) => void;
+  states: IState[] | undefined;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
+  placement?: Placement;
   hideDropdownArrow?: boolean;
   disabled?: boolean;
 };
 
-export const StateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  projectId,
-  className = "",
-  buttonClassName = "",
-  optionsClassName = "",
-  hideDropdownArrow = false,
-  disabled = false,
-}) => {
+export const StateSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    states,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
   const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
 
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const [fetchStates, setFetchStates] = useState<boolean>(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId && fetchStates ? STATES_LIST(projectId) : null,
-    workspaceSlug && projectId && fetchStates
-      ? () => stateService.getStates(workspaceSlug as string, projectId)
-      : null
-  );
-
-  const states = getStatesList(stateGroups);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
 
   const options = states?.map((state) => ({
     value: state.id,
@@ -75,105 +62,90 @@ 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>
+        {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
         <span className="truncate">{value?.name ?? "State"}</span>
       </div>
     </Tooltip>
   );
 
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
   return (
     <Combobox
       as="div"
       className={`flex-shrink-0 text-left ${className}`}
       value={value.id}
       onChange={(data: string) => {
-        onChange(data, states);
+        const selectedState = states?.find((state) => state.id === data);
+
+        if (selectedState) onChange(selectedState);
       }}
       disabled={disabled}
     >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-          setFetchStates(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                disabled
-                  ? "cursor-not-allowed text-custom-text-200"
-                  : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {label}
-              {!hideDropdownArrow && !disabled && (
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-              )}
-            </Combobox.Button>
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap mt-1 ${optionsClassName}`}
-              >
-                <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                </div>
-                <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active && !selected ? "bg-custom-background-80" : ""
-                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                          }
-                        >
-                          {({ selected }) => (
-                            <>
-                              {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
-                            </>
-                          )}
-                        </Combobox.Option>
-                      ))
-                    ) : (
-                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </span>
-                    )
-                  ) : (
-                    <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
-                </div>
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 };
diff --git a/web/components/tiptap/bubble-menu/index.tsx b/web/components/tiptap/bubble-menu/index.tsx
deleted file mode 100644
index 217317ea1..000000000
--- a/web/components/tiptap/bubble-menu/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
-import { FC, useState } from "react";
-import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
-
-import { NodeSelector } from "./node-selector";
-import { LinkSelector } from "./link-selector";
-import { cn } from "../utils";
-
-export interface BubbleMenuItem {
-  name: string;
-  isActive: () => boolean;
-  command: () => void;
-  icon: typeof BoldIcon;
-}
-
-type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
-
-export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
-  const items: BubbleMenuItem[] = [
-    {
-      name: "bold",
-      isActive: () => props.editor?.isActive("bold"),
-      command: () => props.editor?.chain().focus().toggleBold().run(),
-      icon: BoldIcon,
-    },
-    {
-      name: "italic",
-      isActive: () => props.editor?.isActive("italic"),
-      command: () => props.editor?.chain().focus().toggleItalic().run(),
-      icon: ItalicIcon,
-    },
-    {
-      name: "underline",
-      isActive: () => props.editor?.isActive("underline"),
-      command: () => props.editor?.chain().focus().toggleUnderline().run(),
-      icon: UnderlineIcon,
-    },
-    {
-      name: "strike",
-      isActive: () => props.editor?.isActive("strike"),
-      command: () => props.editor?.chain().focus().toggleStrike().run(),
-      icon: StrikethroughIcon,
-    },
-    {
-      name: "code",
-      isActive: () => props.editor?.isActive("code"),
-      command: () => props.editor?.chain().focus().toggleCode().run(),
-      icon: CodeIcon,
-    },
-  ];
-
-  const bubbleMenuProps: EditorBubbleMenuProps = {
-    ...props,
-    shouldShow: ({ editor }) => {
-      if (!editor.isEditable) {
-        return false;
-      }
-      if (editor.isActive("image")) {
-        return false;
-      }
-      return editor.view.state.selection.content().size > 0;
-    },
-    tippyOptions: {
-      moveTransition: "transform 0.15s ease-out",
-      onHidden: () => {
-        setIsNodeSelectorOpen(false);
-        setIsLinkSelectorOpen(false);
-      },
-    },
-  };
-
-  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
-
-  return (
-    <BubbleMenu
-      {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
-    >
-      {!props.editor.isActive("table") && (
-        <NodeSelector
-          editor={props.editor!}
-          isOpen={isNodeSelectorOpen}
-          setIsOpen={() => {
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-            setIsLinkSelectorOpen(false);
-          }}
-        />
-      )}
-      <LinkSelector
-        editor={props.editor!!}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
-      <div className="flex">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-    </BubbleMenu>
-  );
-};
diff --git a/web/components/tiptap/bubble-menu/node-selector.tsx b/web/components/tiptap/bubble-menu/node-selector.tsx
deleted file mode 100644
index 34d40ec06..000000000
--- a/web/components/tiptap/bubble-menu/node-selector.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Editor } from "@tiptap/core";
-import {
-  Check,
-  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  TextQuote,
-  ListOrdered,
-  TextIcon,
-  Code,
-  CheckSquare,
-} from "lucide-react";
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { BubbleMenuItem } from ".";
-import { cn } from "../utils";
-
-interface NodeSelectorProps {
-  editor: Editor;
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
-  const items: BubbleMenuItem[] = [
-    {
-      name: "Text",
-      icon: TextIcon,
-      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
-      isActive: () =>
-        editor.isActive("paragraph") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
-    },
-    {
-      name: "H1",
-      icon: Heading1,
-      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
-    },
-    {
-      name: "H2",
-      icon: Heading2,
-      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
-    },
-    {
-      name: "H3",
-      icon: Heading3,
-      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
-    },
-    {
-      name: "To-do List",
-      icon: CheckSquare,
-      command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskItem"),
-    },
-    {
-      name: "Bullet List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      name: "Numbered List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
-    },
-    {
-      name: "Quote",
-      icon: TextQuote,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-      isActive: () => editor.isActive("blockquote"),
-    },
-    {
-      name: "Code",
-      icon: Code,
-      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
-    },
-  ];
-
-  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
-    name: "Multiple",
-  };
-
-  return (
-    <div className="relative h-full">
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
-      >
-        <span>{activeItem?.name}</span>
-        <ChevronDown className="h-4 w-4" />
-      </button>
-
-      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
-          {items.map((item, index) => (
-            <button
-              key={index}
-              type="button"
-              onClick={() => {
-                item.command();
-                setIsOpen(false);
-              }}
-              className={cn(
-                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
-                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
-              )}
-            >
-              <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1">
-                  <item.icon className="h-3 w-3" />
-                </div>
-                <span>{item.name}</span>
-              </div>
-              {activeItem.name === item.name && <Check className="h-4 w-4" />}
-            </button>
-          ))}
-        </section>
-      )}
-    </div>
-  );
-};
diff --git a/web/components/tiptap/bubble-menu/utils/link-validator.tsx b/web/components/tiptap/bubble-menu/utils/link-validator.tsx
deleted file mode 100644
index 9af366c02..000000000
--- a/web/components/tiptap/bubble-menu/utils/link-validator.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function isValidHttpUrl(string: string): boolean {
-  let url;
-
-  try {
-    url = new URL(string);
-  } catch (_) {
-    return false;
-  }
-
-  return url.protocol === "http:" || url.protocol === "https:";
-}
diff --git a/web/components/tiptap/extensions/index.tsx b/web/components/tiptap/extensions/index.tsx
deleted file mode 100644
index 8ad4e07b4..000000000
--- a/web/components/tiptap/extensions/index.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import StarterKit from "@tiptap/starter-kit";
-import HorizontalRule from "@tiptap/extension-horizontal-rule";
-import TiptapLink from "@tiptap/extension-link";
-import Placeholder from "@tiptap/extension-placeholder";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TextStyle from "@tiptap/extension-text-style";
-import { Color } from "@tiptap/extension-color";
-import TaskItem from "@tiptap/extension-task-item";
-import TaskList from "@tiptap/extension-task-list";
-import { Markdown } from "tiptap-markdown";
-import Highlight from "@tiptap/extension-highlight";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { lowlight } from "lowlight/lib/core";
-import SlashCommand from "../slash-command";
-import { InputRule } from "@tiptap/core";
-import Gapcursor from "@tiptap/extension-gapcursor";
-
-import ts from "highlight.js/lib/languages/typescript";
-
-import "highlight.js/styles/github-dark.css";
-import UpdatedImage from "./updated-image";
-import isValidHttpUrl from "../bubble-menu/utils/link-validator";
-import { CustomTableCell } from "./table/table-cell";
-import { Table } from "./table/table";
-import { TableHeader } from "./table/table-header";
-import { TableRow } from "@tiptap/extension-table-row";
-
-lowlight.registerLanguage("ts", ts);
-
-export const TiptapExtensions = (
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) => [
-    StarterKit.configure({
-      bulletList: {
-        HTMLAttributes: {
-          class: "list-disc list-outside leading-3 -mt-2",
-        },
-      },
-      orderedList: {
-        HTMLAttributes: {
-          class: "list-decimal list-outside leading-3 -mt-2",
-        },
-      },
-      listItem: {
-        HTMLAttributes: {
-          class: "leading-normal -mb-2",
-        },
-      },
-      blockquote: {
-        HTMLAttributes: {
-          class: "border-l-4 border-custom-border-300",
-        },
-      },
-      code: {
-        HTMLAttributes: {
-          class:
-            "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
-          spellcheck: "false",
-        },
-      },
-      codeBlock: false,
-      horizontalRule: false,
-      dropcursor: {
-        color: "rgba(var(--color-text-100))",
-        width: 2,
-      },
-      gapcursor: false,
-    }),
-    CodeBlockLowlight.configure({
-      lowlight,
-    }),
-    HorizontalRule.extend({
-      addInputRules() {
-        return [
-          new InputRule({
-            find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-            handler: ({ state, range, commands }) => {
-              commands.splitBlock();
-
-              const attributes = {};
-              const { tr } = state;
-              const start = range.from;
-              const end = range.to;
-              // @ts-ignore
-              tr.replaceWith(start - 1, end, this.type.create(attributes));
-            },
-          }),
-        ];
-      },
-    }).configure({
-      HTMLAttributes: {
-        class: "mb-6 border-t border-custom-border-300",
-      },
-    }),
-    Gapcursor,
-    TiptapLink.configure({
-      protocols: ["http", "https"],
-      validate: (url) => isValidHttpUrl(url),
-      HTMLAttributes: {
-        class:
-          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
-      },
-    }),
-    UpdatedImage.configure({
-      HTMLAttributes: {
-        class: "rounded-lg border border-custom-border-300",
-      },
-    }),
-    Placeholder.configure({
-      placeholder: ({ node }) => {
-        if (node.type.name === "heading") {
-          return `Heading ${node.attrs.level}`;
-        }
-        if (node.type.name === "image" || node.type.name === "table") {
-          return "";
-        }
-
-        return "Press '/' for commands...";
-      },
-      includeChildren: true,
-    }),
-    SlashCommand(workspaceSlug, setIsSubmitting),
-    TiptapUnderline,
-    TextStyle,
-    Color,
-    Highlight.configure({
-      multicolor: true,
-    }),
-    TaskList.configure({
-      HTMLAttributes: {
-        class: "not-prose pl-2",
-      },
-    }),
-    TaskItem.configure({
-      HTMLAttributes: {
-        class: "flex items-start my-4",
-      },
-      nested: true,
-    }),
-    Markdown.configure({
-      html: true,
-      transformCopiedText: true,
-    }),
-    Table,
-    TableHeader,
-    CustomTableCell,
-    TableRow,
-  ];
diff --git a/web/components/tiptap/extensions/table/table-cell.ts b/web/components/tiptap/extensions/table/table-cell.ts
deleted file mode 100644
index 643cb8c64..000000000
--- a/web/components/tiptap/extensions/table/table-cell.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TableCell } from "@tiptap/extension-table-cell";
-
-export const CustomTableCell = TableCell.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      isHeader: {
-        default: false,
-        parseHTML: (element) => {
-          isHeader: element.tagName === "TD";
-        },
-        renderHTML: (attributes) => {
-          tag: attributes.isHeader ? "th" : "td";
-        },
-      },
-    };
-  },
-  renderHTML({ HTMLAttributes }) {
-    if (HTMLAttributes.isHeader) {
-      return [
-        "th",
-        {
-          ...HTMLAttributes,
-          class: `relative ${HTMLAttributes.class}`,
-        },
-        ["span", { class: "absolute top-0 right-0" }],
-        0,
-      ];
-    }
-    return ["td", HTMLAttributes, 0];
-  },
-});
diff --git a/web/components/tiptap/extensions/table/table-header.ts b/web/components/tiptap/extensions/table/table-header.ts
deleted file mode 100644
index f23aa93ef..000000000
--- a/web/components/tiptap/extensions/table/table-header.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { TableHeader as BaseTableHeader } from "@tiptap/extension-table-header";
-
-const TableHeader = BaseTableHeader.extend({
-  content: "paragraph",
-});
-
-export { TableHeader };
diff --git a/web/components/tiptap/extensions/table/table.ts b/web/components/tiptap/extensions/table/table.ts
deleted file mode 100644
index 9b727bb51..000000000
--- a/web/components/tiptap/extensions/table/table.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Table as BaseTable } from "@tiptap/extension-table";
-
-const Table = BaseTable.configure({
-  resizable: true,
-  cellMinWidth: 100,
-  allowTableNodeSelection: true,
-});
-
-export { Table };
diff --git a/web/components/tiptap/extensions/updated-image.tsx b/web/components/tiptap/extensions/updated-image.tsx
deleted file mode 100644
index b62050953..000000000
--- a/web/components/tiptap/extensions/updated-image.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Image from "@tiptap/extension-image";
-import TrackImageDeletionPlugin from "../plugins/delete-image";
-import UploadImagesPlugin from "../plugins/upload-image";
-
-const UpdatedImage = Image.extend({
-  addProseMirrorPlugins() {
-    return [UploadImagesPlugin(), TrackImageDeletionPlugin()];
-  },
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: "35%",
-      },
-      height: {
-        default: null,
-      },
-    };
-  },
-});
-
-export default UpdatedImage;
diff --git a/web/components/tiptap/index.tsx b/web/components/tiptap/index.tsx
deleted file mode 100644
index 44076234e..000000000
--- a/web/components/tiptap/index.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useImperativeHandle, useRef, forwardRef, useEffect } from "react";
-import { useEditor, EditorContent, Editor } from "@tiptap/react";
-import { useDebouncedCallback } from "use-debounce";
-// components
-import { EditorBubbleMenu } from "./bubble-menu";
-import { TiptapExtensions } from "./extensions";
-import { TiptapEditorProps } from "./props";
-import { ImageResizer } from "./extensions/image-resize";
-import { TableMenu } from "./table-menu";
-
-export interface ITipTapRichTextEditor {
-  value: string;
-  noBorder?: boolean;
-  borderOnFocus?: boolean;
-  customClassName?: string;
-  editorContentCustomClassNames?: string;
-  onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
-  setShouldShowAlert?: (showAlert: boolean) => void;
-  workspaceSlug: string;
-  editable?: boolean;
-  forwardedRef?: any;
-  debouncedUpdatesEnabled?: boolean;
-}
-
-const Tiptap = (props: ITipTapRichTextEditor) => {
-  const {
-    onChange,
-    debouncedUpdatesEnabled,
-    forwardedRef,
-    editable,
-    setIsSubmitting,
-    setShouldShowAlert,
-    editorContentCustomClassNames,
-    value,
-    noBorder,
-    workspaceSlug,
-    borderOnFocus,
-    customClassName,
-  } = props;
-
-  const editor = useEditor({
-    editable: editable ?? true,
-    editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
-    extensions: TiptapExtensions(workspaceSlug, setIsSubmitting),
-    content: value,
-    onUpdate: async ({ editor }) => {
-      // for instant feedback loop
-      setIsSubmitting?.("submitting");
-      setShouldShowAlert?.(true);
-      if (debouncedUpdatesEnabled) {
-        debouncedUpdates({ onChange, editor });
-      } else {
-        onChange?.(editor.getJSON(), editor.getHTML());
-      }
-    },
-  });
-
-  const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
-
-  useImperativeHandle(forwardedRef, () => ({
-    clearEditor: () => {
-      editorRef.current?.commands.clearContent();
-    },
-    setEditorValue: (content: string) => {
-      editorRef.current?.commands.setContent(content);
-    },
-  }));
-
-  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
-    setTimeout(async () => {
-      if (onChange) {
-        onChange(editor.getJSON(), editor.getHTML());
-      }
-    }, 500);
-  }, 1000);
-
-  const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? "" : "border border-custom-border-200"} ${
-    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-  } ${customClassName}`;
-
-  if (!editor) return null;
-  editorRef.current = editor;
-
-  return (
-    <div
-      id="tiptap-container"
-      onClick={() => {
-        editor?.chain().focus().run();
-      }}
-      className={`tiptap-editor-container relative cursor-text ${editorClassNames}`}
-    >
-      {editor && <EditorBubbleMenu editor={editor} />}
-      <div className={`${editorContentCustomClassNames}`}>
-        <EditorContent editor={editor} />
-        <TableMenu editor={editor} />
-        {editor?.isActive("image") && <ImageResizer editor={editor} />}
-      </div>
-    </div>
-  );
-};
-
-const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
-  <Tiptap {...props} forwardedRef={ref} />
-));
-
-TipTapEditor.displayName = "TipTapEditor";
-
-export { TipTapEditor };
diff --git a/web/components/tiptap/plugins/upload-image.tsx b/web/components/tiptap/plugins/upload-image.tsx
deleted file mode 100644
index bc0acdc54..000000000
--- a/web/components/tiptap/plugins/upload-image.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
-import fileService from "services/file.service";
-
-const uploadKey = new PluginKey("upload-image");
-
-const UploadImagesPlugin = () =>
-  new Plugin({
-    key: uploadKey,
-    state: {
-      init() {
-        return DecorationSet.empty;
-      },
-      apply(tr, set) {
-        set = set.map(tr.mapping, tr.doc);
-        // See if the transaction adds or removes any placeholders
-        const action = tr.getMeta(uploadKey);
-        if (action && action.add) {
-          const { id, pos, src } = action.add;
-
-          const placeholder = document.createElement("div");
-          placeholder.setAttribute("class", "img-placeholder");
-          const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
-          image.src = src;
-          placeholder.appendChild(image);
-          const deco = Decoration.widget(pos + 1, placeholder, {
-            id,
-          });
-          set = set.add(tr.doc, [deco]);
-        } else if (action && action.remove) {
-          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
-        }
-        return set;
-      },
-    },
-    props: {
-      decorations(state) {
-        return this.getState(state);
-      },
-    },
-  });
-
-export default UploadImagesPlugin;
-
-function findPlaceholder(state: EditorState, id: {}) {
-  const decos = uploadKey.getState(state);
-  const found = decos.find(
-    undefined,
-    undefined,
-    (spec: { id: number | undefined }) => spec.id == id
-  );
-  return found.length ? found[0].from : null;
-}
-
-export async function startImageUpload(
-  file: File,
-  view: EditorView,
-  pos: number,
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) {
-  if (!file.type.includes("image/")) {
-    return;
-  }
-
-  const id = {};
-
-  const tr = view.state.tr;
-  if (!tr.selection.empty) tr.deleteSelection();
-
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.onload = () => {
-    tr.setMeta(uploadKey, {
-      add: {
-        id,
-        pos,
-        src: reader.result,
-      },
-    });
-    view.dispatch(tr);
-  };
-
-  if (!workspaceSlug) {
-    return;
-  }
-  setIsSubmitting?.("submitting");
-  const src = await UploadImageHandler(file, workspaceSlug);
-  const { schema } = view.state;
-  pos = findPlaceholder(view.state, id);
-
-  if (pos == null) return;
-  const imageSrc = typeof src === "object" ? reader.result : src;
-
-  const node = schema.nodes.image.create({ src: imageSrc });
-  const transaction = view.state.tr
-    .replaceWith(pos, pos, node)
-    .setMeta(uploadKey, { remove: { id } });
-  view.dispatch(transaction);
-}
-
-const UploadImageHandler = (file: File, workspaceSlug: string): Promise<string> => {
-  if (!workspaceSlug) {
-    return Promise.reject("Workspace slug is missing");
-  }
-  try {
-    const formData = new FormData();
-    formData.append("asset", file);
-    formData.append("attributes", JSON.stringify({}));
-
-    return new Promise(async (resolve, reject) => {
-      const imageUrl = await fileService
-        .uploadFile(workspaceSlug, formData)
-        .then((response) => response.asset);
-
-      const image = new Image();
-      image.src = imageUrl;
-      image.onload = () => {
-        resolve(imageUrl);
-      };
-    });
-  } catch (error) {
-    console.log(error);
-    return Promise.reject(error);
-  }
-};
diff --git a/web/components/tiptap/props.tsx b/web/components/tiptap/props.tsx
deleted file mode 100644
index 8233e3ab4..000000000
--- a/web/components/tiptap/props.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { EditorProps } from "@tiptap/pm/view";
-import { startImageUpload } from "./plugins/upload-image";
-import { findTableAncestor } from "./table-menu";
-
-export function TiptapEditorProps(
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-): EditorProps {
-  return {
-    attributes: {
-      class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
-    },
-    handleDOMEvents: {
-      keydown: (_view, event) => {
-        // prevent default event listeners from firing when slash command is active
-        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-          const slashCommand = document.querySelector("#slash-command");
-          if (slashCommand) {
-            return true;
-          }
-        }
-      },
-    },
-    handlePaste: (view, event) => {
-      if (typeof window !== "undefined") {
-        const selection: any = window?.getSelection();
-        if (selection.rangeCount !== 0) {
-          const range = selection.getRangeAt(0);
-          if (findTableAncestor(range.startContainer)) {
-            return;
-          }
-        }
-      }
-      if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
-        event.preventDefault();
-        const file = event.clipboardData.files[0];
-        const pos = view.state.selection.from;
-        startImageUpload(file, view, pos, workspaceSlug, setIsSubmitting);
-        return true;
-      }
-      return false;
-    },
-    handleDrop: (view, event, _slice, moved) => {
-      if (typeof window !== "undefined") {
-        const selection: any = window?.getSelection();
-        if (selection.rangeCount !== 0) {
-          const range = selection.getRangeAt(0);
-          if (findTableAncestor(range.startContainer)) {
-            return;
-          }
-        }
-      }
-      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-        event.preventDefault();
-        const file = event.dataTransfer.files[0];
-        const coordinates = view.posAtCoords({
-          left: event.clientX,
-          top: event.clientY,
-        });
-        // here we deduct 1 from the pos or else the image will create an extra node
-        if (coordinates) {
-          startImageUpload(file, view, coordinates.pos - 1, workspaceSlug, setIsSubmitting);
-        }
-        return true;
-      }
-      return false;
-    },
-  };
-}
diff --git a/web/components/tiptap/slash-command/index.tsx b/web/components/tiptap/slash-command/index.tsx
deleted file mode 100644
index 46bf5ea5a..000000000
--- a/web/components/tiptap/slash-command/index.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-import React, { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
-import { Editor, Range, Extension } from "@tiptap/core";
-import Suggestion from "@tiptap/suggestion";
-import { ReactRenderer } from "@tiptap/react";
-import tippy from "tippy.js";
-import {
-  Heading1,
-  Heading2,
-  Heading3,
-  List,
-  ListOrdered,
-  Text,
-  TextQuote,
-  Code,
-  MinusSquare,
-  CheckSquare,
-  ImageIcon,
-  Table,
-} from "lucide-react";
-import { startImageUpload } from "../plugins/upload-image";
-import { cn } from "../utils";
-
-interface CommandItemProps {
-  title: string;
-  description: string;
-  icon: ReactNode;
-}
-
-interface CommandProps {
-  editor: Editor;
-  range: Range;
-}
-
-const Command = Extension.create({
-  name: "slash-command",
-  addOptions() {
-    return {
-      suggestion: {
-        char: "/",
-        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
-          props.command({ editor, range });
-        },
-      },
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        allow({ editor }) {
-          return !editor.isActive("table");
-        },
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-});
-
-const getSuggestionItems =
-  (
-    workspaceSlug: string,
-    setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-  ) =>
-  ({ query }: { query: string }) =>
-    [
-      {
-        title: "Text",
-        description: "Just start typing with plain text.",
-        searchTerms: ["p", "paragraph"],
-        icon: <Text size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
-        },
-      },
-      {
-        title: "Heading 1",
-        description: "Big section heading.",
-        searchTerms: ["title", "big", "large"],
-        icon: <Heading1 size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
-        },
-      },
-      {
-        title: "Heading 2",
-        description: "Medium section heading.",
-        searchTerms: ["subtitle", "medium"],
-        icon: <Heading2 size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
-        },
-      },
-      {
-        title: "Heading 3",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: <Heading3 size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
-        },
-      },
-      {
-        title: "To-do List",
-        description: "Track tasks with a to-do list.",
-        searchTerms: ["todo", "task", "list", "check", "checkbox"],
-        icon: <CheckSquare size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleTaskList().run();
-        },
-      },
-      {
-        title: "Bullet List",
-        description: "Create a simple bullet list.",
-        searchTerms: ["unordered", "point"],
-        icon: <List size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleBulletList().run();
-        },
-      },
-      {
-        title: "Divider",
-        description: "Visually divide blocks",
-        searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
-        icon: <MinusSquare size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
-        },
-      },
-      {
-        title: "Table",
-        description: "Create a Table",
-        searchTerms: ["table", "cell", "db", "data", "tabular"],
-        icon: <Table size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-            .run();
-        },
-      },
-      {
-        title: "Numbered List",
-        description: "Create a list with numbering.",
-        searchTerms: ["ordered"],
-        icon: <ListOrdered size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleOrderedList().run();
-        },
-      },
-      {
-        title: "Quote",
-        description: "Capture a quote.",
-        searchTerms: ["blockquote"],
-        icon: <TextQuote size={18} />,
-        command: ({ editor, range }: CommandProps) =>
-          editor
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .toggleNode("paragraph", "paragraph")
-            .toggleBlockquote()
-            .run(),
-      },
-      {
-        title: "Code",
-        description: "Capture a code snippet.",
-        searchTerms: ["codeblock"],
-        icon: <Code size={18} />,
-        command: ({ editor, range }: CommandProps) =>
-          editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-      },
-      {
-        title: "Image",
-        description: "Upload an image from your computer.",
-        searchTerms: ["photo", "picture", "media"],
-        icon: <ImageIcon size={18} />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).run();
-          // upload image
-          const input = document.createElement("input");
-          input.type = "file";
-          input.accept = "image/*";
-          input.onchange = async () => {
-            if (input.files?.length) {
-              const file = input.files[0];
-              const pos = editor.view.state.selection.from;
-              startImageUpload(file, editor.view, pos, workspaceSlug, setIsSubmitting);
-            }
-          };
-          input.click();
-        },
-      },
-    ].filter((item) => {
-      if (typeof query === "string" && query.length > 0) {
-        const search = query.toLowerCase();
-        return (
-          item.title.toLowerCase().includes(search) ||
-          item.description.toLowerCase().includes(search) ||
-          (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)))
-        );
-      }
-      return true;
-    });
-
-export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
-  const containerHeight = container.offsetHeight;
-  const itemHeight = item ? item.offsetHeight : 0;
-
-  const top = item.offsetTop;
-  const bottom = top + itemHeight;
-
-  if (top < container.scrollTop) {
-    container.scrollTop -= container.scrollTop - top + 5;
-  } else if (bottom > containerHeight + container.scrollTop) {
-    container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
-  }
-};
-
-const CommandList = ({
-  items,
-  command,
-}: {
-  items: CommandItemProps[];
-  command: any;
-  editor: any;
-  range: any;
-}) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const selectItem = useCallback(
-    (index: number) => {
-      const item = items[index];
-      if (item) {
-        command(item);
-      }
-    },
-    [command, items]
-  );
-
-  useEffect(() => {
-    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
-        if (e.key === "ArrowUp") {
-          setSelectedIndex((selectedIndex + items.length - 1) % items.length);
-          return true;
-        }
-        if (e.key === "ArrowDown") {
-          setSelectedIndex((selectedIndex + 1) % items.length);
-          return true;
-        }
-        if (e.key === "Enter") {
-          selectItem(selectedIndex);
-          return true;
-        }
-        return false;
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [items, selectedIndex, setSelectedIndex, selectItem]);
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [items]);
-
-  const commandListContainer = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const container = commandListContainer?.current;
-
-    const item = container?.children[selectedIndex] as HTMLElement;
-
-    if (item && container) updateScrollView(container, item);
-  }, [selectedIndex]);
-
-  return items.length > 0 ? (
-    <div
-      id="slash-command"
-      ref={commandListContainer}
-      className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
-    >
-      {items.map((item: CommandItemProps, index: number) => (
-        <button
-          className={cn(
-            `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
-            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
-          )}
-          key={index}
-          onClick={() => selectItem(index)}
-        >
-          <div>
-            <p className="font-medium">{item.title}</p>
-            <p className="text-xs text-custom-text-300">{item.description}</p>
-          </div>
-        </button>
-      ))}
-    </div>
-  ) : null;
-};
-
-const renderItems = () => {
-  let component: ReactRenderer | null = null;
-  let popup: any | null = null;
-
-  return {
-    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
-      component = new ReactRenderer(CommandList, {
-        props,
-        editor: props.editor,
-      });
-
-      // @ts-ignore
-      popup = tippy("body", {
-        getReferenceClientRect: props.clientRect,
-        appendTo: () => document.querySelector("#tiptap-container"),
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom-start",
-      });
-    },
-    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
-      component?.updateProps(props);
-
-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
-    },
-    onKeyDown: (props: { event: KeyboardEvent }) => {
-      if (props.event.key === "Escape") {
-        popup?.[0].hide();
-
-        return true;
-      }
-
-      // @ts-ignore
-      return component?.ref?.onKeyDown(props);
-    },
-    onExit: () => {
-      popup?.[0].destroy();
-      component?.destroy();
-    },
-  };
-};
-
-export const SlashCommand = (
-  workspaceSlug: string,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) =>
-  Command.configure({
-    suggestion: {
-      items: getSuggestionItems(workspaceSlug, setIsSubmitting),
-      render: renderItems,
-    },
-  });
-
-export default SlashCommand;
diff --git a/web/components/tiptap/table-menu/InsertBottomTableIcon.tsx b/web/components/tiptap/table-menu/InsertBottomTableIcon.tsx
deleted file mode 100644
index 0e42ba648..000000000
--- a/web/components/tiptap/table-menu/InsertBottomTableIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const InsertBottomTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-
-export default InsertBottomTableIcon;
diff --git a/web/components/tiptap/table-menu/InsertLeftTableIcon.tsx b/web/components/tiptap/table-menu/InsertLeftTableIcon.tsx
deleted file mode 100644
index 1fd75fe87..000000000
--- a/web/components/tiptap/table-menu/InsertLeftTableIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const InsertLeftTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-export default InsertLeftTableIcon;
diff --git a/web/components/tiptap/table-menu/InsertRightTableIcon.tsx b/web/components/tiptap/table-menu/InsertRightTableIcon.tsx
deleted file mode 100644
index 1a6570969..000000000
--- a/web/components/tiptap/table-menu/InsertRightTableIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const InsertRightTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-
-export default InsertRightTableIcon;
diff --git a/web/components/tiptap/table-menu/InsertTopTableIcon.tsx b/web/components/tiptap/table-menu/InsertTopTableIcon.tsx
deleted file mode 100644
index 8f04f4f61..000000000
--- a/web/components/tiptap/table-menu/InsertTopTableIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const InsertTopTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-export default InsertTopTableIcon;
diff --git a/web/components/tiptap/table-menu/index.tsx b/web/components/tiptap/table-menu/index.tsx
deleted file mode 100644
index daa8f6953..000000000
--- a/web/components/tiptap/table-menu/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useState, useEffect } from "react";
-import { Rows, Columns, ToggleRight } from "lucide-react";
-import { cn } from "../utils";
-import { Tooltip } from "components/ui";
-import InsertLeftTableIcon from "./InsertLeftTableIcon";
-import InsertRightTableIcon from "./InsertRightTableIcon";
-import InsertTopTableIcon from "./InsertTopTableIcon";
-import InsertBottomTableIcon from "./InsertBottomTableIcon";
-
-interface TableMenuItem {
-  command: () => void;
-  icon: any;
-  key: string;
-  name: string;
-}
-
-export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
-  while (node !== null && node.nodeName !== "TABLE") {
-    node = node.parentNode;
-  }
-  return node as HTMLTableElement;
-};
-
-export const TableMenu = ({ editor }: { editor: any }) => {
-  const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
-  const isOpen = editor?.isActive("table");
-
-  const items: TableMenuItem[] = [
-    {
-      command: () => editor.chain().focus().addColumnBefore().run(),
-      icon: InsertLeftTableIcon,
-      key: "insert-column-left",
-      name: "Insert 1 column left",
-    },
-    {
-      command: () => editor.chain().focus().addColumnAfter().run(),
-      icon: InsertRightTableIcon,
-      key: "insert-column-right",
-      name: "Insert 1 column right",
-    },
-    {
-      command: () => editor.chain().focus().addRowBefore().run(),
-      icon: InsertTopTableIcon,
-      key: "insert-row-above",
-      name: "Insert 1 row above",
-    },
-    {
-      command: () => editor.chain().focus().addRowAfter().run(),
-      icon: InsertBottomTableIcon,
-      key: "insert-row-below",
-      name: "Insert 1 row below",
-    },
-    {
-      command: () => editor.chain().focus().deleteColumn().run(),
-      icon: Columns,
-      key: "delete-column",
-      name: "Delete column",
-    },
-    {
-      command: () => editor.chain().focus().deleteRow().run(),
-      icon: Rows,
-      key: "delete-row",
-      name: "Delete row",
-    },
-    {
-      command: () => editor.chain().focus().toggleHeaderRow().run(),
-      icon: ToggleRight,
-      key: "toggle-header-row",
-      name: "Toggle header row",
-    },
-  ];
-
-  useEffect(() => {
-    if (!window) return;
-
-    const handleWindowClick = () => {
-      const selection: any = window?.getSelection();
-
-      if (selection.rangeCount !== 0) {
-        const range = selection.getRangeAt(0);
-        const tableNode = findTableAncestor(range.startContainer);
-
-        if (tableNode) {
-          const tableRect = tableNode.getBoundingClientRect();
-          const tableCenter = tableRect.left + tableRect.width / 2;
-          const menuWidth = 45;
-          const menuLeft = tableCenter - menuWidth / 2;
-          const tableBottom = tableRect.bottom;
-
-          setTableLocation({ bottom: tableBottom, left: menuLeft });
-        }
-      }
-    };
-
-    window.addEventListener("click", handleWindowClick);
-
-    return () => {
-      window.removeEventListener("click", handleWindowClick);
-    };
-  }, [tableLocation, editor]);
-
-  return (
-    <section
-      className={`absolute z-20 left-1/2 -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
-        isOpen ? "block" : "hidden"
-      }`}
-    >
-      {items.map((item, index) => (
-        <Tooltip key={index} tooltipContent={item.name}>
-          <button
-            onClick={item.command}
-            className="p-1.5 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-background-80 active:bg-custom-background-80 rounded"
-            title={item.name}
-          >
-            <item.icon
-              className={cn("h-4 w-4 text-lg", {
-                "text-red-600": item.key.includes("delete"),
-              })}
-            />
-          </button>
-        </Tooltip>
-      ))}
-    </section>
-  );
-};
diff --git a/web/components/tiptap/utils.ts b/web/components/tiptap/utils.ts
deleted file mode 100644
index a5ef19350..000000000
--- a/web/components/tiptap/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/web/components/toast-alert/index.tsx b/web/components/toast-alert/index.tsx
index 5d0c0123c..84d596bed 100644
--- a/web/components/toast-alert/index.tsx
+++ b/web/components/toast-alert/index.tsx
@@ -1,14 +1,8 @@
 import React from "react";
 // hooks
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
 // icons
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
 
 const ToastAlerts = () => {
   const { alerts, removeAlert } = useToast();
@@ -26,7 +20,7 @@ const ToastAlerts = () => {
               onClick={() => removeAlert(alert.id)}
             >
               <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              <X className="h-5 w-5" aria-hidden="true" />
             </button>
           </div>
           <div
@@ -43,13 +37,13 @@ const ToastAlerts = () => {
             <div className="flex items-center gap-x-3">
               <div className="flex-shrink-0">
                 {alert.type === "success" ? (
-                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                  <CheckCircle className="h-8 w-8" aria-hidden="true" />
                 ) : alert.type === "error" ? (
-                  <XCircleIcon className="h-8 w-8" />
+                  <XCircle className="h-8 w-8" />
                 ) : alert.type === "warning" ? (
-                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                  <AlertTriangle className="h-8 w-8" aria-hidden="true" />
                 ) : (
-                  <InformationCircleIcon className="h-8 w-8" />
+                  <Info className="h-8 w-8" />
                 )}
               </div>
               <div>
diff --git a/web/components/ui/avatar.tsx b/web/components/ui/avatar.tsx
deleted file mode 100644
index d60baa56e..000000000
--- a/web/components/ui/avatar.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// component
-import { Icon } from "components/ui";
-// services
-import workspaceService from "services/workspace.service";
-// icons
-import User from "public/user.png";
-// types
-import { IUser, IUserLite } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type AvatarProps = {
-  user?: Partial<IUser> | Partial<IUserLite> | null;
-  index?: number;
-  height?: string;
-  width?: string;
-  fontSize?: string;
-};
-
-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"
-    }`}
-    style={{
-      height: height,
-      width: width,
-    }}
-  >
-    {user && user.avatar && user.avatar !== "" ? (
-      <div
-        className={`rounded border-[0.5px] ${
-          index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
-        }`}
-        style={{
-          height: height,
-          width: width,
-        }}
-      >
-        <img
-          src={user.avatar}
-          className="absolute top-0 left-0 h-full w-full object-cover rounded"
-          alt={user.display_name}
-        />
-      </div>
-    ) : (
-      <div
-        className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700  border-[0.5px] border-custom-border-200"
-        style={{
-          height: height,
-          width: width,
-          fontSize: fontSize,
-        }}
-      >
-        {user?.display_name?.charAt(0)}
-      </div>
-    )}
-  </div>
-);
-
-type AsigneesListProps = {
-  users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
-  userIds?: string[];
-  length?: number;
-  showLength?: boolean;
-};
-
-export const AssigneesList: React.FC<AsigneesListProps> = ({
-  users,
-  userIds,
-  length = 3,
-  showLength = true,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  if ((users && users.length === 0) || (userIds && userIds.length === 0))
-    return (
-      <div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80">
-        <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
-      </div>
-    );
-
-  return (
-    <>
-      {users && (
-        <>
-          {users.slice(0, length).map((user, index) => (
-            <Avatar key={user?.id} user={user} index={index} />
-          ))}
-          {users.length > length ? (
-            <div className="-ml-3.5 relative h-6 w-6 rounded">
-              <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" />
-                {users.length - length}
-              </div>
-            </div>
-          ) : null}
-        </>
-      )}
-      {userIds && (
-        <>
-          {userIds.slice(0, length).map((userId, index) => {
-            const user = people?.find((p) => p.member.id === userId)?.member;
-
-            return <Avatar key={userId} user={user} index={index} />;
-          })}
-          {showLength ? (
-            userIds.length > length ? (
-              <div className="-ml-3.5 relative h-6 w-6 rounded">
-                <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                  <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" />
-                  {userIds.length - length}
-                </div>
-              </div>
-            ) : null
-          ) : (
-            ""
-          )}
-        </>
-      )}
-    </>
-  );
-};
diff --git a/web/components/ui/buttons/danger-button.tsx b/web/components/ui/buttons/danger-button.tsx
deleted file mode 100644
index 3adb7012b..000000000
--- a/web/components/ui/buttons/danger-button.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const DangerButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-red-500 font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${
-      disabled
-        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
-        : ""
-    } ${
-      outline
-        ? "bg-transparent text-red-500 hover:bg-red-500 hover:text-white"
-        : "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
diff --git a/web/components/ui/buttons/index.ts b/web/components/ui/buttons/index.ts
deleted file mode 100644
index 0ce5c556a..000000000
--- a/web/components/ui/buttons/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./danger-button";
-export * from "./primary-button";
-export * from "./secondary-button";
diff --git a/web/components/ui/buttons/primary-button.tsx b/web/components/ui/buttons/primary-button.tsx
deleted file mode 100644
index 8817679b4..000000000
--- a/web/components/ui/buttons/primary-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const PrimaryButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-custom-primary font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
-      outline
-        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
-        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
-    }  ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
diff --git a/web/components/ui/buttons/secondary-button.tsx b/web/components/ui/buttons/secondary-button.tsx
deleted file mode 100644
index a642dd65f..000000000
--- a/web/components/ui/buttons/secondary-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const SecondaryButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-custom-border-200 font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed border-custom-border-200 bg-custom-background-90" : ""} ${
-      outline
-        ? "bg-transparent hover:bg-custom-background-80"
-        : "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
diff --git a/web/components/ui/buttons/type.d.ts b/web/components/ui/buttons/type.d.ts
deleted file mode 100644
index b227887ef..000000000
--- a/web/components/ui/buttons/type.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type ButtonProps = {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: (e: any) => void;
-  type?: "button" | "submit" | "reset";
-  disabled?: boolean;
-  loading?: boolean;
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-};
diff --git a/web/components/ui/date.tsx b/web/components/ui/date.tsx
index f33aadde5..acc8eb1ea 100644
--- a/web/components/ui/date.tsx
+++ b/web/components/ui/date.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 
 import { Popover, Transition } from "@headlessui/react";
-import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
+// icons
+import { CalendarDays, X } from "lucide-react";
 // import "react-datepicker/dist/react-datepicker.css";
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
@@ -16,33 +17,25 @@ type Props = {
   closeOnSelect?: boolean;
 };
 
-export const DateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  label,
-  minDate,
-  maxDate,
-  closeOnSelect = true,
-}) => (
+export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, maxDate, closeOnSelect = true }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ close }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
-            {value ? (
-              <>
-                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
-                <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
+        <Popover.Button className="flex items-center justify-center gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80">
+          {value ? (
+            <>
+              <CalendarDays className="h-3 w-3 flex-shrink-0" />
+              <span>{renderShortDateWithYearFormat(value)}</span>
+              <button onClick={() => onChange(null)}>
+                <X className="h-3 w-3" />
+              </button>
+            </>
+          ) : (
+            <>
+              <CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
+              <span className="text-custom-text-300">{label}</span>
+            </>
+          )}
         </Popover.Button>
 
         <Transition
diff --git a/web/components/ui/datepicker.tsx b/web/components/ui/datepicker.tsx
index 3bb0d3a1d..d8ebc143a 100644
--- a/web/components/ui/datepicker.tsx
+++ b/web/components/ui/datepicker.tsx
@@ -10,6 +10,7 @@ type Props = {
   onChange: (val: string | null) => void;
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
+  customInput?: React.ReactNode;
   placeholder?: string;
   displayShortForm?: boolean;
   error?: boolean;
@@ -29,13 +30,13 @@ export const CustomDatePicker: React.FC<Props> = ({
   handleOnOpen,
   handleOnClose,
   placeholder = "Select date",
-  displayShortForm = false,
   error = false,
   noBorder = false,
   wrapperClassName = "",
   className = "",
   isClearable = true,
   disabled = false,
+  customInput,
   maxDate,
   minDate,
 }) => (
@@ -49,17 +50,14 @@ export const CustomDatePicker: React.FC<Props> = ({
     onCalendarOpen={handleOnOpen}
     onCalendarClose={handleOnClose}
     wrapperClassName={wrapperClassName}
+    customInput={customInput}
     className={`${
       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/context-menu.tsx b/web/components/ui/dropdowns/context-menu.tsx
index 78df25ec9..7809c81cd 100644
--- a/web/components/ui/dropdowns/context-menu.tsx
+++ b/web/components/ui/dropdowns/context-menu.tsx
@@ -73,9 +73,7 @@ const ContextMenu = ({ clickEvent, children, title, isOpen, setIsOpen }: Props)
         className={`fixed z-50 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs shadow-lg`}
       >
         {title && (
-          <h4 className="border-b border-custom-border-200 px-1 py-1 pb-2 text-[0.8rem] font-medium">
-            {title}
-          </h4>
+          <h4 className="border-b border-custom-border-200 px-1 py-1 pb-2 text-[0.8rem] font-medium">{title}</h4>
         )}
         {children}
       </div>
@@ -92,14 +90,7 @@ type MenuItemProps = {
   Icon?: any;
 };
 
-const MenuItem: React.FC<MenuItemProps> = ({
-  children,
-  renderAs,
-  href = "",
-  onClick,
-  className = "",
-  Icon,
-}) => (
+const MenuItem: React.FC<MenuItemProps> = ({ children, renderAs, href = "", onClick, className = "", Icon }) => (
   <>
     {renderAs === "a" ? (
       <Link href={href}>
diff --git a/web/components/ui/dropdowns/custom-menu.tsx b/web/components/ui/dropdowns/custom-menu.tsx
index f456804f0..46c15ae64 100644
--- a/web/components/ui/dropdowns/custom-menu.tsx
+++ b/web/components/ui/dropdowns/custom-menu.tsx
@@ -1,13 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 
 import Link from "next/link";
 
+// react-poppper
+import { usePopper } from "react-popper";
 // headless ui
-import { Menu, Transition } from "@headlessui/react";
+import { Menu } from "@headlessui/react";
 // ui
 import { DropdownProps } from "components/ui";
 // icons
-import { ExpandMoreOutlined, MoreHorizOutlined } from "@mui/icons-material";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 
 export type CustomMenuProps = DropdownProps & {
   children: React.ReactNode;
@@ -20,6 +22,7 @@ export type CustomMenuProps = DropdownProps & {
 const CustomMenu = ({
   buttonClassName = "",
   customButtonClassName = "",
+  placement,
   children,
   className = "",
   customButton,
@@ -30,100 +33,92 @@ const CustomMenu = ({
   noBorder = false,
   noChevron = false,
   optionsClassName = "",
-  position = "right",
-  selfPositioned = false,
   verticalEllipsis = false,
-  verticalPosition = "bottom",
   width = "auto",
   menuButtonOnClick,
-}: CustomMenuProps) => (
-  <Menu as="div" className={`${selfPositioned ? "" : "relative"} w-min text-left ${className}`}>
-    {({ open }) => (
-      <>
-        {customButton ? (
-          <Menu.Button
-            as="button"
-            type="button"
-            onClick={menuButtonOnClick}
-            className={customButtonClassName}
-            disabled={disabled}
-          >
-            {customButton}
-          </Menu.Button>
-        ) : (
-          <>
-            {ellipsis || verticalEllipsis ? (
-              <Menu.Button
+}: CustomMenuProps) => {
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
                 type="button"
                 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"
-                } ${buttonClassName}`}
+                className={customButtonClassName}
               >
-                <MoreHorizOutlined
-                  fontSize="small"
-                  className={verticalEllipsis ? "rotate-90" : ""}
-                />
-              </Menu.Button>
-            ) : (
-              <Menu.Button
-                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"
-                } ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                {label}
-                {!noChevron && (
-                  <ExpandMoreOutlined
-                    sx={{
-                      fontSize: 14,
-                    }}
-                    aria-hidden="true"
-                  />
-                )}
-              </Menu.Button>
-            )}
-          </>
-        )}
-
-        <Transition
-          as={React.Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items
-            className={`absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90 ${
-              position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-            } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
-              maxHeight === "lg"
-                ? "max-h-60"
-                : maxHeight === "md"
-                ? "max-h-48"
-                : maxHeight === "rg"
-                ? "max-h-36"
-                : maxHeight === "sm"
-                ? "max-h-28"
-                : ""
-            } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
-          >
-            <div className="py-1">{children}</div>
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    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"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    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"} ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items>
+            <div
+              className={`z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                maxHeight === "lg"
+                  ? "max-h-60"
+                  : maxHeight === "md"
+                  ? "max-h-48"
+                  : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                  ? "max-h-28"
+                  : ""
+              } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="py-1">{children}</div>
+            </div>
           </Menu.Items>
-        </Transition>
-      </>
-    )}
-  </Menu>
-);
+        </>
+      )}
+    </Menu>
+  );
+};
 
 type MenuItemProps = {
   children: React.ReactNode;
@@ -133,13 +128,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/dropdowns/custom-search-select.tsx b/web/components/ui/dropdowns/custom-search-select.tsx
index afbd27e4a..09db05d10 100644
--- a/web/components/ui/dropdowns/custom-search-select.tsx
+++ b/web/components/ui/dropdowns/custom-search-select.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 
+// react-popper
+import { usePopper } from "react-popper";
 // headless ui
-import { Combobox, Transition } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown, Search } from "lucide-react";
 // types
 import { DropdownProps } from "./types";
 
@@ -27,9 +28,11 @@ export type CustomSearchSelectProps = DropdownProps & {
   );
 
 export const CustomSearchSelect = ({
+  customButtonClassName = "",
   buttonClassName = "",
   className = "",
   customButton,
+  placement,
   disabled = false,
   footerOption,
   input = false,
@@ -41,18 +44,20 @@ export const CustomSearchSelect = ({
   options,
   onOpen,
   optionsClassName = "",
-  position = "left",
-  selfPositioned = false,
   value,
-  verticalPosition = "bottom",
   width = "auto",
 }: CustomSearchSelectProps) => {
   const [query, setQuery] = useState("");
 
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
   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 props: any = {
     value,
@@ -63,54 +68,55 @@ export const CustomSearchSelect = ({
   if (multiple) props.multiple = true;
 
   return (
-    <Combobox
-      as="div"
-      className={`${selfPositioned ? "" : "relative"} flex-shrink-0 text-left ${className}`}
-      {...props}
-    >
+    <Combobox as="div" className={`relative flex-shrink-0 text-left ${className}`} {...props}>
       {({ open }: { open: boolean }) => {
         if (open && onOpen) onOpen();
 
         return (
           <>
             {customButton ? (
-              <Combobox.Button as="div">{customButton}</Combobox.Button>
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  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"
+                  }  ${customButtonClassName}`}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
             ) : (
-              <Combobox.Button
-                type="button"
-                className={`flex items-center justify-between gap-1 w-full rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                  input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
-                } ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                {label}
-                {!noChevron && !disabled && (
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                )}
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                    input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                  } ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  } ${buttonClassName}`}
+                >
+                  {label}
+                  {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+                </button>
               </Combobox.Button>
             )}
-            <Transition
-              show={open}
-              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"
-            >
-              <Combobox.Options
-                className={`absolute z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
-                  position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-                } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
+            <Combobox.Options as={React.Fragment}>
+              <div
+                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
                   width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
                 } ${optionsClassName}`}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
               >
                 <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
+                  <Search className="h-3 w-3 text-custom-text-200" />
                   <Combobox.Input
                     className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                     value={query}
@@ -153,14 +159,10 @@ export const CustomSearchSelect = ({
                                     active || selected ? "opacity-100" : "opacity-0"
                                   }`}
                                 >
-                                  <CheckIcon
-                                    className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                                  />
+                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                 </div>
                               ) : (
-                                <CheckIcon
-                                  className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                                />
+                                <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                               )}
                             </>
                           )}
@@ -176,8 +178,8 @@ export const CustomSearchSelect = ({
                   )}
                 </div>
                 {footerOption}
-              </Combobox.Options>
-            </Transition>
+              </div>
+            </Combobox.Options>
           </>
         );
       }}
diff --git a/web/components/ui/dropdowns/custom-select.tsx b/web/components/ui/dropdowns/custom-select.tsx
index ae814dccb..422356a95 100644
--- a/web/components/ui/dropdowns/custom-select.tsx
+++ b/web/components/ui/dropdowns/custom-select.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 
+// react-popper
+import { usePopper } from "react-popper";
 // headless ui
-import { Listbox, Transition } from "@headlessui/react";
+import { Listbox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown } from "lucide-react";
 // types
 import { DropdownProps } from "./types";
 
@@ -15,7 +16,9 @@ export type CustomSelectProps = DropdownProps & {
 };
 
 const CustomSelect = ({
+  customButtonClassName = "",
   buttonClassName = "",
+  placement,
   children,
   className = "",
   customButton,
@@ -26,68 +29,77 @@ const CustomSelect = ({
   noChevron = false,
   onChange,
   optionsClassName = "",
-  position = "left",
-  selfPositioned = false,
   value,
-  verticalPosition = "bottom",
   width = "auto",
-}: CustomSelectProps) => (
-  <Listbox
-    as="div"
-    value={value}
-    onChange={onChange}
-    className={`${selfPositioned ? "" : "relative"} flex-shrink-0 text-left ${className}`}
-    disabled={disabled}
-  >
-    <>
-      {customButton ? (
-        <Listbox.Button as={React.Fragment}>{customButton}</Listbox.Button>
-      ) : (
-        <Listbox.Button
-          type="button"
-          className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
-            input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
-          } ${
-            disabled
-              ? "cursor-not-allowed text-custom-text-200"
-              : "cursor-pointer hover:bg-custom-background-80"
-          } ${buttonClassName}`}
-        >
-          {label}
-          {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
-        </Listbox.Button>
-      )}
-    </>
+}: CustomSelectProps) => {
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-    <Transition
-      as={React.Fragment}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className={`relative flex-shrink-0 text-left ${className}`}
+      disabled={disabled}
     >
-      <Listbox.Options
-        className={`absolute z-10 border border-custom-border-300 mt-1 origin-top-right overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
-          position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-        } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
-          maxHeight === "lg"
-            ? "max-h-60"
-            : maxHeight === "md"
-            ? "max-h-48"
-            : maxHeight === "rg"
-            ? "max-h-36"
-            : maxHeight === "sm"
-            ? "max-h-28"
-            : ""
-        } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
-      >
-        <div className="space-y-1 p-2">{children}</div>
+      <>
+        {customButton ? (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              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"
+              }  ${customButtonClassName}`}
+            >
+              {customButton}
+            </button>
+          </Listbox.Button>
+        ) : (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {label}
+              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+            </button>
+          </Listbox.Button>
+        )}
+      </>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+            maxHeight === "lg"
+              ? "max-h-60"
+              : maxHeight === "md"
+              ? "max-h-48"
+              : maxHeight === "rg"
+              ? "max-h-36"
+              : maxHeight === "sm"
+              ? "max-h-28"
+              : ""
+          } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="space-y-1 p-2">{children}</div>
+        </div>
       </Listbox.Options>
-    </Transition>
-  </Listbox>
-);
+    </Listbox>
+  );
+};
 
 type OptionProps = {
   children: React.ReactNode;
@@ -99,15 +111,15 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
   <Listbox.Option
     value={value}
     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"} ${className}`
+      `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"
+      } ${className}`
     }
   >
     {({ selected }) => (
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">{children}</div>
-        {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+        {selected && <Check className="h-4 w-4 flex-shrink-0" />}
       </div>
     )}
   </Listbox.Option>
diff --git a/web/components/ui/dropdowns/types.d.ts b/web/components/ui/dropdowns/types.d.ts
index b368a7ed8..4b153e6c1 100644
--- a/web/components/ui/dropdowns/types.d.ts
+++ b/web/components/ui/dropdowns/types.d.ts
@@ -1,4 +1,7 @@
+import { Placement } from "@popperjs/core";
+
 export type DropdownProps = {
+  customButtonClassName?: string;
   buttonClassName?: string;
   customButtonClassName?: string;
   className?: string;
@@ -10,8 +13,6 @@ export type DropdownProps = {
   noChevron?: boolean;
   onOpen?: () => void;
   optionsClassName?: string;
-  position?: "right" | "left";
-  selfPositioned?: boolean;
-  verticalPosition?: "top" | "bottom";
   width?: "auto" | string;
+  placement?: Placement;
 };
diff --git a/web/components/ui/empty-space.tsx b/web/components/ui/empty-space.tsx
index 1a8c5d9a3..5e5746a54 100644
--- a/web/components/ui/empty-space.tsx
+++ b/web/components/ui/empty-space.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 // react
 import React from "react";
 // icons
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronRight } from "lucide-react";
 
 type EmptySpaceProps = {
   title: string;
@@ -24,10 +24,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
 
       <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
       <div className="mt-1 text-sm text-custom-text-200">{description}</div>
-      <ul
-        role="list"
-        className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200"
-      >
+      <ul role="list" className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200">
         {children}
       </ul>
       {link ? (
@@ -54,11 +51,7 @@ type EmptySpaceItemProps = {
 const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action }) => (
   <>
     <li className="cursor-pointer" onClick={action}>
-      <div
-        className={`group relative flex ${
-          description ? "items-start" : "items-center"
-        } space-x-3 py-4`}
-      >
+      <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
         <div className="flex-shrink-0">
           <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -69,10 +62,7 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
           {description ? <div className="text-sm">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
-          <ChevronRightIcon
-            className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
-            aria-hidden="true"
-          />
+          <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
         </div>
       </div>
     </li>
diff --git a/web/components/ui/graphs/bar-graph.tsx b/web/components/ui/graphs/bar-graph.tsx
index ae4154f36..3756b0455 100644
--- a/web/components/ui/graphs/bar-graph.tsx
+++ b/web/components/ui/graphs/bar-graph.tsx
@@ -32,9 +32,7 @@ export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height"
       axisLeft={{
         tickSize: 0,
         tickPadding: 10,
-        tickValues: customYAxisTickValues
-          ? generateYAxisTickValues(customYAxisTickValues)
-          : undefined,
+        tickValues: customYAxisTickValues ? generateYAxisTickValues(customYAxisTickValues) : undefined,
       }}
       axisBottom={{
         tickSize: 0,
@@ -43,7 +41,7 @@ export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height"
       }}
       labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate={true}
+      animate
       enableLabel={rest.enableLabel ?? false}
       {...rest}
     />
diff --git a/web/components/ui/graphs/line-graph.tsx b/web/components/ui/graphs/line-graph.tsx
index fb082e5fc..91a19acc3 100644
--- a/web/components/ui/graphs/line-graph.tsx
+++ b/web/components/ui/graphs/line-graph.tsx
@@ -25,12 +25,10 @@ export const LineGraph: React.FC<Props & TGraph & LineSvgProps> = ({
       axisLeft={{
         tickSize: 0,
         tickPadding: 10,
-        tickValues: customYAxisTickValues
-          ? generateYAxisTickValues(customYAxisTickValues)
-          : undefined,
+        tickValues: customYAxisTickValues ? generateYAxisTickValues(customYAxisTickValues) : undefined,
       }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate={true}
+      animate
       {...rest}
     />
   </div>
diff --git a/web/components/ui/graphs/pie-graph.tsx b/web/components/ui/graphs/pie-graph.tsx
index 6f60afe2f..52b56e492 100644
--- a/web/components/ui/graphs/pie-graph.tsx
+++ b/web/components/ui/graphs/pie-graph.tsx
@@ -16,7 +16,7 @@ export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "widt
     <ResponsivePie
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate={true}
+      animate
       {...rest}
     />
   </div>
diff --git a/web/components/ui/graphs/scatter-plot-graph.tsx b/web/components/ui/graphs/scatter-plot-graph.tsx
index 99f42d958..c6ff5a772 100644
--- a/web/components/ui/graphs/scatter-plot-graph.tsx
+++ b/web/components/ui/graphs/scatter-plot-graph.tsx
@@ -5,13 +5,17 @@ import { TGraph } from "./types";
 // constants
 import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
-export const ScatterPlotGraph: React.FC<
-  TGraph & Omit<ScatterPlotSvgProps<any>, "height" | "width">
-> = ({ height = "400px", width = "100%", margin, theme, ...rest }) => (
+export const ScatterPlotGraph: React.FC<TGraph & Omit<ScatterPlotSvgProps<any>, "height" | "width">> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
   <div style={{ height, width }}>
     <ResponsiveScatterPlot
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
-      animate={true}
+      animate
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
     />
diff --git a/web/components/ui/icon-name-type.d.ts b/web/components/ui/icon-name-type.d.ts
deleted file mode 100644
index 0d886b08e..000000000
--- a/web/components/ui/icon-name-type.d.ts
+++ /dev/null
@@ -1,2991 +0,0 @@
-type IconName =
-  | "search"
-  | "home"
-  | "menu"
-  | "close"
-  | "settings"
-  | "done"
-  | "expand_more"
-  | "check_circle"
-  | "favorite"
-  | "add"
-  | "delete"
-  | "arrow_back"
-  | "star"
-  | "chevron_right"
-  | "logout"
-  | "arrow_forward_ios"
-  | "add_circle"
-  | "cancel"
-  | "arrow_back_ios"
-  | "arrow_forward"
-  | "arrow_drop_down"
-  | "more_vert"
-  | "check"
-  | "check_box"
-  | "toggle_on"
-  | "grade"
-  | "open_in_new"
-  | "check_box_outline_blank"
-  | "refresh"
-  | "login"
-  | "chevron_left"
-  | "expand_less"
-  | "radio_button_unchecked"
-  | "more_horiz"
-  | "apps"
-  | "arrow_right_alt"
-  | "radio_button_checked"
-  | "download"
-  | "remove"
-  | "bolt"
-  | "toggle_off"
-  | "arrow_upward"
-  | "filter_list"
-  | "delete_forever"
-  | "autorenew"
-  | "key"
-  | "arrow_downward"
-  | "sync"
-  | "sort"
-  | "block"
-  | "add_box"
-  | "arrow_back_ios_new"
-  | "restart_alt"
-  | "menu_open"
-  | "shopping_cart_checkout"
-  | "expand_circle_down"
-  | "backspace"
-  | "undo"
-  | "arrow_circle_right"
-  | "done_all"
-  | "arrow_right"
-  | "do_not_disturb_on"
-  | "open_in_full"
-  | "manage_search"
-  | "double_arrow"
-  | "sync_alt"
-  | "zoom_in"
-  | "done_outline"
-  | "drag_indicator"
-  | "fullscreen"
-  | "keyboard_double_arrow_right"
-  | "star_half"
-  | "settings_accessibility"
-  | "ios_share"
-  | "arrow_drop_up"
-  | "reply"
-  | "exit_to_app"
-  | "unfold_more"
-  | "library_add"
-  | "cached"
-  | "select_check_box"
-  | "terminal"
-  | "change_circle"
-  | "disabled_by_default"
-  | "swap_horiz"
-  | "swap_vert"
-  | "close_fullscreen"
-  | "app_registration"
-  | "download_for_offline"
-  | "arrow_circle_left"
-  | "arrow_circle_up"
-  | "file_open"
-  | "minimize"
-  | "open_with"
-  | "keyboard_double_arrow_left"
-  | "dataset"
-  | "add_task"
-  | "start"
-  | "keyboard_double_arrow_down"
-  | "keyboard_voice"
-  | "create_new_folder"
-  | "forward"
-  | "downloading"
-  | "settings_applications"
-  | "compare_arrows"
-  | "redo"
-  | "publish"
-  | "arrow_left"
-  | "zoom_out"
-  | "html"
-  | "token"
-  | "switch_access_shortcut"
-  | "arrow_circle_down"
-  | "fullscreen_exit"
-  | "sort_by_alpha"
-  | "delete_sweep"
-  | "indeterminate_check_box"
-  | "first_page"
-  | "keyboard_double_arrow_up"
-  | "view_timeline"
-  | "arrow_drop_down_circle"
-  | "assistant_navigation"
-  | "settings_backup_restore"
-  | "sync_problem"
-  | "clear_all"
-  | "density_medium"
-  | "heart_plus"
-  | "filter_alt_off"
-  | "expand"
-  | "last_page"
-  | "subdirectory_arrow_right"
-  | "unfold_less"
-  | "arrow_outward"
-  | "download_done"
-  | "123"
-  | "swipe_left"
-  | "saved_search"
-  | "system_update_alt"
-  | "place_item"
-  | "maximize"
-  | "javascript"
-  | "output"
-  | "search_off"
-  | "swipe_up"
-  | "fit_screen"
-  | "select_all"
-  | "dynamic_form"
-  | "hide_source"
-  | "swipe_right"
-  | "switch_access_shortcut_add"
-  | "browse_gallery"
-  | "check_small"
-  | "css"
-  | "density_small"
-  | "assistant_direction"
-  | "youtube_searched_for"
-  | "file_download_done"
-  | "move_up"
-  | "swap_horizontal_circle"
-  | "data_thresholding"
-  | "install_mobile"
-  | "move_down"
-  | "abc"
-  | "dataset_linked"
-  | "restore_from_trash"
-  | "enable"
-  | "install_desktop"
-  | "keyboard_command_key"
-  | "view_kanban"
-  | "browse_activity"
-  | "reply_all"
-  | "switch_left"
-  | "compress"
-  | "swipe_down"
-  | "swap_vertical_circle"
-  | "remove_done"
-  | "apps_outage"
-  | "filter_list_off"
-  | "star_rate"
-  | "hide"
-  | "switch_right"
-  | "swipe_vertical"
-  | "more_up"
-  | "sync_disabled"
-  | "pinch"
-  | "keyboard_control_key"
-  | "eject"
-  | "key_off"
-  | "php"
-  | "subdirectory_arrow_left"
-  | "view_cozy"
-  | "transcribe"
-  | "do_not_disturb_off"
-  | "send_time_extension"
-  | "width_normal"
-  | "heart_minus"
-  | "view_comfy_alt"
-  | "share_reviews"
-  | "width_full"
-  | "unfold_more_double"
-  | "view_compact_alt"
-  | "file_download_off"
-  | "extension_off"
-  | "open_in_new_off"
-  | "check_indeterminate_small"
-  | "more_down"
-  | "width_wide"
-  | "repartition"
-  | "density_large"
-  | "swipe_left_alt"
-  | "swipe_down_alt"
-  | "swipe_right_alt"
-  | "swipe_up_alt"
-  | "unfold_less_double"
-  | "keyboard_option_key"
-  | "cycle"
-  | "hls"
-  | "hls_off"
-  | "progress_activity"
-  | "file_upload_off"
-  | "rebase"
-  | "expand_content"
-  | "expand_all"
-  | "rebase_edit"
-  | "collapse_all"
-  | "empty_dashboard"
-  | "arrow_split"
-  | "quick_reference_all"
-  | "arrow_upward_alt"
-  | "switches"
-  | "arrow_downward_alt"
-  | "directory_sync"
-  | "quick_reference"
-  | "cards"
-  | "deployed_code"
-  | "side_navigation"
-  | "data_check"
-  | "acute"
-  | "bubble"
-  | "left_click"
-  | "sync_saved_locally"
-  | "data_alert"
-  | "move_item"
-  | "steppers"
-  | "stack"
-  | "stat_3"
-  | "arrow_left_alt"
-  | "clock_loader_60"
-  | "page_info"
-  | "data_info_alert"
-  | "search_check"
-  | "question_exchange"
-  | "point_scan"
-  | "preliminary"
-  | "toolbar"
-  | "clock_loader_10"
-  | "sweep"
-  | "new_window"
-  | "right_panel_close"
-  | "captive_portal"
-  | "star_rate_half"
-  | "page_control"
-  | "patient_list"
-  | "right_panel_open"
-  | "stat_2"
-  | "stat_minus_1"
-  | "unknown_med"
-  | "stat_minus_2"
-  | "clock_loader_40"
-  | "dialogs"
-  | "capture"
-  | "step_into"
-  | "arrow_insert"
-  | "heart_check"
-  | "magnification_large"
-  | "partner_reports"
-  | "stack_star"
-  | "drag_pan"
-  | "magnification_small"
-  | "stat_1"
-  | "clock_loader_90"
-  | "dropdown"
-  | "left_panel_close"
-  | "left_panel_open"
-  | "sliders"
-  | "bottom_panel_open"
-  | "clock_loader_80"
-  | "move_group"
-  | "bottom_navigation"
-  | "stack_off"
-  | "all_match"
-  | "clock_loader_20"
-  | "step"
-  | "stat_minus_3"
-  | "bottom_drawer"
-  | "buttons_alt"
-  | "chip_extraction"
-  | "bottom_sheets"
-  | "chronic"
-  | "pip"
-  | "resize"
-  | "tabs"
-  | "chips"
-  | "iframe"
-  | "input_circle"
-  | "reopen_window"
-  | "ripples"
-  | "rule_settings"
-  | "toast"
-  | "unknown_5"
-  | "share_windows"
-  | "shelf_position"
-  | "go_to_line"
-  | "right_click"
-  | "subheader"
-  | "bottom_right_click"
-  | "drag_click"
-  | "expand_circle_up"
-  | "step_out"
-  | "step_over"
-  | "switch_access"
-  | "arrow_and_edge"
-  | "error_med"
-  | "app_badging"
-  | "deployed_code_alert"
-  | "event_list"
-  | "move_selection_left"
-  | "move_selection_right"
-  | "output_circle"
-  | "amend"
-  | "pip_exit"
-  | "arrow_or_edge"
-  | "arrow_top_right"
-  | "bottom_app_bar"
-  | "deployed_code_update"
-  | "iframe_off"
-  | "shelf_auto_hide"
-  | "arrow_range"
-  | "bottom_panel_close"
-  | "bubbles"
-  | "position_bottom_right"
-  | "arrow_top_left"
-  | "arrows_outward"
-  | "back_to_tab"
-  | "jump_to_element"
-  | "move_selection_down"
-  | "move_selection_up"
-  | "open_in_new_down"
-  | "deployed_code_history"
-  | "position_bottom_left"
-  | "position_top_right"
-  | "expand_circle_right"
-  | "person"
-  | "group"
-  | "share"
-  | "thumb_up"
-  | "groups"
-  | "person_add"
-  | "public"
-  | "handshake"
-  | "support_agent"
-  | "face"
-  | "sentiment_satisfied"
-  | "rocket_launch"
-  | "group_add"
-  | "workspace_premium"
-  | "psychology"
-  | "diversity_3"
-  | "emoji_objects"
-  | "water_drop"
-  | "eco"
-  | "pets"
-  | "travel_explore"
-  | "mood"
-  | "sunny"
-  | "quiz"
-  | "health_and_safety"
-  | "sentiment_dissatisfied"
-  | "sentiment_very_satisfied"
-  | "military_tech"
-  | "thumb_down"
-  | "gavel"
-  | "recycling"
-  | "diamond"
-  | "monitor_heart"
-  | "emoji_people"
-  | "diversity_1"
-  | "workspaces"
-  | "vaccines"
-  | "compost"
-  | "forest"
-  | "recommend"
-  | "waving_hand"
-  | "person_remove"
-  | "wc"
-  | "medication"
-  | "sentiment_neutral"
-  | "group_work"
-  | "sentiment_very_dissatisfied"
-  | "diversity_2"
-  | "front_hand"
-  | "psychology_alt"
-  | "cruelty_free"
-  | "man"
-  | "medical_information"
-  | "coronavirus"
-  | "add_reaction"
-  | "rocket"
-  | "female"
-  | "potted_plant"
-  | "emoji_nature"
-  | "rainy"
-  | "person_off"
-  | "cookie"
-  | "woman"
-  | "connect_without_contact"
-  | "mood_bad"
-  | "male"
-  | "bedtime"
-  | "solar_power"
-  | "communication"
-  | "thunderstorm"
-  | "groups_2"
-  | "partly_cloudy_day"
-  | "thumbs_up_down"
-  | "emoji_flags"
-  | "masks"
-  | "hive"
-  | "heart_broken"
-  | "sentiment_extremely_dissatisfied"
-  | "clear_day"
-  | "boy"
-  | "whatshot"
-  | "cloudy_snowing"
-  | "emoji_food_beverage"
-  | "wind_power"
-  | "emoji_transportation"
-  | "elderly"
-  | "face_6"
-  | "reduce_capacity"
-  | "sick"
-  | "pregnant_woman"
-  | "face_3"
-  | "bloodtype"
-  | "group_remove"
-  | "egg"
-  | "medication_liquid"
-  | "groups_3"
-  | "co2"
-  | "clear_night"
-  | "weight"
-  | "skull"
-  | "follow_the_signs"
-  | "face_4"
-  | "emoji_events"
-  | "oil_barrel"
-  | "transgender"
-  | "elderly_woman"
-  | "clean_hands"
-  | "sanitizer"
-  | "person_2"
-  | "bring_your_own_ip"
-  | "public_off"
-  | "face_2"
-  | "social_distance"
-  | "routine"
-  | "sign_language"
-  | "south_america"
-  | "sunny_snowing"
-  | "emoji_symbols"
-  | "garden_cart"
-  | "flood"
-  | "face_5"
-  | "egg_alt"
-  | "cyclone"
-  | "girl"
-  | "person_4"
-  | "dentistry"
-  | "tsunami"
-  | "group_off"
-  | "outdoor_garden"
-  | "partly_cloudy_night"
-  | "severe_cold"
-  | "snowing"
-  | "person_3"
-  | "tornado"
-  | "landslide"
-  | "vaping_rooms"
-  | "safety_divider"
-  | "foggy"
-  | "woman_2"
-  | "no_adult_content"
-  | "volcano"
-  | "man_2"
-  | "blind"
-  | "18_up_rating"
-  | "6_ft_apart"
-  | "vape_free"
-  | "not_accessible"
-  | "man_4"
-  | "radiology"
-  | "rib_cage"
-  | "hand_bones"
-  | "bedtime_off"
-  | "rheumatology"
-  | "man_3"
-  | "orthopedics"
-  | "tibia"
-  | "skeleton"
-  | "partner_exchange"
-  | "humerus"
-  | "agender"
-  | "femur"
-  | "foot_bones"
-  | "tibia_alt"
-  | "femur_alt"
-  | "humerus_alt"
-  | "communities"
-  | "diversity_4"
-  | "ulna_radius"
-  | "ulna_radius_alt"
-  | "specific_gravity"
-  | "cognition"
-  | "breastfeeding"
-  | "eyeglasses"
-  | "psychiatry"
-  | "labs"
-  | "crowdsource"
-  | "footprint"
-  | "vital_signs"
-  | "nutrition"
-  | "neurology"
-  | "social_leaderboard"
-  | "demography"
-  | "globe_asia"
-  | "stethoscope"
-  | "conditions"
-  | "lab_research"
-  | "clinical_notes"
-  | "sentiment_excited"
-  | "sentiment_stressed"
-  | "taunt"
-  | "altitude"
-  | "glucose"
-  | "globe_uk"
-  | "mystery"
-  | "strategy"
-  | "home_health"
-  | "sentiment_calm"
-  | "crossword"
-  | "prayer_times"
-  | "recent_patient"
-  | "chess"
-  | "pill"
-  | "sentiment_sad"
-  | "share_off"
-  | "weather_hail"
-  | "cardiology"
-  | "falling"
-  | "helicopter"
-  | "mist"
-  | "prescriptions"
-  | "sentiment_content"
-  | "wrist"
-  | "deceased"
-  | "genetics"
-  | "weather_mix"
-  | "dew_point"
-  | "sentiment_frustrated"
-  | "cheer"
-  | "metabolism"
-  | "microbiology"
-  | "body_system"
-  | "earthquake"
-  | "ent"
-  | "explosion"
-  | "pulmonology"
-  | "stethoscope_check"
-  | "infrared"
-  | "oxygen_saturation"
-  | "person_raised_hand"
-  | "sentiment_worried"
-  | "sword_rose"
-  | "barefoot"
-  | "cookie_off"
-  | "domino_mask"
-  | "emoticon"
-  | "humidity_percentage"
-  | "playing_cards"
-  | "stethoscope_arrow"
-  | "water_lux"
-  | "comic_bubble"
-  | "lab_panel"
-  | "mountain_flag"
-  | "ophthalmology"
-  | "water_bottle"
-  | "water_do"
-  | "water_voc"
-  | "allergies"
-  | "allergy"
-  | "blood_pressure"
-  | "dermatology"
-  | "gynecology"
-  | "immunology"
-  | "manga"
-  | "oncology"
-  | "oral_disease"
-  | "person_apron"
-  | "short_stay"
-  | "water_orp"
-  | "water_ph"
-  | "body_fat"
-  | "endocrinology"
-  | "folded_hands"
-  | "hematology"
-  | "inpatient"
-  | "mixture_med"
-  | "moving_beds"
-  | "nephrology"
-  | "respiratory_rate"
-  | "symptoms"
-  | "ward"
-  | "congenital"
-  | "gastroenterology"
-  | "medical_mask"
-  | "outpatient"
-  | "outpatient_med"
-  | "pediatrics"
-  | "procedure"
-  | "rainy_snow"
-  | "salinity"
-  | "surgical"
-  | "syringe"
-  | "urology"
-  | "wounds_injuries"
-  | "admin_meds"
-  | "fluid"
-  | "fluid_balance"
-  | "fluid_med"
-  | "pill_off"
-  | "pregnancy"
-  | "total_dissolved_solids"
-  | "rainy_heavy"
-  | "rainy_light"
-  | "snowing_heavy"
-  | "water_bottle_large"
-  | "water_ec"
-  | "account_circle"
-  | "info"
-  | "visibility"
-  | "calendar_month"
-  | "schedule"
-  | "help"
-  | "language"
-  | "warning"
-  | "lock"
-  | "error"
-  | "visibility_off"
-  | "verified"
-  | "manage_accounts"
-  | "history"
-  | "task_alt"
-  | "event"
-  | "bookmark"
-  | "calendar_today"
-  | "question_mark"
-  | "lightbulb"
-  | "fingerprint"
-  | "category"
-  | "update"
-  | "lock_open"
-  | "priority_high"
-  | "code"
-  | "build"
-  | "date_range"
-  | "upload_file"
-  | "supervisor_account"
-  | "event_available"
-  | "ads_click"
-  | "today"
-  | "touch_app"
-  | "pending"
-  | "preview"
-  | "stars"
-  | "new_releases"
-  | "account_box"
-  | "celebration"
-  | "how_to_reg"
-  | "translate"
-  | "bug_report"
-  | "push_pin"
-  | "alarm"
-  | "edit_calendar"
-  | "edit_square"
-  | "label"
-  | "extension"
-  | "event_note"
-  | "record_voice_over"
-  | "rate_review"
-  | "web"
-  | "hourglass_empty"
-  | "published_with_changes"
-  | "support"
-  | "notification_important"
-  | "upload"
-  | "help_center"
-  | "accessibility_new"
-  | "bookmarks"
-  | "pan_tool_alt"
-  | "supervised_user_circle"
-  | "dangerous"
-  | "collections_bookmark"
-  | "interests"
-  | "all_inclusive"
-  | "rule"
-  | "change_history"
-  | "priority"
-  | "event_upcoming"
-  | "build_circle"
-  | "wysiwyg"
-  | "pan_tool"
-  | "api"
-  | "circle_notifications"
-  | "hotel_class"
-  | "manage_history"
-  | "web_asset"
-  | "accessible"
-  | "upgrade"
-  | "bookmark_add"
-  | "lock_reset"
-  | "input"
-  | "event_busy"
-  | "more_time"
-  | "flutter_dash"
-  | "model_training"
-  | "save_as"
-  | "backup"
-  | "accessibility"
-  | "dynamic_feed"
-  | "alarm_on"
-  | "pageview"
-  | "home_app_logo"
-  | "perm_contact_calendar"
-  | "label_important"
-  | "history_toggle_off"
-  | "approval"
-  | "square_foot"
-  | "more"
-  | "swipe"
-  | "component_exchange"
-  | "event_repeat"
-  | "bookmark_added"
-  | "app_shortcut"
-  | "unpublished"
-  | "open_in_browser"
-  | "offline_bolt"
-  | "notification_add"
-  | "no_accounts"
-  | "free_cancellation"
-  | "running_with_errors"
-  | "background_replace"
-  | "anchor"
-  | "webhook"
-  | "3d_rotation"
-  | "lock_person"
-  | "new_label"
-  | "lock_clock"
-  | "accessible_forward"
-  | "auto_delete"
-  | "add_alert"
-  | "domain_verification"
-  | "outbound"
-  | "hand_gesture"
-  | "tab"
-  | "settings_power"
-  | "chrome_reader_mode"
-  | "online_prediction"
-  | "gesture"
-  | "edit_notifications"
-  | "lightbulb_circle"
-  | "find_replace"
-  | "backup_table"
-  | "offline_pin"
-  | "wifi_protected_setup"
-  | "ad_units"
-  | "http"
-  | "bookmark_remove"
-  | "alarm_add"
-  | "pinch_zoom_out"
-  | "on_device_training"
-  | "snooze"
-  | "batch_prediction"
-  | "code_off"
-  | "pinch_zoom_in"
-  | "commit"
-  | "hourglass_disabled"
-  | "settings_overscan"
-  | "polymer"
-  | "target"
-  | "logo_dev"
-  | "youtube_activity"
-  | "time_auto"
-  | "voice_over_off"
-  | "person_add_disabled"
-  | "alarm_off"
-  | "update_disabled"
-  | "timer_10_alt_1"
-  | "rounded_corner"
-  | "label_off"
-  | "all_out"
-  | "timer_3_alt_1"
-  | "tab_unselected"
-  | "rsvp"
-  | "web_asset_off"
-  | "pin_invoke"
-  | "pin_end"
-  | "code_blocks"
-  | "approval_delegation"
-  | "arrow_selector_tool"
-  | "developer_guide"
-  | "feature_search"
-  | "reminder"
-  | "lists"
-  | "problem"
-  | "visibility_lock"
-  | "browse"
-  | "award_star"
-  | "data_loss_prevention"
-  | "ad_group"
-  | "select_window"
-  | "ad"
-  | "release_alert"
-  | "settings_account_box"
-  | "shadow"
-  | "pan_zoom"
-  | "draft_orders"
-  | "circles_ext"
-  | "ad_group_off"
-  | "add_ad"
-  | "account_circle_off"
-  | "gesture_select"
-  | "lock_open_right"
-  | "watch_screentime"
-  | "circles"
-  | "select_window_off"
-  | "shift"
-  | "help_clinic"
-  | "scrollable_header"
-  | "bookmark_manager"
-  | "ad_off"
-  | "alarm_smart_wake"
-  | "preview_off"
-  | "supervised_user_circle_off"
-  | "water_lock"
-  | "domain_verification_off"
-  | "measuring_tape"
-  | "warning_off"
-  | "info_i"
-  | "shift_lock"
-  | "mail"
-  | "call"
-  | "notifications"
-  | "send"
-  | "chat"
-  | "link"
-  | "forum"
-  | "inventory_2"
-  | "phone_in_talk"
-  | "contact_support"
-  | "chat_bubble"
-  | "notifications_active"
-  | "alternate_email"
-  | "sms"
-  | "comment"
-  | "power_settings_new"
-  | "hub"
-  | "person_search"
-  | "import_contacts"
-  | "contact_mail"
-  | "contacts"
-  | "live_help"
-  | "forward_to_inbox"
-  | "mark_email_unread"
-  | "reviews"
-  | "lan"
-  | "contact_phone"
-  | "mode_comment"
-  | "hourglass_top"
-  | "inbox"
-  | "drafts"
-  | "outgoing_mail"
-  | "hourglass_bottom"
-  | "mark_email_read"
-  | "link_off"
-  | "calendar_add_on"
-  | "add_comment"
-  | "phone_enabled"
-  | "speaker_notes"
-  | "perm_phone_msg"
-  | "g_translate"
-  | "co_present"
-  | "notifications_off"
-  | "topic"
-  | "call_end"
-  | "cell_tower"
-  | "mark_chat_unread"
-  | "schedule_send"
-  | "dialpad"
-  | "call_made"
-  | "satellite_alt"
-  | "mark_unread_chat_alt"
-  | "unarchive"
-  | "3p"
-  | "cancel_presentation"
-  | "mark_as_unread"
-  | "move_to_inbox"
-  | "attach_email"
-  | "phonelink_ring"
-  | "next_plan"
-  | "unsubscribe"
-  | "phone_callback"
-  | "call_received"
-  | "settings_phone"
-  | "call_split"
-  | "present_to_all"
-  | "add_call"
-  | "markunread_mailbox"
-  | "all_inbox"
-  | "phone_forwarded"
-  | "voice_chat"
-  | "mail_lock"
-  | "attribution"
-  | "voicemail"
-  | "duo"
-  | "contact_emergency"
-  | "mark_chat_read"
-  | "upcoming"
-  | "phone_disabled"
-  | "swap_calls"
-  | "outbox"
-  | "phonelink_lock"
-  | "spoke"
-  | "cancel_schedule_send"
-  | "ring_volume"
-  | "notifications_paused"
-  | "picture_in_picture_alt"
-  | "quickreply"
-  | "phone_missed"
-  | "comment_bank"
-  | "send_and_archive"
-  | "chat_add_on"
-  | "settings_bluetooth"
-  | "phonelink_erase"
-  | "picture_in_picture"
-  | "comments_disabled"
-  | "video_chat"
-  | "score"
-  | "pause_presentation"
-  | "cell_wifi"
-  | "speaker_phone"
-  | "speaker_notes_off"
-  | "auto_read_play"
-  | "mms"
-  | "call_merge"
-  | "play_for_work"
-  | "call_missed_outgoing"
-  | "call_missed"
-  | "wifi_channel"
-  | "calendar_apps_script"
-  | "phone_paused"
-  | "rtt"
-  | "auto_read_pause"
-  | "phone_locked"
-  | "chat_apps_script"
-  | "wifi_calling"
-  | "dialer_sip"
-  | "nat"
-  | "sip"
-  | "phone_bluetooth_speaker"
-  | "e911_avatar"
-  | "inbox_customize"
-  | "stacked_email"
-  | "tooltip"
-  | "business_messages"
-  | "notification_multiple"
-  | "chat_error"
-  | "ods"
-  | "chat_paste_go"
-  | "signal_cellular_add"
-  | "call_log"
-  | "outbox_alt"
-  | "call_quality"
-  | "odt"
-  | "stacked_inbox"
-  | "phonelink_ring_off"
-  | "network_manage"
-  | "wifi_proxy"
-  | "network_intelligence_history"
-  | "wifi_add"
-  | "network_intelligence_update"
-  | "edit"
-  | "photo_camera"
-  | "filter_alt"
-  | "image"
-  | "navigate_next"
-  | "tune"
-  | "timer"
-  | "picture_as_pdf"
-  | "circle"
-  | "palette"
-  | "add_a_photo"
-  | "photo_library"
-  | "navigate_before"
-  | "auto_stories"
-  | "add_photo_alternate"
-  | "brush"
-  | "imagesmode"
-  | "nature"
-  | "flash_on"
-  | "wb_sunny"
-  | "camera"
-  | "straighten"
-  | "looks_one"
-  | "landscape"
-  | "timelapse"
-  | "slideshow"
-  | "grid_on"
-  | "rotate_right"
-  | "crop_square"
-  | "adjust"
-  | "style"
-  | "crop_free"
-  | "aspect_ratio"
-  | "brightness_6"
-  | "photo"
-  | "nature_people"
-  | "filter_vintage"
-  | "image_search"
-  | "crop"
-  | "blur_on"
-  | "center_focus_strong"
-  | "contrast"
-  | "compare"
-  | "looks_two"
-  | "rotate_left"
-  | "colorize"
-  | "flare"
-  | "filter_none"
-  | "wb_incandescent"
-  | "filter_drama"
-  | "healing"
-  | "looks_3"
-  | "wb_twilight"
-  | "brightness_5"
-  | "invert_colors"
-  | "lens"
-  | "animation"
-  | "opacity"
-  | "incomplete_circle"
-  | "broken_image"
-  | "filter_center_focus"
-  | "add_to_photos"
-  | "brightness_4"
-  | "flip"
-  | "flash_off"
-  | "center_focus_weak"
-  | "auto_awesome_motion"
-  | "mic_external_on"
-  | "flip_camera_android"
-  | "lens_blur"
-  | "no_photography"
-  | "details"
-  | "grain"
-  | "image_not_supported"
-  | "web_stories"
-  | "panorama"
-  | "dehaze"
-  | "gif_box"
-  | "flaky"
-  | "loupe"
-  | "exposure_plus_1"
-  | "settings_brightness"
-  | "texture"
-  | "auto_awesome_mosaic"
-  | "looks_4"
-  | "filter_1"
-  | "timer_off"
-  | "flip_camera_ios"
-  | "panorama_fish_eye"
-  | "view_compact"
-  | "brightness_1"
-  | "filter"
-  | "control_point_duplicate"
-  | "photo_camera_front"
-  | "brightness_7"
-  | "photo_album"
-  | "transform"
-  | "linked_camera"
-  | "view_comfy"
-  | "crop_16_9"
-  | "looks"
-  | "hide_image"
-  | "looks_5"
-  | "exposure"
-  | "rotate_90_degrees_ccw"
-  | "filter_hdr"
-  | "gif"
-  | "brightness_3"
-  | "hdr_strong"
-  | "leak_add"
-  | "crop_7_5"
-  | "gradient"
-  | "hdr_auto"
-  | "crop_portrait"
-  | "vrpano"
-  | "camera_roll"
-  | "blur_circular"
-  | "motion_photos_auto"
-  | "rotate_90_degrees_cw"
-  | "photo_size_select_small"
-  | "brightness_2"
-  | "shutter_speed"
-  | "looks_6"
-  | "flash_auto"
-  | "camera_front"
-  | "crop_landscape"
-  | "filter_2"
-  | "filter_tilt_shift"
-  | "monochrome_photos"
-  | "deblur"
-  | "night_sight_auto"
-  | "crop_5_4"
-  | "hdr_weak"
-  | "filter_4"
-  | "motion_photos_paused"
-  | "filter_3"
-  | "crop_rotate"
-  | "crop_3_2"
-  | "tonality"
-  | "switch_camera"
-  | "photo_frame"
-  | "exposure_zero"
-  | "ev_shadow"
-  | "fluorescent"
-  | "macro_off"
-  | "photo_size_select_large"
-  | "filter_frames"
-  | "party_mode"
-  | "raw_on"
-  | "motion_blur"
-  | "exposure_plus_2"
-  | "photo_camera_back"
-  | "blur_linear"
-  | "exposure_neg_1"
-  | "wb_iridescent"
-  | "filter_b_and_w"
-  | "switch_video"
-  | "motion_photos_off"
-  | "panorama_horizontal"
-  | "filter_5"
-  | "blur_medium"
-  | "invert_colors_off"
-  | "face_retouching_off"
-  | "filter_7"
-  | "burst_mode"
-  | "panorama_photosphere"
-  | "hdr_on"
-  | "grid_off"
-  | "filter_9_plus"
-  | "filter_8"
-  | "blur_short"
-  | "timer_10"
-  | "filter_9"
-  | "dirty_lens"
-  | "wb_shade"
-  | "no_flash"
-  | "filter_6"
-  | "image_aspect_ratio"
-  | "trail_length"
-  | "exposure_neg_2"
-  | "vignette"
-  | "timer_3"
-  | "leak_remove"
-  | "60fps_select"
-  | "blur_off"
-  | "30fps_select"
-  | "perm_camera_mic"
-  | "mic_external_off"
-  | "trail_length_medium"
-  | "camera_rear"
-  | "panorama_vertical"
-  | "trail_length_short"
-  | "night_sight_auto_off"
-  | "autofps_select"
-  | "panorama_wide_angle"
-  | "mp"
-  | "hdr_off"
-  | "24mp"
-  | "hdr_on_select"
-  | "hdr_enhanced_select"
-  | "22mp"
-  | "10mp"
-  | "12mp"
-  | "18mp"
-  | "hdr_auto_select"
-  | "hdr_plus"
-  | "raw_off"
-  | "wb_auto"
-  | "9mp"
-  | "13mp"
-  | "20mp"
-  | "5mp"
-  | "7mp"
-  | "15mp"
-  | "hdr_off_select"
-  | "16mp"
-  | "hevc"
-  | "19mp"
-  | "14mp"
-  | "23mp"
-  | "2mp"
-  | "8mp"
-  | "3mp"
-  | "6mp"
-  | "11mp"
-  | "21mp"
-  | "17mp"
-  | "4mp"
-  | "gallery_thumbnail"
-  | "motion_photos_on"
-  | "masked_transitions"
-  | "photo_prints"
-  | "settings_photo_camera"
-  | "planner_banner_ad_pt"
-  | "settings_panorama"
-  | "unknown_2"
-  | "vr180_create2d"
-  | "settings_video_camera"
-  | "motion_mode"
-  | "settings_motion_mode"
-  | "settings_night_sight"
-  | "50mp"
-  | "background_dot_large"
-  | "background_grid_small"
-  | "settings_cinematic_blur"
-  | "settings_timelapse"
-  | "macro_auto"
-  | "settings_b_roll"
-  | "high_density"
-  | "contrast_rtl_off"
-  | "low_density"
-  | "settings_slow_motion"
-  | "shopping_cart"
-  | "payments"
-  | "shopping_bag"
-  | "monitoring"
-  | "credit_card"
-  | "receipt_long"
-  | "attach_money"
-  | "storefront"
-  | "sell"
-  | "trending_up"
-  | "database"
-  | "account_balance"
-  | "work"
-  | "paid"
-  | "account_balance_wallet"
-  | "analytics"
-  | "query_stats"
-  | "store"
-  | "savings"
-  | "monetization_on"
-  | "calculate"
-  | "qr_code_scanner"
-  | "bar_chart"
-  | "add_shopping_cart"
-  | "account_tree"
-  | "receipt"
-  | "redeem"
-  | "currency_exchange"
-  | "trending_flat"
-  | "shopping_basket"
-  | "qr_code_2"
-  | "domain"
-  | "precision_manufacturing"
-  | "qr_code"
-  | "leaderboard"
-  | "corporate_fare"
-  | "timeline"
-  | "insert_chart"
-  | "currency_rupee"
-  | "show_chart"
-  | "wallet"
-  | "euro"
-  | "work_history"
-  | "meeting_room"
-  | "credit_score"
-  | "barcode_scanner"
-  | "pie_chart"
-  | "loyalty"
-  | "copyright"
-  | "barcode"
-  | "conversion_path"
-  | "track_changes"
-  | "trending_down"
-  | "price_check"
-  | "euro_symbol"
-  | "schema"
-  | "add_business"
-  | "add_card"
-  | "card_membership"
-  | "currency_bitcoin"
-  | "price_change"
-  | "production_quantity_limits"
-  | "donut_large"
-  | "tenancy"
-  | "data_exploration"
-  | "bubble_chart"
-  | "donut_small"
-  | "contactless"
-  | "money"
-  | "stacked_line_chart"
-  | "stacked_bar_chart"
-  | "toll"
-  | "money_off"
-  | "cases"
-  | "currency_yen"
-  | "currency_pound"
-  | "area_chart"
-  | "atr"
-  | "remove_shopping_cart"
-  | "room_preferences"
-  | "add_chart"
-  | "shop"
-  | "domain_add"
-  | "card_travel"
-  | "grouped_bar_chart"
-  | "legend_toggle"
-  | "scatter_plot"
-  | "credit_card_off"
-  | "mediation"
-  | "ssid_chart"
-  | "candlestick_chart"
-  | "waterfall_chart"
-  | "currency_ruble"
-  | "full_stacked_bar_chart"
-  | "domain_disabled"
-  | "strikethrough_s"
-  | "shop_two"
-  | "next_week"
-  | "atm"
-  | "multiline_chart"
-  | "currency_lira"
-  | "currency_yuan"
-  | "no_meeting_room"
-  | "currency_franc"
-  | "troubleshoot"
-  | "finance"
-  | "data_table"
-  | "bid_landscape"
-  | "contactless_off"
-  | "bar_chart_4_bars"
-  | "universal_currency_alt"
-  | "chart_data"
-  | "podium"
-  | "order_approve"
-  | "family_history"
-  | "conveyor_belt"
-  | "send_money"
-  | "flowsheet"
-  | "forklift"
-  | "qr_code_2_add"
-  | "front_loader"
-  | "inactive_order"
-  | "pallet"
-  | "bid_landscape_disabled"
-  | "barcode_reader"
-  | "box"
-  | "trolley"
-  | "box_add"
-  | "conversion_path_off"
-  | "order_play"
-  | "work_alert"
-  | "box_edit"
-  | "work_update"
-  | "pin_drop"
-  | "location_on"
-  | "map"
-  | "home_pin"
-  | "explore"
-  | "restaurant"
-  | "flag"
-  | "my_location"
-  | "local_fire_department"
-  | "person_pin_circle"
-  | "local_mall"
-  | "near_me"
-  | "where_to_vote"
-  | "business_center"
-  | "east"
-  | "restaurant_menu"
-  | "handyman"
-  | "factory"
-  | "local_library"
-  | "medical_services"
-  | "home_work"
-  | "layers"
-  | "local_activity"
-  | "share_location"
-  | "emergency"
-  | "north_east"
-  | "add_location"
-  | "fastfood"
-  | "navigation"
-  | "warehouse"
-  | "person_pin"
-  | "local_parking"
-  | "home_repair_service"
-  | "local_hospital"
-  | "south"
-  | "local_police"
-  | "zoom_out_map"
-  | "location_searching"
-  | "local_florist"
-  | "location_away"
-  | "crisis_alert"
-  | "west"
-  | "local_gas_station"
-  | "park"
-  | "maps_ugc"
-  | "cleaning_services"
-  | "local_atm"
-  | "package"
-  | "360"
-  | "electrical_services"
-  | "north"
-  | "flag_circle"
-  | "add_location_alt"
-  | "directions"
-  | "fmd_bad"
-  | "theater_comedy"
-  | "local_drink"
-  | "location_home"
-  | "local_pizza"
-  | "local_post_office"
-  | "not_listed_location"
-  | "wine_bar"
-  | "beenhere"
-  | "local_convenience_store"
-  | "signpost"
-  | "alt_route"
-  | "tour"
-  | "trip_origin"
-  | "church"
-  | "traffic"
-  | "local_laundry_service"
-  | "safety_check"
-  | "ev_station"
-  | "takeout_dining"
-  | "moving"
-  | "zoom_in_map"
-  | "soup_kitchen"
-  | "pest_control"
-  | "stadium"
-  | "transfer_within_a_station"
-  | "location_off"
-  | "connecting_airports"
-  | "wrong_location"
-  | "multiple_stop"
-  | "edit_location"
-  | "plumbing"
-  | "mode_of_travel"
-  | "minor_crash"
-  | "south_east"
-  | "add_road"
-  | "local_pharmacy"
-  | "fire_truck"
-  | "castle"
-  | "dry_cleaning"
-  | "set_meal"
-  | "baby_changing_station"
-  | "edit_location_alt"
-  | "layers_clear"
-  | "mosque"
-  | "north_west"
-  | "local_car_wash"
-  | "edit_attributes"
-  | "run_circle"
-  | "transit_enterexit"
-  | "sos"
-  | "satellite"
-  | "edit_road"
-  | "south_west"
-  | "streetview"
-  | "add_home"
-  | "kebab_dining"
-  | "airline_stops"
-  | "local_see"
-  | "fire_hydrant"
-  | "assist_walker"
-  | "add_home_work"
-  | "flight_class"
-  | "remove_road"
-  | "no_meals"
-  | "synagogue"
-  | "fort"
-  | "temple_buddhist"
-  | "location_disabled"
-  | "compass_calibration"
-  | "temple_hindu"
-  | "explore_off"
-  | "pest_control_rodent"
-  | "near_me_disabled"
-  | "directions_alt"
-  | "pergola"
-  | "directions_off"
-  | "directions_alt_off"
-  | "pet_supplies"
-  | "moved_location"
-  | "move_location"
-  | "moving_ministry"
-  | "move"
-  | "safety_check_off"
-  | "description"
-  | "content_copy"
-  | "dashboard"
-  | "edit_note"
-  | "menu_book"
-  | "grid_view"
-  | "list"
-  | "folder"
-  | "list_alt"
-  | "inventory"
-  | "folder_open"
-  | "article"
-  | "fact_check"
-  | "attach_file"
-  | "format_list_bulleted"
-  | "assignment"
-  | "task"
-  | "checklist"
-  | "cloud_upload"
-  | "draft"
-  | "summarize"
-  | "feed"
-  | "draw"
-  | "cloud"
-  | "newspaper"
-  | "view_list"
-  | "file_copy"
-  | "note_add"
-  | "border_color"
-  | "book"
-  | "history_edu"
-  | "design_services"
-  | "pending_actions"
-  | "format_quote"
-  | "post_add"
-  | "request_quote"
-  | "cloud_download"
-  | "drag_handle"
-  | "contact_page"
-  | "table"
-  | "space_dashboard"
-  | "archive"
-  | "content_paste"
-  | "percent"
-  | "attachment"
-  | "assignment_ind"
-  | "format_list_numbered"
-  | "assignment_turned_in"
-  | "tag"
-  | "table_chart"
-  | "sticky_note_2"
-  | "text_fields"
-  | "dashboard_customize"
-  | "reorder"
-  | "integration_instructions"
-  | "format_bold"
-  | "find_in_page"
-  | "text_snippet"
-  | "note"
-  | "document_scanner"
-  | "checklist_rtl"
-  | "note_alt"
-  | "edit_document"
-  | "cloud_sync"
-  | "table_rows"
-  | "perm_media"
-  | "cloud_done"
-  | "title"
-  | "table_view"
-  | "content_cut"
-  | "notes"
-  | "cut"
-  | "data_object"
-  | "subject"
-  | "functions"
-  | "format_italic"
-  | "content_paste_search"
-  | "format_color_fill"
-  | "folder_shared"
-  | "plagiarism"
-  | "horizontal_rule"
-  | "file_present"
-  | "folder_copy"
-  | "format_align_left"
-  | "ballot"
-  | "team_dashboard"
-  | "format_paint"
-  | "cloud_off"
-  | "add_link"
-  | "view_column"
-  | "read_more"
-  | "difference"
-  | "view_agenda"
-  | "format_size"
-  | "format_underlined"
-  | "vertical_align_top"
-  | "toc"
-  | "height"
-  | "vertical_align_bottom"
-  | "copy_all"
-  | "view_week"
-  | "drive_folder_upload"
-  | "assignment_late"
-  | "format_color_text"
-  | "view_module"
-  | "drive_file_move"
-  | "low_priority"
-  | "assignment_return"
-  | "format_align_center"
-  | "segment"
-  | "folder_special"
-  | "calendar_view_month"
-  | "folder_zip"
-  | "polyline"
-  | "square"
-  | "breaking_news_alt_1"
-  | "format_align_right"
-  | "grading"
-  | "view_headline"
-  | "linear_scale"
-  | "edit_off"
-  | "view_quilt"
-  | "view_carousel"
-  | "text_increase"
-  | "request_page"
-  | "view_sidebar"
-  | "pages"
-  | "text_format"
-  | "format_align_justify"
-  | "calendar_view_week"
-  | "hexagon"
-  | "numbers"
-  | "docs_add_on"
-  | "folder_delete"
-  | "format_shapes"
-  | "forms_add_on"
-  | "imagesearch_roller"
-  | "calendar_view_day"
-  | "video_file"
-  | "font_download"
-  | "format_list_numbered_rtl"
-  | "join_inner"
-  | "add_to_drive"
-  | "content_paste_go"
-  | "restore_page"
-  | "rectangle"
-  | "vertical_split"
-  | "rule_folder"
-  | "format_color_reset"
-  | "cloud_circle"
-  | "view_stream"
-  | "format_indent_increase"
-  | "spellcheck"
-  | "assignment_returned"
-  | "data_array"
-  | "align_horizontal_left"
-  | "text_decrease"
-  | "pivot_table_chart"
-  | "deselect"
-  | "vertical_align_center"
-  | "pentagon"
-  | "merge_type"
-  | "space_bar"
-  | "format_strikethrough"
-  | "view_day"
-  | "flip_to_front"
-  | "join_left"
-  | "short_text"
-  | "border_all"
-  | "shape_line"
-  | "format_line_spacing"
-  | "line_weight"
-  | "horizontal_split"
-  | "format_indent_decrease"
-  | "align_horizontal_center"
-  | "join_right"
-  | "snippet_folder"
-  | "subtitles_off"
-  | "align_vertical_bottom"
-  | "folder_off"
-  | "align_horizontal_right"
-  | "glyphs"
-  | "format_clear"
-  | "function"
-  | "insert_page_break"
-  | "vertical_distribute"
-  | "content_paste_off"
-  | "superscript"
-  | "horizontal_distribute"
-  | "line_axis"
-  | "line_style"
-  | "flip_to_back"
-  | "align_vertical_center"
-  | "align_vertical_top"
-  | "margin"
-  | "clarify"
-  | "wrap_text"
-  | "view_array"
-  | "subscript"
-  | "border_clear"
-  | "border_style"
-  | "amp_stories"
-  | "border_outer"
-  | "type_specimen"
-  | "text_rotate_vertical"
-  | "padding"
-  | "forms_apps_script"
-  | "border_vertical"
-  | "ink_pen"
-  | "text_rotation_none"
-  | "counter_1"
-  | "format_textdirection_l_to_r"
-  | "ink_eraser"
-  | "format_overline"
-  | "docs_apps_script"
-  | "border_horizontal"
-  | "font_download_off"
-  | "format_textdirection_r_to_l"
-  | "newsmode"
-  | "text_rotation_angleup"
-  | "border_bottom"
-  | "text_rotation_down"
-  | "border_inner"
-  | "border_top"
-  | "border_left"
-  | "text_rotation_angledown"
-  | "assignment_add"
-  | "finance_chip"
-  | "text_rotate_up"
-  | "news"
-  | "border_right"
-  | "format_h1"
-  | "ink_highlighter"
-  | "view_column_2"
-  | "join"
-  | "full_coverage"
-  | "overview"
-  | "format_underlined_squiggle"
-  | "colors"
-  | "slide_library"
-  | "format_h2"
-  | "format_paragraph"
-  | "format_image_left"
-  | "format_list_bulleted_add"
-  | "breaking_news"
-  | "counter_2"
-  | "lab_profile"
-  | "frame_inspect"
-  | "equal"
-  | "variables"
-  | "counter_3"
-  | "format_image_right"
-  | "format_h3"
-  | "ink_marker"
-  | "format_h5"
-  | "format_h6"
-  | "csv"
-  | "voting_chip"
-  | "process_chart"
-  | "remove_selection"
-  | "format_h4"
-  | "signature"
-  | "format_ink_highlighter"
-  | "location_chip"
-  | "export_notes"
-  | "stylus_laser_pointer"
-  | "sticky_note"
-  | "shapes"
-  | "unknown_document"
-  | "frame_source"
-  | "add_notes"
-  | "counter_4"
-  | "format_text_overflow"
-  | "cell_merge"
-  | "format_letter_spacing_standard"
-  | "grid_guides"
-  | "select"
-  | "table_rows_narrow"
-  | "diagnosis"
-  | "regular_expression"
-  | "reset_image"
-  | "table_chart_view"
-  | "text_select_move_forward_character"
-  | "business_chip"
-  | "custom_typography"
-  | "draw_abstract"
-  | "source_notes"
-  | "decimal_increase"
-  | "folder_managed"
-  | "list_alt_add"
-  | "text_ad"
-  | "width"
-  | "insert_text"
-  | "lasso_select"
-  | "scan_delete"
-  | "smb_share"
-  | "ungroup"
-  | "counter_5"
-  | "format_letter_spacing_2"
-  | "line_end_arrow_notch"
-  | "line_start"
-  | "tab_close"
-  | "thumbnail_bar"
-  | "contract"
-  | "counter_6"
-  | "format_letter_spacing"
-  | "line_end"
-  | "match_case"
-  | "stroke_full"
-  | "draw_collage"
-  | "flex_wrap"
-  | "format_letter_spacing_wider"
-  | "language_chinese_quick"
-  | "line_end_square"
-  | "other_admission"
-  | "post"
-  | "scan"
-  | "text_select_start"
-  | "folder_supervised"
-  | "format_letter_spacing_wide"
-  | "language_spanish"
-  | "line_end_arrow"
-  | "line_start_diamond"
-  | "match_word"
-  | "align_justify_space_around"
-  | "align_justify_space_between"
-  | "align_space_between"
-  | "contract_edit"
-  | "format_text_clip"
-  | "line_end_circle"
-  | "line_start_circle"
-  | "special_character"
-  | "tab_duplicate"
-  | "tab_move"
-  | "tab_new_right"
-  | "text_select_jump_to_beginning"
-  | "top_panel_close"
-  | "top_panel_open"
-  | "counter_0"
-  | "counter_7"
-  | "counter_8"
-  | "flex_direction"
-  | "frame_reload"
-  | "heap_snapshot_multiple"
-  | "heap_snapshot_thumbnail"
-  | "ink_eraser_off"
-  | "language_french"
-  | "language_gb_english"
-  | "language_international"
-  | "language_korean_latin"
-  | "line_end_diamond"
-  | "sheets_rtl"
-  | "text_select_move_forward_word"
-  | "text_select_move_up"
-  | "tsv"
-  | "align_justify_space_even"
-  | "attach_file_add"
-  | "counter_9"
-  | "fit_width"
-  | "heap_snapshot_large"
-  | "language_chinese_dayi"
-  | "line_curve"
-  | "line_start_square"
-  | "person_book"
-  | "stroke_partial"
-  | "tab_group"
-  | "text_select_move_down"
-  | "align_justify_center"
-  | "align_justify_flex_end"
-  | "align_justify_flex_start"
-  | "align_space_around"
-  | "align_space_even"
-  | "contract_delete"
-  | "fit_page"
-  | "format_text_wrap"
-  | "highlighter_size_4"
-  | "language_chinese_array"
-  | "language_chinese_cangjie"
-  | "language_chinese_pinyin"
-  | "language_chinese_wubi"
-  | "language_pinyin"
-  | "language_us"
-  | "language_us_colemak"
-  | "language_us_dvorak"
-  | "letter_switch"
-  | "line_start_arrow"
-  | "line_start_arrow_notch"
-  | "pen_size_2"
-  | "pen_size_3"
-  | "pen_size_4"
-  | "pen_size_5"
-  | "tab_close_right"
-  | "tab_recent"
-  | "text_select_end"
-  | "text_select_jump_to_end"
-  | "align_center"
-  | "align_end"
-  | "align_flex_center"
-  | "align_flex_end"
-  | "align_flex_start"
-  | "align_items_stretch"
-  | "align_justify_stretch"
-  | "align_self_stretch"
-  | "align_start"
-  | "align_stretch"
-  | "decimal_decrease"
-  | "flex_no_wrap"
-  | "highlighter_size_1"
-  | "highlighter_size_2"
-  | "highlighter_size_3"
-  | "highlighter_size_5"
-  | "pen_size_1"
-  | "text_select_move_back_character"
-  | "text_select_move_back_word"
-  | "play_arrow"
-  | "play_circle"
-  | "mic"
-  | "videocam"
-  | "volume_up"
-  | "pause"
-  | "music_note"
-  | "library_books"
-  | "movie"
-  | "skip_next"
-  | "speed"
-  | "replay"
-  | "volume_off"
-  | "pause_circle"
-  | "view_in_ar"
-  | "fiber_manual_record"
-  | "skip_previous"
-  | "stop_circle"
-  | "stop"
-  | "equalizer"
-  | "subscriptions"
-  | "video_library"
-  | "fast_forward"
-  | "playlist_add"
-  | "video_call"
-  | "repeat"
-  | "volume_mute"
-  | "shuffle"
-  | "mic_off"
-  | "hearing"
-  | "library_music"
-  | "playlist_add_check"
-  | "podcasts"
-  | "fast_rewind"
-  | "sound_detection_dog_barking"
-  | "queue_music"
-  | "video_camera_front"
-  | "subtitles"
-  | "volume_down"
-  | "play_pause"
-  | "album"
-  | "discover_tune"
-  | "radio"
-  | "av_timer"
-  | "library_add_check"
-  | "videocam_off"
-  | "closed_caption"
-  | "stream"
-  | "forward_10"
-  | "not_started"
-  | "playlist_play"
-  | "replay_10"
-  | "fiber_new"
-  | "branding_watermark"
-  | "text_to_speech"
-  | "recent_actors"
-  | "playlist_remove"
-  | "interpreter_mode"
-  | "slow_motion_video"
-  | "frame_person"
-  | "playlist_add_check_circle"
-  | "settings_voice"
-  | "video_settings"
-  | "featured_play_list"
-  | "sound_detection_loud_sound"
-  | "audio_file"
-  | "lyrics"
-  | "play_lesson"
-  | "hd"
-  | "repeat_one"
-  | "call_to_action"
-  | "high_quality"
-  | "add_to_queue"
-  | "music_off"
-  | "video_camera_back"
-  | "spatial_audio_off"
-  | "shuffle_on"
-  | "playlist_add_circle"
-  | "volume_down_alt"
-  | "hearing_disabled"
-  | "featured_video"
-  | "replay_5"
-  | "repeat_on"
-  | "queue_play_next"
-  | "speech_to_text"
-  | "spatial_audio"
-  | "art_track"
-  | "explicit"
-  | "airplay"
-  | "forward_5"
-  | "forward_30"
-  | "4k"
-  | "music_video"
-  | "replay_30"
-  | "control_camera"
-  | "spatial_tracking"
-  | "closed_caption_disabled"
-  | "digital_out_of_home"
-  | "video_label"
-  | "fiber_smart_record"
-  | "play_disabled"
-  | "repeat_one_on"
-  | "broadcast_on_personal"
-  | "sd"
-  | "missed_video_call"
-  | "surround_sound"
-  | "fiber_pin"
-  | "10k"
-  | "sound_detection_glass_break"
-  | "60fps"
-  | "remove_from_queue"
-  | "brand_awareness"
-  | "broadcast_on_home"
-  | "fiber_dvr"
-  | "30fps"
-  | "4k_plus"
-  | "video_stable"
-  | "8k"
-  | "1k"
-  | "privacy"
-  | "8k_plus"
-  | "2k"
-  | "instant_mix"
-  | "7k"
-  | "1k_plus"
-  | "9k"
-  | "9k_plus"
-  | "5k"
-  | "6k"
-  | "2k_plus"
-  | "5k_plus"
-  | "6k_plus"
-  | "3k"
-  | "7k_plus"
-  | "3k_plus"
-  | "ar_on_you"
-  | "no_sound"
-  | "cinematic_blur"
-  | "video_search"
-  | "hangout_video"
-  | "genres"
-  | "media_link"
-  | "mic_double"
-  | "autoplay"
-  | "video_camera_front_off"
-  | "movie_edit"
-  | "autopause"
-  | "forward_media"
-  | "movie_info"
-  | "resume"
-  | "hangout_video_off"
-  | "select_to_speak"
-  | "autostop"
-  | "2d"
-  | "forward_circle"
-  | "view_in_ar_off"
-  | "frame_person_off"
-  | "sound_sampler"
-  | "local_shipping"
-  | "directions_car"
-  | "flight"
-  | "directions_run"
-  | "directions_walk"
-  | "flight_takeoff"
-  | "directions_bus"
-  | "directions_bike"
-  | "train"
-  | "airport_shuttle"
-  | "pedal_bike"
-  | "directions_boat"
-  | "two_wheeler"
-  | "agriculture"
-  | "local_taxi"
-  | "sailing"
-  | "electric_car"
-  | "flight_land"
-  | "hail"
-  | "no_crash"
-  | "commute"
-  | "motorcycle"
-  | "car_crash"
-  | "tram"
-  | "departure_board"
-  | "subway"
-  | "electric_moped"
-  | "turn_right"
-  | "electric_scooter"
-  | "fork_right"
-  | "directions_subway"
-  | "tire_repair"
-  | "electric_bike"
-  | "rv_hookup"
-  | "bus_alert"
-  | "turn_left"
-  | "transportation"
-  | "airlines"
-  | "taxi_alert"
-  | "u_turn_left"
-  | "directions_railway"
-  | "electric_rickshaw"
-  | "turn_slight_right"
-  | "u_turn_right"
-  | "fork_left"
-  | "railway_alert"
-  | "bike_scooter"
-  | "turn_sharp_right"
-  | "turn_slight_left"
-  | "no_transfer"
-  | "snowmobile"
-  | "turn_sharp_left"
-  | "flightsmode"
-  | "swap_driving_apps_wheel"
-  | "ambulance"
-  | "school"
-  | "campaign"
-  | "construction"
-  | "engineering"
-  | "volunteer_activism"
-  | "science"
-  | "sports_esports"
-  | "confirmation_number"
-  | "real_estate_agent"
-  | "cake"
-  | "self_improvement"
-  | "sports_soccer"
-  | "air"
-  | "biotech"
-  | "water"
-  | "hiking"
-  | "architecture"
-  | "sports_score"
-  | "personal_injury"
-  | "sports_basketball"
-  | "waves"
-  | "theaters"
-  | "sports_tennis"
-  | "switch_account"
-  | "nights_stay"
-  | "sports_gymnastics"
-  | "how_to_vote"
-  | "backpack"
-  | "sports_motorsports"
-  | "sports_kabaddi"
-  | "surfing"
-  | "piano"
-  | "sports"
-  | "toys"
-  | "sports_volleyball"
-  | "sports_baseball"
-  | "sports_martial_arts"
-  | "camping"
-  | "downhill_skiing"
-  | "swords"
-  | "kayaking"
-  | "scoreboard"
-  | "phishing"
-  | "sports_handball"
-  | "sports_football"
-  | "skateboarding"
-  | "sports_golf"
-  | "sports_cricket"
-  | "toys_fan"
-  | "nordic_walking"
-  | "kitesurfing"
-  | "roller_skating"
-  | "rowing"
-  | "scuba_diving"
-  | "trophy"
-  | "storm"
-  | "sports_mma"
-  | "paragliding"
-  | "snowboarding"
-  | "sports_hockey"
-  | "ice_skating"
-  | "snowshoeing"
-  | "sports_rugby"
-  | "sledding"
-  | "piano_off"
-  | "no_backpack"
-  | "family_link"
-  | "rewarded_ads"
-  | "ifl"
-  | "cake_add"
-  | "mindfulness"
-  | "health_metrics"
-  | "steps"
-  | "sprint"
-  | "exercise"
-  | "stress_management"
-  | "menstrual_health"
-  | "readiness_score"
-  | "relax"
-  | "ecg_heart"
-  | "laps"
-  | "azm"
-  | "pace"
-  | "distance"
-  | "person_play"
-  | "floor"
-  | "avg_time"
-  | "person_celebrate"
-  | "avg_pace"
-  | "fertile"
-  | "onsen"
-  | "podiatry"
-  | "spo2"
-  | "water_full"
-  | "bath_outdoor"
-  | "play_shapes"
-  | "eda"
-  | "bia"
-  | "water_medium"
-  | "interactive_space"
-  | "elevation"
-  | "hr_resting"
-  | "glass_cup"
-  | "water_loss"
-  | "monitor_weight_loss"
-  | "sauna"
-  | "sleep_score"
-  | "bath_private"
-  | "monitor_weight_gain"
-  | "bath_public_large"
-  | "check_in_out"
-  | "physical_therapy"
-  | "phone_iphone"
-  | "save"
-  | "smartphone"
-  | "print"
-  | "keyboard_arrow_down"
-  | "computer"
-  | "devices"
-  | "desktop_windows"
-  | "smart_display"
-  | "dns"
-  | "keyboard_backspace"
-  | "headphones"
-  | "smart_toy"
-  | "phone_android"
-  | "keyboard_arrow_right"
-  | "memory"
-  | "keyboard"
-  | "live_tv"
-  | "laptop_mac"
-  | "headset_mic"
-  | "keyboard_arrow_up"
-  | "tv"
-  | "device_thermostat"
-  | "mouse"
-  | "balance"
-  | "route"
-  | "point_of_sale"
-  | "keyboard_arrow_left"
-  | "laptop_chromebook"
-  | "keyboard_return"
-  | "watch"
-  | "power"
-  | "laptop_windows"
-  | "router"
-  | "developer_board"
-  | "display_settings"
-  | "scale"
-  | "book_online"
-  | "developer_mode"
-  | "fax"
-  | "cast"
-  | "cast_for_education"
-  | "videogame_asset"
-  | "device_hub"
-  | "straight"
-  | "screen_search_desktop"
-  | "desktop_mac"
-  | "mobile_friendly"
-  | "settings_ethernet"
-  | "settings_input_antenna"
-  | "monitor"
-  | "important_devices"
-  | "tablet_mac"
-  | "devices_other"
-  | "send_to_mobile"
-  | "system_update"
-  | "settings_remote"
-  | "monitor_weight"
-  | "screen_rotation"
-  | "screen_share"
-  | "keyboard_alt"
-  | "settings_input_component"
-  | "speaker"
-  | "merge"
-  | "sim_card"
-  | "keyboard_tab"
-  | "vibration"
-  | "power_off"
-  | "tablet"
-  | "connected_tv"
-  | "screenshot_monitor"
-  | "remember_me"
-  | "browser_updated"
-  | "security_update_good"
-  | "sd_card"
-  | "cast_connected"
-  | "device_unknown"
-  | "tablet_android"
-  | "charging_station"
-  | "phonelink_setup"
-  | "punch_clock"
-  | "scanner"
-  | "screenshot"
-  | "settings_input_hdmi"
-  | "stay_current_portrait"
-  | "tap_and_play"
-  | "keyboard_hide"
-  | "print_disabled"
-  | "security_update_warning"
-  | "disc_full"
-  | "app_blocking"
-  | "keyboard_capslock"
-  | "speaker_group"
-  | "mobile_screen_share"
-  | "aod"
-  | "sd_card_alert"
-  | "tty"
-  | "add_to_home_screen"
-  | "lift_to_talk"
-  | "earbuds"
-  | "perm_device_information"
-  | "stop_screen_share"
-  | "mobile_off"
-  | "headset_off"
-  | "desktop_access_disabled"
-  | "reset_tv"
-  | "offline_share"
-  | "adf_scanner"
-  | "headphones_battery"
-  | "screen_lock_portrait"
-  | "roundabout_right"
-  | "dock"
-  | "settop_component"
-  | "settings_input_svideo"
-  | "watch_off"
-  | "smart_screen"
-  | "stay_current_landscape"
-  | "chromecast_device"
-  | "settings_cell"
-  | "earbuds_battery"
-  | "home_max"
-  | "power_input"
-  | "no_sim"
-  | "screen_lock_landscape"
-  | "ramp_right"
-  | "roundabout_left"
-  | "stay_primary_landscape"
-  | "stay_primary_portrait"
-  | "developer_board_off"
-  | "tv_off"
-  | "home_mini"
-  | "phonelink_off"
-  | "ramp_left"
-  | "screen_lock_rotation"
-  | "videogame_asset_off"
-  | "aod_tablet"
-  | "open_in_phone"
-  | "gamepad"
-  | "robot"
-  | "rear_camera"
-  | "jamboard_kiosk"
-  | "mimo"
-  | "app_promo"
-  | "devices_wearables"
-  | "tv_options_edit_channels"
-  | "developer_mode_tv"
-  | "mimo_disconnect"
-  | "ambient_screen"
-  | "touchpad_mouse"
-  | "camera_video"
-  | "tv_signin"
-  | "aod_watch"
-  | "joystick"
-  | "ecg"
-  | "memory_alt"
-  | "robot_2"
-  | "tv_guide"
-  | "devices_off"
-  | "night_sight_max"
-  | "hard_drive"
-  | "open_jam"
-  | "screenshot_tablet"
-  | "stream_apps"
-  | "cast_pause"
-  | "cast_warning"
-  | "keyboard_tab_rtl"
-  | "pacemaker"
-  | "deskphone"
-  | "watch_wake"
-  | "hard_drive_2"
-  | "lda"
-  | "print_lock"
-  | "tv_remote"
-  | "watch_button_press"
-  | "audio_video_receiver"
-  | "print_add"
-  | "print_connect"
-  | "print_error"
-  | "ventilator"
-  | "dark_mode"
-  | "light_mode"
-  | "wifi"
-  | "signal_cellular_alt"
-  | "password"
-  | "widgets"
-  | "pin"
-  | "storage"
-  | "rss_feed"
-  | "android"
-  | "wifi_off"
-  | "bluetooth"
-  | "battery_charging_full"
-  | "dvr"
-  | "thermostat"
-  | "graphic_eq"
-  | "nightlight"
-  | "battery_5_bar"
-  | "signal_wifi_4_bar"
-  | "gpp_maybe"
-  | "cable"
-  | "gpp_bad"
-  | "data_usage"
-  | "battery_4_bar"
-  | "signal_cellular_4_bar"
-  | "radar"
-  | "airplanemode_active"
-  | "battery_0_bar"
-  | "cameraswitch"
-  | "wallpaper"
-  | "signal_disconnected"
-  | "flashlight_on"
-  | "network_check"
-  | "battery_6_bar"
-  | "charger"
-  | "wifi_tethering"
-  | "sim_card_download"
-  | "usb"
-  | "quick_phrases"
-  | "splitscreen"
-  | "battery_3_bar"
-  | "battery_1_bar"
-  | "adb"
-  | "network_wifi_3_bar"
-  | "battery_low"
-  | "battery_alert"
-  | "bluetooth_searching"
-  | "network_wifi"
-  | "bluetooth_connected"
-  | "5g"
-  | "wifi_find"
-  | "battery_2_bar"
-  | "brightness_high"
-  | "network_cell"
-  | "pattern"
-  | "nfc"
-  | "data_saver_on"
-  | "bluetooth_disabled"
-  | "signal_wifi_statusbar_not_connected"
-  | "signal_wifi_bad"
-  | "signal_cellular_3_bar"
-  | "network_wifi_2_bar"
-  | "noise_control_off"
-  | "network_wifi_1_bar"
-  | "brightness_medium"
-  | "signal_wifi_off"
-  | "battery_very_low"
-  | "mode_standby"
-  | "brightness_low"
-  | "mobiledata_off"
-  | "signal_wifi_0_bar"
-  | "battery_charging_20"
-  | "battery_charging_80"
-  | "grid_4x4"
-  | "battery_saver"
-  | "battery_charging_90"
-  | "flashlight_off"
-  | "signal_wifi_statusbar_null"
-  | "battery_charging_50"
-  | "settings_system_daydream"
-  | "battery_unknown"
-  | "signal_cellular_2_bar"
-  | "screen_rotation_alt"
-  | "wifi_calling_3"
-  | "signal_cellular_1_bar"
-  | "badge_critical_battery"
-  | "4g_mobiledata"
-  | "wifi_lock"
-  | "noise_aware"
-  | "do_not_disturb_on_total_silence"
-  | "battery_charging_60"
-  | "signal_cellular_connected_no_internet_0_bar"
-  | "nearby_error"
-  | "signal_cellular_0_bar"
-  | "battery_charging_30"
-  | "network_ping"
-  | "signal_cellular_connected_no_internet_4_bar"
-  | "wifi_tethering_error"
-  | "brightness_auto"
-  | "wifi_calling_1"
-  | "edgesensor_high"
-  | "wifi_2_bar"
-  | "airplanemode_inactive"
-  | "signal_cellular_nodata"
-  | "1x_mobiledata"
-  | "grid_3x3"
-  | "lte_mobiledata"
-  | "perm_data_setting"
-  | "signal_cellular_alt_2_bar"
-  | "bluetooth_drive"
-  | "devices_fold"
-  | "perm_scan_wifi"
-  | "network_locked"
-  | "media_bluetooth_on"
-  | "wifi_calling_2"
-  | "4g_plus_mobiledata"
-  | "signal_cellular_off"
-  | "timer_10_select"
-  | "wifi_tethering_off"
-  | "signal_cellular_alt_1_bar"
-  | "edgesensor_low"
-  | "3g_mobiledata"
-  | "usb_off"
-  | "wifi_1_bar"
-  | "apk_install"
-  | "signal_cellular_null"
-  | "lte_plus_mobiledata"
-  | "grid_goldenratio"
-  | "g_mobiledata"
-  | "portable_wifi_off"
-  | "noise_control_on"
-  | "media_bluetooth_off"
-  | "timer_3_select"
-  | "e_mobiledata"
-  | "apk_document"
-  | "nearby_off"
-  | "h_mobiledata"
-  | "r_mobiledata"
-  | "h_plus_mobiledata"
-  | "dual_screen"
-  | "nearby"
-  | "dock_to_left"
-  | "stylus"
-  | "stylus_note"
-  | "screenshot_region"
-  | "dock_to_right"
-  | "overview_key"
-  | "keyboard_keys"
-  | "battery_status_good"
-  | "brightness_alert"
-  | "brightness_empty"
-  | "splitscreen_left"
-  | "splitscreen_right"
-  | "keyboard_off"
-  | "screen_record"
-  | "screenshot_keyboard"
-  | "dock_to_bottom"
-  | "keyboard_external_input"
-  | "magnify_fullscreen"
-  | "wallpaper_slideshow"
-  | "1x_mobiledata_badge"
-  | "battery_change"
-  | "display_external_input"
-  | "magnify_docked"
-  | "screenshot_frame"
-  | "backlight_low"
-  | "battery_plus"
-  | "keyboard_full"
-  | "keyboard_onscreen"
-  | "wifi_notification"
-  | "4g_mobiledata_badge"
-  | "5g_mobiledata_badge"
-  | "keyboard_capslock_badge"
-  | "keyboard_previous_language"
-  | "lte_mobiledata_badge"
-  | "lte_plus_mobiledata_badge"
-  | "screen_rotation_up"
-  | "wifi_home"
-  | "3g_mobiledata_badge"
-  | "backlight_high"
-  | "battery_error"
-  | "battery_share"
-  | "e_mobiledata_badge"
-  | "ev_mobiledata_badge"
-  | "g_mobiledata_badge"
-  | "grid_3x3_off"
-  | "h_mobiledata_badge"
-  | "h_plus_mobiledata_badge"
-  | "signal_cellular_pause"
-  | "splitscreen_bottom"
-  | "splitscreen_top"
-  | "badge"
-  | "verified_user"
-  | "admin_panel_settings"
-  | "report"
-  | "security"
-  | "vpn_key"
-  | "shield"
-  | "policy"
-  | "exclamation"
-  | "privacy_tip"
-  | "assured_workload"
-  | "vpn_lock"
-  | "disabled_visible"
-  | "e911_emergency"
-  | "enhanced_encryption"
-  | "private_connectivity"
-  | "vpn_key_off"
-  | "add_moderator"
-  | "no_encryption"
-  | "sync_lock"
-  | "wifi_password"
-  | "key_visualizer"
-  | "remove_moderator"
-  | "encrypted"
-  | "report_off"
-  | "shield_lock"
-  | "shield_person"
-  | "vpn_key_alert"
-  | "shield_locked"
-  | "apartment"
-  | "location_city"
-  | "fitness_center"
-  | "lunch_dining"
-  | "spa"
-  | "cottage"
-  | "local_cafe"
-  | "hotel"
-  | "family_restroom"
-  | "beach_access"
-  | "local_bar"
-  | "pool"
-  | "other_houses"
-  | "luggage"
-  | "liquor"
-  | "airplane_ticket"
-  | "casino"
-  | "sports_bar"
-  | "bakery_dining"
-  | "ramen_dining"
-  | "nightlife"
-  | "local_dining"
-  | "holiday_village"
-  | "icecream"
-  | "escalator_warning"
-  | "dinner_dining"
-  | "museum"
-  | "food_bank"
-  | "night_shelter"
-  | "festival"
-  | "attractions"
-  | "golf_course"
-  | "stairs"
-  | "villa"
-  | "smoke_free"
-  | "smoking_rooms"
-  | "car_rental"
-  | "airline_seat_recline_normal"
-  | "elevator"
-  | "gite"
-  | "child_friendly"
-  | "airline_seat_recline_extra"
-  | "breakfast_dining"
-  | "carpenter"
-  | "car_repair"
-  | "cabin"
-  | "brunch_dining"
-  | "no_food"
-  | "do_not_touch"
-  | "houseboat"
-  | "rice_bowl"
-  | "tapas"
-  | "wheelchair_pickup"
-  | "bento"
-  | "no_drinks"
-  | "do_not_step"
-  | "bungalow"
-  | "airline_seat_flat"
-  | "airline_seat_individual_suite"
-  | "escalator"
-  | "chalet"
-  | "no_luggage"
-  | "airline_seat_legroom_extra"
-  | "airline_seat_flat_angled"
-  | "airline_seat_legroom_normal"
-  | "airline_seat_legroom_reduced"
-  | "no_stroller"
-  | "travel"
-  | "your_trips"
-  | "house"
-  | "bed"
-  | "ac_unit"
-  | "chair"
-  | "coffee"
-  | "electric_bolt"
-  | "child_care"
-  | "sensors"
-  | "back_hand"
-  | "checkroom"
-  | "emergency_home"
-  | "grass"
-  | "shower"
-  | "mode_fan"
-  | "mop"
-  | "kitchen"
-  | "room_service"
-  | "thermometer"
-  | "styler"
-  | "yard"
-  | "bathtub"
-  | "king_bed"
-  | "roofing"
-  | "energy_savings_leaf"
-  | "window"
-  | "valve"
-  | "cooking"
-  | "garage_home"
-  | "door_front"
-  | "mode_heat"
-  | "light"
-  | "foundation"
-  | "outdoor_grill"
-  | "garage"
-  | "dining"
-  | "table_restaurant"
-  | "sensor_occupied"
-  | "deck"
-  | "weekend"
-  | "coffee_maker"
-  | "humidity_high"
-  | "flatware"
-  | "highlight"
-  | "fireplace"
-  | "humidity_low"
-  | "mode_night"
-  | "electric_meter"
-  | "tv_gen"
-  | "humidity_mid"
-  | "bedroom_parent"
-  | "chair_alt"
-  | "blender"
-  | "scene"
-  | "microwave"
-  | "oven_gen"
-  | "single_bed"
-  | "bedroom_baby"
-  | "heat_pump"
-  | "bathroom"
-  | "in_home_mode"
-  | "hot_tub"
-  | "hardware"
-  | "mode_off_on"
-  | "sprinkler"
-  | "table_bar"
-  | "gas_meter"
-  | "crib"
-  | "soap"
-  | "countertops"
-  | "living"
-  | "mode_cool"
-  | "home_iot_device"
-  | "propane_tank"
-  | "fire_extinguisher"
-  | "outlet"
-  | "remote_gen"
-  | "matter"
-  | "gate"
-  | "sensor_door"
-  | "event_seat"
-  | "airware"
-  | "faucet"
-  | "dishwasher_gen"
-  | "energy_program_saving"
-  | "air_freshener"
-  | "balcony"
-  | "wash"
-  | "camera_indoor"
-  | "water_damage"
-  | "bedroom_child"
-  | "house_siding"
-  | "switch"
-  | "microwave_gen"
-  | "detector_smoke"
-  | "door_sliding"
-  | "iron"
-  | "desk"
-  | "energy_program_time_used"
-  | "umbrella"
-  | "water_heater"
-  | "dresser"
-  | "fence"
-  | "door_back"
-  | "doorbell"
-  | "mode_fan_off"
-  | "hvac"
-  | "kettle"
-  | "camera_outdoor"
-  | "emergency_heat"
-  | "air_purifier_gen"
-  | "emergency_share"
-  | "stroller"
-  | "curtains"
-  | "multicooker"
-  | "shield_moon"
-  | "sensors_off"
-  | "mode_heat_cool"
-  | "thermostat_auto"
-  | "emergency_recording"
-  | "smart_outlet"
-  | "blinds"
-  | "controller_gen"
-  | "roller_shades"
-  | "dry"
-  | "blinds_closed"
-  | "roller_shades_closed"
-  | "propane"
-  | "sensor_window"
-  | "thermostat_carbon"
-  | "range_hood"
-  | "doorbell_3p"
-  | "blanket"
-  | "tv_with_assistant"
-  | "vertical_shades_closed"
-  | "vertical_shades"
-  | "curtains_closed"
-  | "mode_heat_off"
-  | "mode_cool_off"
-  | "tamper_detection_off"
-  | "shelves"
-  | "thermometer_gain"
-  | "wall_art"
-  | "thermometer_loss"
-  | "hallway"
-  | "emergency_share_off"
-  | "stadia_controller"
-  | "door_open"
-  | "nest_eco_leaf"
-  | "device_reset"
-  | "nest_clock_farsight_analog"
-  | "nest_remote_comfort_sensor"
-  | "laundry"
-  | "battery_horiz_075"
-  | "shield_with_heart"
-  | "temp_preferences_eco"
-  | "familiar_face_and_zone"
-  | "tools_power_drill"
-  | "airwave"
-  | "productivity"
-  | "battery_horiz_050"
-  | "nest_heat_link_gen_3"
-  | "nest_display"
-  | "weather_snowy"
-  | "activity_zone"
-  | "ev_charger"
-  | "nest_remote"
-  | "cleaning_bucket"
-  | "settings_alert"
-  | "nest_cam_indoor"
-  | "arrows_more_up"
-  | "nest_heat_link_e"
-  | "home_storage"
-  | "nest_multi_room"
-  | "nest_secure_alarm"
-  | "battery_horiz_000"
-  | "light_group"
-  | "google_wifi"
-  | "nest_cam_outdoor"
-  | "detection_and_zone"
-  | "nest_thermostat_gen_3"
-  | "mfg_nest_yale_lock"
-  | "tools_pliers_wire_stripper"
-  | "detector_alarm"
-  | "nest_cam_iq_outdoor"
-  | "tools_ladder"
-  | "early_on"
-  | "floor_lamp"
-  | "nest_clock_farsight_digital"
-  | "nest_cam_iq"
-  | "home_speaker"
-  | "nest_mini"
-  | "nest_hello_doorbell"
-  | "home_max_dots"
-  | "nest_audio"
-  | "nest_wifi_router"
-  | "house_with_shield"
-  | "zone_person_urgent"
-  | "nest_display_max"
-  | "motion_sensor_active"
-  | "cool_to_dry"
-  | "shield_with_house"
-  | "nest_farsight_weather"
-  | "chromecast_2"
-  | "battery_profile"
-  | "window_closed"
-  | "heat_pump_balance"
-  | "arming_countdown"
-  | "nest_found_savings"
-  | "detector_status"
-  | "self_care"
-  | "tools_level"
-  | "window_open"
-  | "nest_thermostat_zirconium_eu"
-  | "arrows_more_down"
-  | "nest_true_radiant"
-  | "nest_cam_wired_stand"
-  | "zone_person_alert"
-  | "detector"
-  | "climate_mini_split"
-  | "nest_detect"
-  | "nest_wifi_point"
-  | "door_sensor"
-  | "nest_doorbell_visitor"
-  | "quiet_time"
-  | "nest_cam_floodlight"
-  | "nest_tag"
-  | "tools_installation_kit"
-  | "nest_connect"
-  | "nest_thermostat_sensor_eu"
-  | "nest_sunblock"
-  | "tools_phillips"
-  | "nest_thermostat_sensor"
-  | "nest_wifi_gale"
-  | "nest_thermostat_e_eu"
-  | "doorbell_chime"
-  | "detector_co"
-  | "detector_battery"
-  | "tools_flat_head"
-  | "nest_wake_on_approach"
-  | "nest_wake_on_press"
-  | "motion_sensor_urgent"
-  | "table_lamp"
-  | "motion_sensor_alert"
-  | "window_sensor"
-  | "tamper_detection_on"
-  | "nest_cam_magnet_mount"
-  | "zone_person_idle"
-  | "quiet_time_active"
-  | "nest_cam_stand"
-  | "detector_offline"
-  | "wall_lamp"
-  | "nest_cam_wall_mount"
-  | "motion_sensor_idle"
-  | "nest_thermostat"
-  | "water_pump"
-  | "assistant_on_hub"
-  | "nest_protect"
-  | "google_tv_remote"
-  | "feedback"
-  | "flutter";
diff --git a/web/components/ui/icon.tsx b/web/components/ui/icon.tsx
index ff093a1ce..418186291 100644
--- a/web/components/ui/icon.tsx
+++ b/web/components/ui/icon.tsx
@@ -6,7 +6,5 @@ type Props = {
 };
 
 export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
-  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>
-    {iconName}
-  </span>
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
 );
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 3f9815533..e92fbf6f8 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -1,13 +1,10 @@
-export * from "./buttons";
 export * from "./dropdowns";
 export * from "./graphs";
 export * from "./input";
 export * from "./text-area";
-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/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index aa79abaf3..a4ced132b 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -1,4 +1,4 @@
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle } from "lucide-react";
 
 type Props = {
   bannerName: string;
@@ -6,11 +6,11 @@ type Props = {
 };
 
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex items-start gap-3 py-3.5 border-b border-custom-border-200">
+  <div className="flex items-start gap-3 py-3.5 border-b border-custom-border-100">
     <h3 className="text-xl font-medium">{bannerName}</h3>
     {description && (
       <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
-        <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
+        <AlertCircle className="h-6 w-6 text-custom-text-100" />
         <p className="leading-5">{description}</p>
       </div>
     )}
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
index ba130acca..c7e4306a2 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 px-2 py-1 text-xs text-custom-text-200 rounded border-[0.5px] 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/markdown-to-component.tsx b/web/components/ui/markdown-to-component.tsx
index 53b157b19..5d3d1b25c 100644
--- a/web/components/ui/markdown-to-component.tsx
+++ b/web/components/ui/markdown-to-component.tsx
@@ -41,9 +41,7 @@ const HeadingSecondary: CustomComponent = ({ children }) => (
   <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
 );
 
-const Paragraph: CustomComponent = ({ children }) => (
-  <p className="text-sm text-custom-text-200">{children}</p>
-);
+const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-custom-text-200">{children}</p>;
 
 const OrderedList: CustomComponent = ({ children }) => (
   <ol className="ml-8 mb-4 list-decimal text-sm text-custom-text-200">{children}</ol>
diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
index cfdaa72d5..13ed5c29c 100644
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -3,10 +3,9 @@ import { Fragment, useState } from "react";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 
 type MultiLevelDropdownProps = {
   label: string;
@@ -52,7 +51,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                 }`}
               >
                 {label}
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
               </Menu.Button>
             </div>
             <Transition
@@ -94,13 +93,9 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                               direction === "right" ? "justify-between" : ""
                             }`}
                           >
-                            {direction === "left" && option.hasChildren && (
-                              <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
-                            )}
+                            {direction === "left" && option.hasChildren && <ChevronLeft className="h-3.5 w-3.5" />}
                             <span>{option.label}</span>
-                            {direction === "right" && option.hasChildren && (
-                              <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
-                            )}
+                            {direction === "right" && option.hasChildren && <ChevronRight className="h-3.5 w-3.5" />}
                           </div>
                         </>
                       )}
@@ -108,9 +103,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     {option.hasChildren && option.id === openChildFor && (
                       <div
                         className={`absolute top-0 min-w-36 whitespace-nowrap origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 border border-custom-border-300 shadow-lg focus:outline-none ${
-                          direction === "left"
-                            ? "right-full -translate-x-1"
-                            : "left-full translate-x-1"
+                          direction === "left" ? "right-full -translate-x-1" : "left-full translate-x-1"
                         } ${
                           height === "sm"
                             ? "max-h-28"
@@ -126,9 +119,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         {option.children ? (
                           <div className="space-y-1 p-1">
                             {option.children.length === 0 ? (
-                              <p className="text-custom-text-200 text-center px-1 py-1.5">
-                                No {option.label} found
-                              </p> //if no children found, show this message.
+                              <p className="text-custom-text-200 text-center px-1 py-1.5">No {option.label} found</p> //if no children found, show this message.
                             ) : (
                               option.children.map((child) => {
                                 if (child.element) return child.element;
@@ -143,10 +134,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                       } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
                                     >
                                       {child.label}{" "}
-                                      <CheckIcon
-                                        className={`h-3.5 w-3.5 opacity-0 ${
-                                          child.selected ? "opacity-100" : ""
-                                        }`}
+                                      <Check
+                                        className={`h-3.5 w-3.5 opacity-0 ${child.selected ? "opacity-100" : ""}`}
                                       />
                                     </button>
                                   );
diff --git a/web/components/ui/multi-level-select.tsx b/web/components/ui/multi-level-select.tsx
index 4d0340604..addd6206c 100644
--- a/web/components/ui/multi-level-select.tsx
+++ b/web/components/ui/multi-level-select.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronsUpDown } from "lucide-react";
 
 type TSelectOption = {
   id: string;
@@ -52,7 +52,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
             >
               <span className="block truncate">{selected?.label ?? label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon className="h-5 w-5 text-custom-text-200" aria-hidden="true" />
+                <ChevronsUpDown className="h-5 w-5 text-custom-text-200" />
               </span>
             </Listbox.Button>
             <Transition
@@ -105,16 +105,12 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                               >
                                 {({ selected }) => (
                                   <>
-                                    <span
-                                      className={`block truncate ${
-                                        selected ? "font-medium" : "font-normal"
-                                      }`}
-                                    >
+                                    <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
                                       {child.label}
                                     </span>
                                     {selected ? (
                                       <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        <Check className="h-5 w-5" aria-hidden="true" />
                                       </span>
                                     ) : null}
                                   </>
@@ -131,14 +127,12 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                             />
                           </div>
                         )}
-                        <span
-                          className={`block truncate ${selected ? "font-medium" : "font-normal"}`}
-                        >
+                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
                           {option.label}
                         </span>
                         {selected ? (
                           <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            <Check className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
                       </>
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index 4f5bad7b3..4cd2bfc56 100644
--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@@ -5,11 +5,12 @@ 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";
+import { MarkdownRenderer } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
+import { X } from "lucide-react";
 // helpers
 import { renderLongDateFormat } from "helpers/date-time.helper";
 
@@ -18,6 +19,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,17 +52,11 @@ 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)}>
-                        <XMarkIcon
-                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                          aria-hidden="true"
-                        />
+                        <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                       </button>
                     </span>
                   </Dialog.Title>
diff --git a/web/components/ui/progress-bar.tsx b/web/components/ui/progress-bar.tsx
index 8ac0b1e1e..b92b568ac 100644
--- a/web/components/ui/progress-bar.tsx
+++ b/web/components/ui/progress-bar.tsx
@@ -39,8 +39,7 @@ export const ProgressBar: React.FC<Props> = ({
     const DIRECTION = -1;
     // Rotation Calc
     const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
-    const rotationAngle =
-      -1 * DIRECTION * primaryRotationAngle + i * DIRECTION * primaryRotationAngle;
+    const rotationAngle = -1 * DIRECTION * primaryRotationAngle + i * DIRECTION * primaryRotationAngle;
     const rotationTransformation = `rotate(${rotationAngle}, ${radius}, ${radius})`;
     const pieValue = calculatePieValue(maxValue);
     const dValue = generatePie(pieValue);
diff --git a/web/components/ui/text-area/index.tsx b/web/components/ui/text-area/index.tsx
index a962281a4..bd6f749d3 100644
--- a/web/components/ui/text-area/index.tsx
+++ b/web/components/ui/text-area/index.tsx
@@ -74,9 +74,7 @@ export const TextArea: React.FC<Props> = ({
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""
-        } ${error ? "border-red-500" : ""} ${
-          error && mode === "primary" ? "bg-red-100" : ""
-        } ${className}`}
+        } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-100" : ""} ${className}`}
         {...rest}
       />
       {error?.message && <div className="text-sm text-red-500">{error.message}</div>}
diff --git a/web/components/ui/toggle-switch.tsx b/web/components/ui/toggle-switch.tsx
index 5ad9377de..ffe755853 100644
--- a/web/components/ui/toggle-switch.tsx
+++ b/web/components/ui/toggle-switch.tsx
@@ -30,11 +30,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
           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"
+            ? (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" : ""}`}
       />
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..31be08379 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -1,55 +1,50 @@
 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
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // 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);
       });
@@ -82,7 +77,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -96,40 +91,33 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <AlertTriangle 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-all 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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeleteView}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -138,4 +126,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..b7f91a467 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -1,85 +1,51 @@
 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";
+import { Button, Input, TextArea } from "@plane/ui";
 // 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,
+    projectState: projectStateStore,
+    projectMember: { projectMembers },
+  } = useMobxStore();
 
   const {
-    register,
+    control,
     formState: { errors, isSubmitting },
     handleSubmit,
     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 +54,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,109 +67,115 @@ 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
-              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 } }) => (
+                <Input
+                  id="name"
+                  type="name"
+                  name="name"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none w-full text-xl focus:border-blue-400"
+                />
+              )}
             />
           </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"
+                  placeholder="Description"
+                  className="resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
             />
           </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={projectMembers?.map((m) => m.member) ?? undefined}
+                    states={projectStateStore.projectStates ?? undefined}
+                  />
+                </FiltersDropdown>
+              )}
             />
           </div>
+          {selectedFilters && Object.keys(selectedFilters).length > 0 && (
+            <div>
+              <AppliedFiltersList
+                appliedFilters={selectedFilters}
+                handleClearAllFilters={clearAllFilters}
+                handleRemoveFilter={() => {}}
+                labels={projectStore.projectLabels ?? undefined}
+                members={projectMembers?.map((m) => m.member) ?? undefined}
+                states={projectStateStore.projectStates ?? 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" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" type="submit">
+          {data
             ? isSubmitting
               ? "Updating View..."
               : "Update View"
             : isSubmitting
             ? "Creating View..."
             : "Create View"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
-};
+});
diff --git a/web/components/views/gantt-chart.tsx b/web/components/views/gantt-chart.tsx
deleted file mode 100644
index 6f43a32e6..000000000
--- a/web/components/views/gantt-chart.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useRouter } from "next/router";
-
-// 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 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 ViewIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
-
-  const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
-    workspaceSlug as string,
-    projectId as string,
-    viewId 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={isAllowed}
-        />
-      </div>
-    </>
-  );
-};
diff --git a/web/components/views/index.ts b/web/components/views/index.ts
index a68740368..b7ebe5081 100644
--- a/web/components/views/index.ts
+++ b/web/components/views/index.ts
@@ -1,6 +1,5 @@
 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";
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
index c1ff54231..8cc1a5981 100644
--- a/web/components/views/modal.tsx
+++ b/web/components/views/modal.tsx
@@ -1,119 +1,77 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
+import { FC, Fragment } from "react";
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import viewsService from "services/views.service";
 // hooks
+import { useMobxStore } from "lib/mobx/store-provider";
 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;
+  workspaceSlug: string;
+  projectId: string;
 };
 
-export const CreateUpdateViewModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  preLoadedData,
-  user,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
+export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
+  const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
+  // store
+  const { projectViews: projectViewsStore } = useMobxStore();
+  // hooks
   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)
+  const createView = async (payload: IProjectView) => {
+    await projectViewsStore
+      .createView(workspaceSlug, projectId, payload)
       .then(() => {
-        mutate(VIEWS_LIST(projectId as string));
         handleClose();
-
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View created successfully.",
         });
       })
-      .catch(() => {
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "View could not be created. Please try again.",
-        });
-      });
+          message: "Something went wrong. 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(() => {
+  const updateView = async (payload: IProjectView) => {
+    await projectViewsStore
+      .updateView(workspaceSlug, projectId, data?.id as string, payload)
+      .then(() => handleClose())
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "View could not be updated. Please try again.",
-        });
-      });
+          message: "Something went wrong. Please try again.",
+        })
+      );
   };
 
-  const handleFormSubmit = async (formData: IView) => {
-    if (!workspaceSlug || !projectId) return;
-
+  const handleFormSubmit = async (formData: IProjectView) => {
     if (!data) await createView(formData);
     else await updateView(formData);
   };
 
   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"
@@ -121,13 +79,13 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <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"
@@ -135,12 +93,11 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
               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-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}
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ProjectViewForm
                   data={data}
+                  handleClose={handleClose}
+                  handleFormSubmit={handleFormSubmit}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>
@@ -150,4 +107,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
deleted file mode 100644
index c3aadc33d..000000000
--- a/web/components/views/select-filters.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-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";
-// components
-import { DateFilterModal } from "components/core";
-// ui
-import { Avatar, MultiLevelDropdown } from "components/ui";
-// icons
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { IIssueFilterOptions } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
-// constants
-import { PRIORITIES } from "constants/project";
-import { DATE_FILTER_OPTIONS } from "constants/filters";
-
-type Props = {
-  filters: Partial<IIssueFilterOptions>;
-  onSelect: (option: any) => void;
-  direction?: "left" | "right";
-  height?: "sm" | "md" | "rg" | "lg";
-};
-
-export const SelectFilters: 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, projectId } = router.query;
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const statesList = getStatesList(states);
-
-  const { data: members } = useSWR(
-    projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: issueLabels } = useSWR(
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
-      : null
-  );
-
-  const projectFilterOption = [
-    {
-      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: "state",
-      label: "State",
-      value: statesList,
-      hasChildren: true,
-      children: statesList?.map((state) => ({
-        id: state.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <StateGroupIcon stateGroup={state.group} color={state.color} />
-            {state.name}
-          </div>
-        ),
-        value: {
-          key: "state",
-          value: state.id,
-        },
-        selected: filters?.state?.includes(state.id),
-      })),
-    },
-    {
-      id: "assignees",
-      label: "Assignees",
-      value: members,
-      hasChildren: true,
-      children: members?.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: "created_by",
-      label: "Created by",
-      value: members,
-      hasChildren: true,
-      children: members?.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: "labels",
-      label: "Labels",
-      value: issueLabels,
-      hasChildren: true,
-      children: issueLabels?.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: "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 IIssueFilterOptions}
-          handleClose={() => setIsDateFilterModalOpen(false)}
-          isOpen={isDateFilterModalOpen}
-          onSelect={onSelect}
-        />
-      )}
-      <MultiLevelDropdown
-        label="Filters"
-        onSelect={onSelect}
-        direction={direction}
-        height={height}
-        options={projectFilterOption}
-      />
-    </>
-  );
-};
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..41e3a7ae8
--- /dev/null
+++ b/web/components/views/view-list-item.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { PencilIcon, StarIcon, TrashIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views";
+// ui
+import { CustomMenu, PhotoFilterIcon } from "@plane/ui";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { calculateTotalFilters } from "helpers/filter.helper";
+// types
+import { IProjectView } from "types";
+
+type Props = {
+  view: IProjectView;
+};
+
+export const ProjectViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
+  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 (
+    <>
+      {workspaceSlug && projectId && view && (
+        <CreateUpdateProjectViewModal
+          isOpen={createUpdateViewModal}
+          onClose={() => setCreateUpdateViewModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          data={view}
+        />
+      )}
+      <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 flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                  <PhotoFilterIcon className="h-3.5 w-3.5" />
+                </div>
+                <div className="flex flex-col">
+                  <p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p>
+                  {view?.description && <p className="text-xs text-custom-text-200 break-all">{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();
+                        setCreateUpdateViewModal(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/views/views-list.tsx b/web/components/views/views-list.tsx
new file mode 100644
index 000000000..69ac6aaf2
--- /dev/null
+++ b/web/components/views/views-list.tsx
@@ -0,0 +1,75 @@
+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 "@plane/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, commandPalette: commandPaletteStore } = 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="true-transparent"
+              />
+            </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: () => commandPaletteStore.toggleCreateViewModal(true),
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/web-view/activity-message.tsx b/web/components/web-view/activity-message.tsx
deleted file mode 100644
index 17548a386..000000000
--- a/web/components/web-view/activity-message.tsx
+++ /dev/null
@@ -1,450 +0,0 @@
-import { useRouter } from "next/router";
-
-// icons
-import { CopyPlus } from "lucide-react";
-import { Icon, Tooltip } from "components/ui";
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { BlockedIcon, BlockerIcon, RelatedIcon } from "components/icons";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { capitalizeFirstLetter } from "helpers/string.helper";
-// types
-import { IIssueActivity } from "types";
-
-const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
-  <Tooltip
-    tooltipContent={
-      activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
-    }
-  >
-    <button
-      type="button"
-      onClick={() =>
-        console.log(
-          "issue",
-          JSON.stringify({
-            project_id: activity.project,
-            issue_id: activity.issue,
-          })
-        )
-      }
-      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"}
-      <Icon iconName="launch" className="!text-xs" />
-    </button>
-  </Tooltip>
-);
-
-const UserLink = ({ activity }: { activity: IIssueActivity }) => (
-  <button
-    type="button"
-    onClick={() => {
-      console.log("user", activity.actor);
-    }}
-    className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
-  >
-    {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
-  </button>
-);
-
-const activityDetails: {
-  [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
-    icon: React.ReactNode;
-  };
-} = {
-  assignees: {
-    message: (activity, showIssue) => (
-      <>
-        {activity.old_value === "" ? "added a new assignee " : "removed the assignee "}
-        <UserLink activity={activity} />
-        {showIssue && (
-          <>
-            {" "}
-            to <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="group" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  archived_at: {
-    message: (activity) => {
-      if (activity.new_value === "restore") return "restored the issue.";
-      else return "archived the issue.";
-    },
-    icon: <Icon iconName="archive" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  attachment: {
-    message: (activity, showIssue) => (
-      <>
-        {activity.verb === "created" ? "uploaded a new " : "removed an "}
-        {activity.new_value && activity.new_value !== "" ? (
-          <button type="button" onClick={() => console.log("attachment", activity.new_value)}>
-            attachment
-          </button>
-        ) : (
-          "attachment"
-        )}
-        {showIssue && activity.verb === "created" ? " to " : " from "}
-        {showIssue && <IssueLink activity={activity} />}
-      </>
-    ),
-    icon: <Icon iconName="attach_file" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  blocking: {
-    message: (activity) => (
-      <>
-        {activity.old_value === ""
-          ? "marked this issue is blocking issue "
-          : "removed the blocking issue "}
-        <span className="font-medium text-custom-text-100">
-          {activity.old_value === "" ? activity.new_value : activity.old_value}
-        </span>
-        .
-      </>
-    ),
-    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
-  },
-
-  blocked_by: {
-    message: (activity) => (
-      <>
-        {activity.old_value === ""
-          ? "marked this issue is being blocked by issue "
-          : "removed this issue being blocked by issue "}
-        <span className="font-medium text-custom-text-100">
-          {activity.old_value === "" ? activity.new_value : activity.old_value}
-        </span>
-        .
-      </>
-    ),
-    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
-  },
-
-  duplicate: {
-    message: (activity) => (
-      <>
-        {activity.old_value === ""
-          ? "marked this issue as duplicate of "
-          : "removed this issue as a duplicate of "}
-        <span className="font-medium text-custom-text-100">
-          {activity.verb === "created" ? activity.new_value : activity.old_value}
-        </span>
-        .
-      </>
-    ),
-    icon: <CopyPlus size={12} color="#6b7280" />,
-  },
-
-  relates_to: {
-    message: (activity) => (
-      <>
-        {activity.old_value === ""
-          ? "marked that this issue relates to "
-          : "removed the relation from "}
-        <span className="font-medium text-custom-text-100">
-          {activity.old_value === "" ? activity.new_value : activity.old_value}
-        </span>
-        .
-      </>
-    ),
-    icon: <RelatedIcon height="12" width="12" color="#6b7280" />,
-  },
-
-  cycles: {
-    message: (activity) => (
-      <>
-        {activity.verb === "created" && "added this issue to the cycle "}
-        {activity.verb === "updated" && "set the cycle to "}
-        {activity.verb === "deleted" && "removed the issue from the cycle "}
-        <button
-          type="button"
-          onClick={() =>
-            console.log(
-              "cycle",
-              JSON.stringify({
-                cycle_id: activity.new_identifier,
-                project_id: activity.project,
-              })
-            )
-          }
-          className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-        >
-          {activity.new_value}
-          <Icon iconName="launch" className="!text-xs" />
-        </button>
-      </>
-    ),
-    icon: <Icon iconName="contrast" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  description: {
-    message: (activity, showIssue) => (
-      <>
-        updated the description
-        {showIssue && (
-          <>
-            {" "}
-            of <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  estimate_point: {
-    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>
-        )}
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-      </>
-    ),
-    icon: <Icon iconName="change_history" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  issue: {
-    message: (activity) => {
-      if (activity.verb === "created") return "created the issue.";
-      else return "deleted an issue.";
-    },
-    icon: <Icon iconName="stack" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  labels: {
-    message: (activity, showIssue) => (
-      <>
-        {activity.old_value === "" ? "added a new label " : "removed the label "}
-        <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-          <span
-            className="h-1.5 w-1.5 rounded-full"
-            style={{
-              backgroundColor: "#000000",
-            }}
-            aria-hidden="true"
-          />
-          <span className="font-medium text-custom-text-100">
-            {activity.old_value === "" ? activity.new_value : activity.old_value}
-          </span>
-        </span>
-        {showIssue && (
-          <>
-            {" "}
-            to <IssueLink activity={activity} />
-          </>
-        )}
-      </>
-    ),
-    icon: <Icon iconName="sell" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  link: {
-    message: (activity, showIssue) => (
-      <>
-        {activity.verb === "created" && "added this "}
-        {activity.verb === "updated" && "updated this "}
-        {activity.verb === "deleted" && "removed this "}
-        <button
-          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
-          <Icon iconName="launch" className="!text-xs" />
-        </button>
-        {showIssue && (
-          <>
-            {" "}
-            to <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="link" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  modules: {
-    message: (activity) => (
-      <>
-        {activity.verb === "created" && "added this "}
-        {activity.verb === "updated" && "updated this "}
-        {activity.verb === "deleted" && "removed this "}
-        <button
-          onClick={() =>
-            console.log(
-              "module",
-              activity.verb === "created" ? activity.new_value : activity.old_value
-            )
-          }
-          className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-        >
-          module
-          <Icon iconName="launch" className="!text-xs" />
-        </button>
-        .
-      </>
-    ),
-    icon: <Icon iconName="dataset" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  name: {
-    message: (activity, showIssue) => (
-      <>
-        set the name to {activity.new_value}
-        {showIssue && (
-          <>
-            {" "}
-            of <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  parent: {
-    message: (activity, showIssue) => (
-      <>
-        {activity.new_value ? "set the parent to " : "removed the parent "}
-        <span className="font-medium text-custom-text-100">
-          {activity.new_value ? activity.new_value : activity.old_value}
-        </span>
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="supervised_user_circle" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  priority: {
-    message: (activity, showIssue) => (
-      <>
-        set the priority to{" "}
-        <span className="font-medium text-custom-text-100">
-          {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
-        </span>
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="signal_cellular_alt" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  start_date: {
-    message: (activity, showIssue) => (
-      <>
-        {activity.new_value ? "set the start date to " : "removed the start date "}
-        <span className="font-medium text-custom-text-100">
-          {activity.new_value ? renderShortDateWithYearFormat(activity.new_value) : "None"}
-        </span>
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-      </>
-    ),
-    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
-  },
-
-  state: {
-    message: (activity, showIssue) => (
-      <>
-        set the state to{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
-  },
-
-  target_date: {
-    message: (activity, showIssue) => (
-      <>
-        {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>
-        )}
-
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-      </>
-    ),
-    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
-  },
-};
-
-export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
-  <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
-);
-
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
-  activity: IIssueActivity;
-  showIssue?: boolean;
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <>
-      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
-        activity,
-        showIssue,
-        workspaceSlug?.toString() ?? ""
-      )}
-    </>
-  );
-};
diff --git a/web/components/web-view/add-comment.tsx b/web/components/web-view/add-comment.tsx
deleted file mode 100644
index b4f49d7be..000000000
--- a/web/components/web-view/add-comment.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-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 { TipTapEditor } from "components/tiptap";
-
-// icons
-import { Send } from "lucide-react";
-
-// ui
-import { Icon, SecondaryButton, Tooltip, PrimaryButton } from "components/ui";
-
-// types
-import type { IIssueComment } from "types";
-
-const defaultValues: Partial<IIssueComment> = {
-  access: "INTERNAL",
-  comment_html: "",
-};
-
-type Props = {
-  disabled?: boolean;
-  onSubmit: (data: IIssueComment) => Promise<void>;
-};
-
-const commentAccess = [
-  {
-    icon: "lock",
-    key: "INTERNAL",
-    label: "Private",
-  },
-  {
-    icon: "public",
-    key: "EXTERNAL",
-    label: "Public",
-  },
-];
-
-export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
-  const editorRef = React.useRef<any>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { projectDetails } = useProjectDetails();
-
-  const showAccessSpecifier = projectDetails?.is_deployed;
-
-  const {
-    control,
-    formState: { isSubmitting },
-    handleSubmit,
-    reset,
-  } = useForm<IIssueComment>({ defaultValues });
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!formData.comment_html || isSubmitting) return;
-
-    await onSubmit(formData).then(() => {
-      reset(defaultValues);
-      editorRef.current?.clearEditor();
-    });
-  };
-
-  return (
-    <form className="w-full flex gap-x-2" onSubmit={handleSubmit(handleAddComment)}>
-      <div className="relative flex-grow">
-        {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="comment_html"
-          control={control}
-          render={({ field: { value, onChange } }) => (
-            <TipTapEditor
-              workspaceSlug={workspaceSlug as string}
-              ref={editorRef}
-              value={!value || value === "" ? "<p></p>" : value}
-              customClassName="p-3 min-h-[100px] shadow-sm"
-              debouncedUpdatesEnabled={false}
-              onChange={(comment_json: Object, comment_html: string) => onChange(comment_html)}
-            />
-          )}
-        />
-      </div>
-
-      <div className="inline">
-        <PrimaryButton
-          type="submit"
-          disabled={isSubmitting || disabled}
-          className="mt-2 w-10 h-10 flex items-center justify-center"
-        >
-          <Send className="w-4 h-4" />
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/web/components/web-view/create-update-link-form.tsx b/web/components/web-view/create-update-link-form.tsx
deleted file mode 100644
index fa1a33939..000000000
--- a/web/components/web-view/create-update-link-form.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-// 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";
-
-// services
-import issuesService from "services/issues.service";
-
-// fetch keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
-
-// hooks
-import useToast from "hooks/use-toast";
-
-// ui
-import { PrimaryButton, Input } from "components/ui";
-
-// types
-import type { linkDetails, IIssueLink } from "types";
-
-type Props = {
-  isOpen: boolean;
-  data?: linkDetails;
-  links?: linkDetails[];
-  onSuccess: () => void;
-};
-
-export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
-  const { isOpen, data, links, onSuccess } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm({
-    defaultValues: {
-      title: "",
-      url: "",
-    },
-  });
-
-  useEffect(() => {
-    if (!data) return;
-    reset({
-      title: data.title,
-      url: data.url,
-    });
-  }, [data, reset]);
-
-  useEffect(() => {
-    if (!isOpen)
-      reset({
-        title: "",
-        url: "",
-      });
-  }, [isOpen, reset]);
-
-  const onSubmit = async (formData: IIssueLink) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    const payload = { metadata: {}, ...formData };
-
-    if (!data)
-      await issuesService
-        .createIssueLink(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          issueId.toString(),
-          payload
-        )
-        .then(() => {
-          onSuccess();
-          mutate(ISSUE_DETAILS(issueId.toString()));
-        })
-        .catch((err) => {
-          if (err?.status === 400)
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "This URL already exists for this issue.",
-            });
-          else
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "Something went wrong. Please try again.",
-            });
-        });
-    else {
-      const updatedLinks = links?.map((l) =>
-        l.id === data.id
-          ? {
-              ...l,
-              title: formData.title,
-              url: formData.url,
-            }
-          : l
-      );
-
-      mutate(
-        ISSUE_DETAILS(issueId.toString()),
-        (prevData) => ({ ...prevData, issue_link: updatedLinks }),
-        false
-      );
-
-      await issuesService
-        .updateIssueLink(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          issueId.toString(),
-          data!.id,
-          payload
-        )
-        .then(() => {
-          onSuccess();
-          mutate(ISSUE_DETAILS(issueId.toString()));
-        });
-    }
-  };
-
-  return (
-    <form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
-      <div>
-        <div className="space-y-5">
-          <div className="mt-2 space-y-3">
-            <div>
-              <Input
-                id="url"
-                label="URL"
-                name="url"
-                type="url"
-                placeholder="https://..."
-                autoComplete="off"
-                error={errors.url}
-                register={register}
-                validations={{
-                  required: "URL is required",
-                }}
-              />
-            </div>
-            <div>
-              <Input
-                id="title"
-                label="Title (optional)"
-                name="title"
-                type="text"
-                placeholder="Enter title"
-                autoComplete="off"
-                error={errors.title}
-                register={register}
-              />
-            </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>
-      </div>
-    </form>
-  );
-};
diff --git a/web/components/web-view/index.ts b/web/components/web-view/index.ts
deleted file mode 100644
index 915c891a9..000000000
--- a/web/components/web-view/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export * from "./web-view-modal";
-export * from "./select-state";
-export * from "./select-priority";
-export * from "./issue-web-view-form";
-export * from "./label";
-export * from "./sub-issues";
-export * from "./issue-attachments";
-export * from "./issue-properties-detail";
-export * from "./issue-link-list";
-export * from "./create-update-link-form";
-export * from "./issue-activity";
-export * from "./select-assignee";
-export * from "./select-estimate";
-export * from "./add-comment";
-export * from "./select-parent";
-export * from "./select-blocker";
-export * from "./select-blocked";
-export * from "./activity-message";
diff --git a/web/components/web-view/issue-activity.tsx b/web/components/web-view/issue-activity.tsx
deleted file mode 100644
index 4bd13eb5c..000000000
--- a/web/components/web-view/issue-activity.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-// 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";
-
-// hooks
-import useUser from "hooks/use-user";
-
-// components
-import { CommentCard } from "components/issues/comment";
-import { Label, AddComment, ActivityMessage, ActivityIcon } 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";
-
-type Props = {
-  allowed: boolean;
-  issueDetails: IIssue;
-};
-
-export const IssueActivity: React.FC<Props> = (props) => {
-  const { issueDetails, allowed } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { user } = useUser();
-
-  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()
-          )
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: any) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    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
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issueDetails) return;
-
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-      })
-      .catch(() =>
-        console.log(
-          "toast",
-          JSON.stringify({
-            type: "error",
-            title: "Error!",
-            message: "Comment could not be posted. Please try again.",
-          })
-        )
-      );
-  };
-
-  return (
-    <div>
-      <Label>Activity</Label>
-      <div className="mt-1 space-y-[6px] p-2 border rounded-[4px]">
-        <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."
-            );
-
-            if ("field" in activityItem && activityItem.field !== "updated_by") {
-              return (
-                <li key={activityItem.id}>
-                  <div className="relative pb-1">
-                    {issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
-                      <span
-                        className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
-                        aria-hidden="true"
-                      />
-                    ) : null}
-                    <div className="relative flex items-start space-x-2">
-                      <div>
-                        <div className="relative px-1.5">
-                          <div className="mt-1.5">
-                            <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"
-                                  />
-                                ) : (
-                                  <ActivityIcon activity={activityItem} />
-                                )
-                              ) : activityItem.actor_detail.avatar &&
-                                activityItem.actor_detail.avatar !== "" ? (
-                                <img
-                                  src={activityItem.actor_detail.avatar}
-                                  alt={activityItem.actor_detail.display_name}
-                                  height={24}
-                                  width={24}
-                                  className="rounded-full"
-                                />
-                              ) : (
-                                <div
-                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                                >
-                                  {activityItem.actor_detail.is_bot
-                                    ? activityItem.actor_detail.first_name.charAt(0)
-                                    : activityItem.actor_detail.display_name.charAt(0)}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      </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" ? (
-                            <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>
-                          ) : (
-                            <button
-                              type="button"
-                              className="text-gray font-medium"
-                              onClick={() => console.log("user", activityItem.actor)}
-                            >
-                              {activityItem.actor_detail.is_bot
-                                ? activityItem.actor_detail.first_name
-                                : activityItem.actor_detail.display_name}
-                            </button>
-                          )}{" "}
-                          {message}{" "}
-                          <span className="whitespace-nowrap">
-                            {timeAgo(activityItem.created_at)}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              );
-            } else if ("comment_json" in activityItem)
-              return (
-                <div key={activityItem.id} className="my-4">
-                  <CommentCard
-                    workspaceSlug={workspaceSlug as string}
-                    comment={activityItem as any}
-                    onSubmit={handleCommentUpdate}
-                    handleCommentDeletion={handleCommentDelete}
-                  />
-                </div>
-              );
-          })}
-          <li>
-            <div className="my-4">
-              <AddComment
-                onSubmit={handleAddComment}
-                disabled={
-                  !allowed ||
-                  !issueDetails ||
-                  issueDetails.state === "closed" ||
-                  issueDetails.state === "archived"
-                }
-              />
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/web-view/issue-attachments.tsx b/web/components/web-view/issue-attachments.tsx
deleted file mode 100644
index ba4540318..000000000
--- a/web/components/web-view/issue-attachments.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-// 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";
-
-// 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 } from "components/web-view";
-import { DeleteAttachmentModal } from "components/issues";
-
-// types
-import type { IIssueAttachment } from "types";
-
-type Props = {
-  allowed: boolean;
-};
-
-const isImage = (fileName: string) => /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(fileName);
-
-export const IssueAttachments: React.FC<Props> = (props) => {
-  const { allowed } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
-  const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
-
-  const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      if (!acceptedFiles[0] || !workspaceSlug) return;
-
-      const formData = new FormData();
-      formData.append("asset", acceptedFiles[0]);
-      formData.append(
-        "attributes",
-        JSON.stringify({
-          name: acceptedFiles[0].name,
-          size: acceptedFiles[0].size,
-        })
-      );
-      setIsLoading(true);
-
-      issuesService
-        .uploadIssueAttachment(
-          workspaceSlug as string,
-          projectId as string,
-          issueId as string,
-          formData
-        )
-        .then((res) => {
-          mutate<IIssueAttachment[]>(
-            ISSUE_ATTACHMENTS(issueId as string),
-            (prevData) => [res, ...(prevData ?? [])],
-            false
-          );
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-          console.log(
-            "toast",
-            JSON.stringify({
-              type: "success",
-              title: "Success!",
-              message: "File added successfully.",
-            })
-          );
-          setIsOpen(false);
-          setIsLoading(false);
-        })
-        .catch((err) => {
-          setIsLoading(false);
-          console.log(
-            "toast",
-            JSON.stringify({
-              type: "error",
-              title: "error!",
-              message: "Something went wrong. please check file type & size (max 5 MB)",
-            })
-          );
-        });
-    },
-    [issueId, projectId, workspaceSlug]
-  );
-
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop,
-    maxSize: 5 * 1024 * 1024,
-    disabled: !allowed || isLoading,
-  });
-
-  const { data: attachments } = useSWR<IIssueAttachment[]>(
-    workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.getIssueAttachment(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            issueId.toString()
-          )
-      : null
-  );
-
-  return (
-    <div>
-      <DeleteAttachmentModal
-        isOpen={allowed && attachmentDeleteModal}
-        setIsOpen={setAttachmentDeleteModal}
-        data={deleteAttachment}
-      />
-
-      <WebViewModal isOpen={isOpen} onClose={() => setIsOpen(false)} modalTitle="Insert file">
-        <div className="space-y-6">
-          <div
-            {...getRootProps()}
-            className={`border-b w-full py-2 text-custom-text-100 px-2 flex justify-between items-center ${
-              !allowed || isLoading ? "cursor-not-allowed" : "cursor-pointer"
-            }`}
-          >
-            <input {...getInputProps()} />
-            {isLoading ? (
-              <p className="text-center">Uploading...</p>
-            ) : (
-              <>
-                <h3 className="text-lg">Upload</h3>
-                <ChevronRight className="w-5 h-5" />
-              </>
-            )}
-          </div>
-        </div>
-      </WebViewModal>
-
-      <Label>Attachments</Label>
-      <div className="mt-1 space-y-[6px]">
-        {attachments?.map((attachment) => (
-          <div
-            key={attachment.id}
-            className="px-3 border border-custom-border-200 rounded-[4px] py-2 flex justify-between items-center bg-custom-background-100"
-          >
-            <Link href={attachment.asset}>
-              <a target="_blank" className="text-custom-text-200 truncate flex items-center">
-                {isImage(attachment.attributes.name) ? (
-                  <ImageIcon className="w-5 h-5 mr-2 flex-shrink-0 text-custom-text-400" />
-                ) : (
-                  <FileText className="w-5 h-5 mr-2 flex-shrink-0 text-custom-text-400" />
-                )}
-                <span className="truncate">{attachment.attributes.name}</span>
-              </a>
-            </Link>
-            {allowed && (
-              <button
-                type="button"
-                onClick={() => {
-                  setDeleteAttachment(attachment);
-                  setAttachmentDeleteModal(true);
-                }}
-              >
-                <X className="w-[18px] h-[18px] text-custom-text-400" />
-              </button>
-            )}
-          </div>
-        ))}
-        <button
-          type="button"
-          onClick={() => setIsOpen(true)}
-          className="bg-custom-primary-100/10 border border-dotted rounded-[4px] border-custom-primary-100 text-center py-2 w-full text-custom-primary-100"
-        >
-          Click to upload file here
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/web-view/issue-link-list.tsx b/web/components/web-view/issue-link-list.tsx
deleted file mode 100644
index 5f1da6a62..000000000
--- a/web/components/web-view/issue-link-list.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-// 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";
-
-// 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 } from "components/web-view";
-
-// ui
-import { SecondaryButton } from "components/ui";
-
-// fetch keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
-
-// types
-import type { IIssue } from "types";
-
-type Props = {
-  allowed: boolean;
-  issueDetails: IIssue;
-};
-
-export const IssueLinks: React.FC<Props> = (props) => {
-  const { issueDetails, allowed } = props;
-
-  const links = issueDetails?.issue_link;
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedLink, setSelectedLink] = useState<string | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const handleDeleteLink = async (linkId: string) => {
-    if (!workspaceSlug || !projectId || !issueDetails) return;
-
-    const updatedLinks = issueDetails.issue_link.filter((l) => l.id !== linkId);
-
-    mutate<IIssue>(
-      ISSUE_DETAILS(issueDetails.id),
-      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
-      false
-    );
-
-    await issuesService
-      .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetails.id, linkId)
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueDetails.id));
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  return (
-    <div>
-      <WebViewModal
-        isOpen={isOpen}
-        onClose={() => {
-          setIsOpen(false);
-          setSelectedLink(null);
-        }}
-        modalTitle={selectedLink ? "Update Link" : "Add Link"}
-      >
-        <CreateUpdateLinkForm
-          isOpen={isOpen}
-          links={links}
-          onSuccess={() => {
-            setIsOpen(false);
-            setSelectedLink(null);
-          }}
-          data={links?.find((link) => link.id === selectedLink)}
-        />
-      </WebViewModal>
-
-      <Label>Links</Label>
-      <div className="mt-1 space-y-[6px]">
-        {links?.map((link) => (
-          <div
-            key={link.id}
-            className="px-3 border border-custom-border-200 rounded-[4px] py-2 flex justify-between items-center bg-custom-background-100"
-          >
-            <Link href={link.url}>
-              <a target="_blank" className="text-custom-text-200 truncate">
-                <span>
-                  <LinkIcon className="w-4 h-4 inline-block mr-1" />
-                </span>
-                <span>{link.title}</span>
-              </a>
-            </Link>
-            {allowed && (
-              <div className="flex gap-2 items-center">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setIsOpen(true);
-                    setSelectedLink(link.id);
-                  }}
-                >
-                  <Pencil className="w-[18px] h-[18px] text-custom-text-400" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    handleDeleteLink(link.id);
-                  }}
-                >
-                  <X className="w-[18px] h-[18px] text-custom-text-400" />
-                </button>
-              </div>
-            )}
-          </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>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
deleted file mode 100644
index 2c745febe..000000000
--- a/web/components/web-view/issue-properties-detail.tsx
+++ /dev/null
@@ -1,443 +0,0 @@
-// react
-import React, { useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// swr
-import { mutate } from "swr";
-
-// react hook forms
-import { Control, Controller, useWatch } from "react-hook-form";
-
-// services
-import issuesService from "services/issues.service";
-
-// hooks
-import useUser from "hooks/use-user";
-
-// fetch keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
-
-// icons
-import { BlockedIcon, BlockerIcon } from "components/icons";
-import { ChevronDown, PlayIcon, User, X, CalendarDays, LayoutGrid, Users } from "lucide-react";
-
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
-
-// ui
-import { SecondaryButton, CustomDatePicker } from "components/ui";
-
-// components
-import {
-  Label,
-  StateSelect,
-  PrioritySelect,
-  AssigneeSelect,
-  EstimateSelect,
-  ParentSelect,
-  BlockerSelect,
-  BlockedSelect,
-} from "components/web-view";
-
-// types
-import type { IIssue } from "types";
-
-type Props = {
-  control: Control<IIssue, any>;
-  submitChanges: (data: Partial<IIssue>) => Promise<void>;
-};
-
-export const IssuePropertiesDetail: React.FC<Props> = (props) => {
-  const { control, submitChanges } = props;
-
-  const blockerIssue =
-    useWatch({
-      control,
-      name: "issue_relations",
-    })?.filter((i) => i.relation_type === "blocked_by") || [];
-
-  const blockedIssue = useWatch({
-    control,
-    name: "related_issues",
-  })?.filter((i) => i.relation_type === "blocked_by");
-
-  const startDate = useWatch({
-    control,
-    name: "start_date",
-  });
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { user } = useUser();
-
-  const [isViewAllOpen, setIsViewAllOpen] = useState(false);
-
-  const { isEstimateActive } = useEstimateOption();
-
-  const handleMutation = (data: any) => {
-    mutate<IIssue>(
-      ISSUE_DETAILS(issueId as string),
-      (prevData) => {
-        if (!prevData) return prevData;
-        return {
-          ...prevData,
-          ...data,
-        };
-      },
-      false
-    );
-  };
-
-  return (
-    <div>
-      <Label>Details</Label>
-      <div className="mb-[6px]">
-        <div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
-          <div className="flex items-center gap-1">
-            <LayoutGrid className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
-            <span className="text-sm text-custom-text-400">State</span>
-          </div>
-          <div>
-            <Controller
-              control={control}
-              name="state"
-              render={({ field: { value } }) => (
-                <StateSelect
-                  value={value}
-                  onChange={(val: string) => submitChanges({ state: val })}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="mb-[6px]">
-        <div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
-          <div className="flex items-center gap-1">
-            <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="#A3A3A3"
-              />
-            </svg>
-
-            <span className="text-sm text-custom-text-400">Priority</span>
-          </div>
-          <div>
-            <Controller
-              control={control}
-              name="priority"
-              render={({ field: { value } }) => (
-                <PrioritySelect
-                  value={value}
-                  onChange={(val) => submitChanges({ priority: val })}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="mb-[6px]">
-        <div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
-          <div className="flex items-center gap-1">
-            <Users className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
-            <span className="text-sm text-custom-text-400">Assignee</span>
-          </div>
-          <div>
-            <Controller
-              control={control}
-              name="assignees_list"
-              render={({ field: { value } }) => (
-                <AssigneeSelect
-                  value={value}
-                  onChange={(val: string) => submitChanges({ assignees_list: [val] })}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      {isViewAllOpen && (
-        <>
-          {isEstimateActive && (
-            <div className="mb-[6px]">
-              <div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
-                <div className="flex items-center gap-1">
-                  <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90 text-custom-text-400" />
-                  <span className="text-sm text-custom-text-400">Estimate</span>
-                </div>
-                <div>
-                  <Controller
-                    control={control}
-                    name="estimate_point"
-                    render={({ field: { value } }) => (
-                      <EstimateSelect
-                        value={value}
-                        onChange={(val) => submitChanges({ estimate_point: val })}
-                      />
-                    )}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-          <div className="mb-[6px]">
-            <div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
-              <div className="flex items-center gap-1">
-                <User className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
-                <span className="text-sm text-custom-text-400">Parent</span>
-              </div>
-              <div>
-                <Controller
-                  control={control}
-                  name="parent"
-                  render={({ field: { value } }) => (
-                    <ParentSelect
-                      value={value}
-                      onChange={(val) => submitChanges({ parent: val })}
-                    />
-                  )}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="mb-[6px]">
-            <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">
-                  <BlockerIcon height={16} width={16} />
-                  <span className="text-sm text-custom-text-400">Blocking</span>
-                </div>
-                <div>
-                  <BlockerSelect
-                    value={null}
-                    onChange={(val) => {
-                      if (!user || !workspaceSlug || !projectId || !issueId) return;
-
-                      issuesService
-                        .createIssueRelation(
-                          workspaceSlug as string,
-                          projectId as string,
-                          issueId as string,
-                          user,
-                          {
-                            related_list: [
-                              ...val.map((issue: any) => ({
-                                issue: issue.blocker_issue_detail.id,
-                                relation_type: "blocked_by" as const,
-                                related_issue: issueId as string,
-                                related_issue_detail: issue.blocker_issue_detail,
-                              })),
-                            ],
-                          }
-                        )
-                        .then((response) => {
-                          handleMutation({
-                            issue_relations: [
-                              ...blockerIssue,
-                              ...(response ?? []).map((i: any) => ({
-                                id: i.id,
-                                relation_type: i.relation_type,
-                                issue_detail: i.related_issue_detail,
-                                issue: i.related_issue,
-                              })),
-                            ],
-                          });
-                        });
-                    }}
-                  />
-                </div>
-              </div>
-              {blockerIssue &&
-                blockerIssue.map((issue) => (
-                  <div
-                    key={issue.issue_detail?.id}
-                    className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
-                  >
-                    <a
-                      href={`/${workspaceSlug}/projects/${issue.issue_detail?.project_detail.id}/issues/${issue.issue_detail?.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-1"
-                    >
-                      <BlockerIcon height={10} width={10} />
-                      {`${issue.issue_detail?.project_detail.identifier}-${issue.issue_detail?.sequence_id}`}
-                    </a>
-                    <button
-                      type="button"
-                      className="duration-300"
-                      onClick={() => {
-                        const updatedBlockers = blockerIssue.filter(
-                          (i) => i.issue_detail?.id !== issue.issue_detail?.id
-                        );
-
-                        if (!user) return;
-
-                        issuesService.deleteIssueRelation(
-                          workspaceSlug as string,
-                          projectId as string,
-                          issueId as string,
-                          issue.id,
-                          user
-                        );
-
-                        handleMutation({
-                          issue_relations: updatedBlockers,
-                        });
-                      }}
-                    >
-                      <X className="h-2 w-2" />
-                    </button>
-                  </div>
-                ))}
-            </div>
-          </div>
-          <div className="mb-[6px]">
-            <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">
-                  <BlockedIcon height={16} width={16} />
-                  <span className="text-sm text-custom-text-400">Blocked by</span>
-                </div>
-                <div>
-                  <BlockedSelect
-                    value={null}
-                    onChange={(val) => {
-                      if (!user || !workspaceSlug || !projectId || !issueId) return;
-
-                      issuesService
-                        .createIssueRelation(
-                          workspaceSlug as string,
-                          projectId as string,
-                          issueId as string,
-                          user,
-                          {
-                            related_list: [
-                              ...val.map((issue: any) => ({
-                                issue: issue.blocked_issue_detail.id,
-                                relation_type: "blocked_by" as const,
-                                related_issue: issueId as string,
-                                related_issue_detail: issue.blocked_issue_detail,
-                              })),
-                            ],
-                          }
-                        )
-                        .then((response) => {
-                          handleMutation({
-                            related_issues: [
-                              ...blockedIssue,
-                              ...(response ?? []).map((i: any) => ({
-                                id: i.id,
-                                relation_type: i.relation_type,
-                                issue_detail: i.related_issue_detail,
-                                issue: i.related_issue,
-                              })),
-                            ],
-                          });
-                        });
-                    }}
-                  />
-                </div>
-              </div>
-              {blockedIssue &&
-                blockedIssue.map((issue) => (
-                  <div
-                    key={issue.issue_detail?.id}
-                    className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
-                  >
-                    <a
-                      href={`/${workspaceSlug}/projects/${issue.issue_detail?.project_detail.id}/issues/${issue.issue_detail?.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-1"
-                    >
-                      <BlockedIcon height={10} width={10} />
-                      {`${issue?.issue_detail?.project_detail?.identifier}-${issue?.issue_detail?.sequence_id}`}
-                    </a>
-                    <button
-                      type="button"
-                      className="duration-300"
-                      onClick={() => {
-                        const updatedBlocked = blockedIssue.filter((i) => i?.id !== issue?.id);
-
-                        if (!user) return;
-
-                        issuesService.deleteIssueRelation(
-                          workspaceSlug as string,
-                          projectId as string,
-                          issueId as string,
-                          issue.id,
-                          user
-                        );
-
-                        handleMutation({
-                          related_issues: updatedBlocked,
-                        });
-                      }}
-                    >
-                      <X className="h-2 w-2" />
-                    </button>
-                  </div>
-                ))}
-            </div>
-          </div>
-
-          <div className="mb-[6px]">
-            <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">
-                  <CalendarDays className="w-4 h-4 text-custom-text-400" />
-                  <span className="text-sm text-custom-text-400">Due date</span>
-                </div>
-                <div>
-                  <Controller
-                    control={control}
-                    name="target_date"
-                    render={({ field: { value } }) => (
-                      <CustomDatePicker
-                        placeholder="Due date"
-                        value={value}
-                        wrapperClassName="w-full"
-                        onChange={(val) =>
-                          submitChanges({
-                            target_date: val,
-                          })
-                        }
-                        className="border-transparent !shadow-none !w-[6.75rem]"
-                        minDate={startDate ? new Date(startDate) : undefined}
-                      />
-                    )}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-      <div className="mb-[6px]">
-        <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>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/web-view/issue-web-view-form.tsx b/web/components/web-view/issue-web-view-form.tsx
deleted file mode 100644
index ff9383fd0..000000000
--- a/web/components/web-view/issue-web-view-form.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-// react
-import React, { useCallback, useEffect, useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// react hook forms
-import { Controller } from "react-hook-form";
-
-// hooks
-
-import { useDebouncedCallback } from "use-debounce";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
-
-// ui
-import { TextArea } from "components/ui";
-
-// components
-import { TipTapEditor } from "components/tiptap";
-import { Label } from "components/web-view";
-
-// types
-import type { IIssue } from "types";
-
-type Props = {
-  isAllowed: boolean;
-  issueDetails: IIssue;
-  submitChanges: (data: Partial<IIssue>) => Promise<void>;
-  register: any;
-  control: any;
-  watch: any;
-  handleSubmit: any;
-};
-
-export const IssueWebViewForm: React.FC<Props> = (props) => {
-  const { isAllowed, issueDetails, submitChanges, register, control, watch, handleSubmit } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const [characterLimit, setCharacterLimit] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
-
-  const { setShowAlert } = useReloadConfirmations();
-
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert]);
-
-  const debouncedTitleSave = useDebouncedCallback(async () => {
-    setTimeout(async () => {
-      handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
-    }, 500);
-  }, 1000);
-
-  const handleDescriptionFormSubmit = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
-
-      await submitChanges({
-        name: formData.name ?? "",
-        description_html: formData.description_html ?? "<p></p>",
-      });
-    },
-    [submitChanges]
-  );
-
-  return (
-    <>
-      <div className="flex flex-col">
-        <Label>Title</Label>
-        <div className="relative">
-          {isAllowed ? (
-            <TextArea
-              id="name"
-              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}
-            />
-          ) : (
-            <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" : ""
-                }`}
-              >
-                {watch("name").length}
-              </span>
-              /255
-            </div>
-          )}
-        </div>
-      </div>
-      <div>
-        <Label>Description</Label>
-        <div className="relative">
-          <Controller
-            name="description_html"
-            control={control}
-            render={({ field: { value, onChange } }) => {
-              if (!value) return <></>;
-
-              return (
-                <TipTapEditor
-                  value={
-                    !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
-                      ? "<p></p>"
-                      : value
-                  }
-                  workspaceSlug={workspaceSlug!.toString()}
-                  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")
-                    );
-                  }}
-                  editable={isAllowed}
-                />
-              );
-            }}
-          />
-          <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>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/web-view/label.tsx b/web/components/web-view/label.tsx
deleted file mode 100644
index 6e59be4ad..000000000
--- a/web/components/web-view/label.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export const Label: React.FC<
-  React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>
-> = (props) => (
-  <label className="block text-base font-medium mb-[5px]" {...props}>
-    {props.children}
-  </label>
-);
diff --git a/web/components/web-view/select-assignee.tsx b/web/components/web-view/select-assignee.tsx
deleted file mode 100644
index 27eae5db1..000000000
--- a/web/components/web-view/select-assignee.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-// 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";
-
-// fetch key
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
-// components
-import { Avatar } from "components/ui/avatar";
-import { WebViewModal } from "./web-view-modal";
-
-type Props = {
-  value: string[];
-  onChange: (value: any) => void;
-  disabled?: boolean;
-};
-
-export const AssigneeSelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const selectedAssignees = members?.filter((member) => value?.includes(member.member.id));
-
-  return (
-    <>
-      <WebViewModal
-        isOpen={isOpen}
-        modalTitle="Select state"
-        onClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <WebViewModal.Options
-          options={
-            members?.map((member) => ({
-              label: member.member.display_name,
-              value: member.member.id,
-              checked: value?.includes(member.member.id),
-              icon: <Avatar user={member.member} />,
-              onClick: () => {
-                setIsOpen(false);
-                if (disabled) return;
-                onChange(member.member.id);
-              },
-            })) || []
-          }
-        />
-      </WebViewModal>
-
-      <button
-        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 text-custom-text-100"
-        }
-      >
-        {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-100 text-xs">
-              {selectedAssignees?.length} Assignees
-            </span>
-          </div>
-        ) : (
-          "No assignees"
-        )}
-        <ChevronDown className="w-5 h-5" />
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/select-blocked.tsx b/web/components/web-view/select-blocked.tsx
deleted file mode 100644
index 9569c5240..000000000
--- a/web/components/web-view/select-blocked.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// react
-import React, { useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// hooks
-import useToast from "hooks/use-toast";
-
-// icons
-import { ChevronDown } from "lucide-react";
-
-// components
-import { ExistingIssuesListModal } from "components/core";
-
-// types
-import { BlockeIssueDetail, ISearchIssueResponse } from "types";
-
-type Props = {
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-};
-
-export const BlockedSelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
-
-  const router = useRouter();
-  const { issueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const onSubmit = async (data: ISearchIssueResponse[]) => {
-    if (data.length === 0) {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Please select at least one issue.",
-      });
-
-      return;
-    }
-
-    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
-      blocker_issue_detail: {
-        id: i.id,
-        name: i.name,
-        sequence_id: i.sequence_id,
-        project_detail: {
-          id: i.project_id,
-          identifier: i.project__identifier,
-          name: i.project__name,
-        },
-      },
-    }));
-
-    onChange([...(value || []), ...selectedIssues]);
-
-    setIsBlockedModalOpen(false);
-  };
-
-  return (
-    <>
-      <ExistingIssuesListModal
-        isOpen={isBlockedModalOpen}
-        handleClose={() => setIsBlockedModalOpen(false)}
-        searchParams={{ issue_relation: true, issue_id: issueId!.toString() }}
-        handleOnSubmit={onSubmit}
-        workspaceLevelToggle
-      />
-
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => setIsBlockedModalOpen(true)}
-        className={
-          "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">Select issue</span>
-        <ChevronDown className="w-4 h-4 text-custom-text-200" />
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/select-blocker.tsx b/web/components/web-view/select-blocker.tsx
deleted file mode 100644
index 39b20ac8e..000000000
--- a/web/components/web-view/select-blocker.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// react
-import React, { useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// hooks
-import useToast from "hooks/use-toast";
-
-// icons
-import { ChevronDown } from "lucide-react";
-
-// components
-import { ExistingIssuesListModal } from "components/core";
-
-// types
-import { BlockeIssueDetail, ISearchIssueResponse } from "types";
-
-type Props = {
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-};
-
-export const BlockerSelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
-
-  const router = useRouter();
-  const { issueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const onSubmit = async (data: ISearchIssueResponse[]) => {
-    if (data.length === 0) {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Please select at least one issue.",
-      });
-
-      return;
-    }
-
-    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
-      blocker_issue_detail: {
-        id: i.id,
-        name: i.name,
-        sequence_id: i.sequence_id,
-        project_detail: {
-          id: i.project_id,
-          identifier: i.project__identifier,
-          name: i.project__name,
-        },
-      },
-    }));
-
-    onChange([...(value || []), ...selectedIssues]);
-
-    setIsBlockerModalOpen(false);
-  };
-
-  return (
-    <>
-      <ExistingIssuesListModal
-        isOpen={isBlockerModalOpen}
-        handleClose={() => setIsBlockerModalOpen(false)}
-        searchParams={{ issue_relation: true, issue_id: issueId!.toString() }}
-        handleOnSubmit={onSubmit}
-        workspaceLevelToggle
-      />
-
-      <button
-        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 text-custom-text-100"
-        }
-      >
-        <span className="text-custom-text-200">Select issue</span>
-        <ChevronDown className="w-4 h-4 text-custom-text-200" />
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/select-estimate.tsx b/web/components/web-view/select-estimate.tsx
deleted file mode 100644
index 765e6187d..000000000
--- a/web/components/web-view/select-estimate.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-// react
-import React, { useState } from "react";
-
-// icons
-import { ChevronDown, PlayIcon } from "lucide-react";
-
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
-
-// components
-import { WebViewModal } from "./web-view-modal";
-
-type Props = {
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-};
-
-export const EstimateSelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { estimatePoints } = useEstimateOption();
-
-  return (
-    <>
-      <WebViewModal
-        isOpen={isOpen}
-        modalTitle="Select estimate"
-        onClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <WebViewModal.Options
-          options={[
-            {
-              label: "None",
-              value: null,
-              checked: value === null,
-              onClick: () => {
-                setIsOpen(false);
-                if (disabled) return;
-                onChange(null);
-              },
-              icon: <PlayIcon className="h-4 w-4 -rotate-90" />,
-            },
-            ...estimatePoints?.map((point) => ({
-              label: point.value,
-              value: point.key,
-              checked: point.key === value,
-              icon: <PlayIcon className="h-4 w-4 -rotate-90" />,
-              onClick: () => {
-                setIsOpen(false);
-                if (disabled) return;
-                onChange(point.key);
-              },
-            })),
-          ]}
-        />
-      </WebViewModal>
-
-      <button
-        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 text-custom-text-100"
-        }
-      >
-        {value ? (
-          <div className="flex items-center gap-x-1.5">
-            <PlayIcon className="h-4 w-4 -rotate-90" />
-            <span>{estimatePoints?.find((e) => e.key === value)?.value}</span>
-          </div>
-        ) : (
-          "No estimate"
-        )}
-        <ChevronDown className="w-5 h-5" />
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/select-parent.tsx b/web/components/web-view/select-parent.tsx
deleted file mode 100644
index e5975b7b5..000000000
--- a/web/components/web-view/select-parent.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// 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 { ISSUE_DETAILS } from "constants/fetch-keys";
-
-// components
-import { ParentIssuesListModal } from "components/issues";
-
-// types
-import { ISearchIssueResponse } from "types";
-
-type Props = {
-  value: string | null;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-};
-
-export const ParentSelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
-  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { data: issueDetails } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
-      : null
-  );
-
-  return (
-    <>
-      <ParentIssuesListModal
-        isOpen={isParentModalOpen}
-        handleClose={() => setIsParentModalOpen(false)}
-        onChange={(issue) => {
-          onChange(issue.id);
-          setSelectedParentIssue(issue);
-        }}
-        issueId={issueId as string}
-        projectId={projectId as string}
-      />
-
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => setIsParentModalOpen(true)}
-        className={
-          "relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
-        }
-      >
-        {selectedParentIssue && issueDetails?.parent ? (
-          `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
-        ) : !selectedParentIssue && issueDetails?.parent ? (
-          `${issueDetails.parent_detail?.project_detail.identifier}-${issueDetails.parent_detail?.sequence_id}`
-        ) : (
-          <span className="text-custom-text-200">Select issue</span>
-        )}
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/select-priority.tsx b/web/components/web-view/select-priority.tsx
deleted file mode 100644
index 8267f22c4..000000000
--- a/web/components/web-view/select-priority.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// react
-import React, { useState } from "react";
-
-// icons
-import { ChevronDown } from "lucide-react";
-
-// constants
-import { PRIORITIES } from "constants/project";
-
-// components
-import { PriorityIcon } from "components/icons";
-import { WebViewModal } from "./web-view-modal";
-
-// helpers
-import { capitalizeFirstLetter } from "helpers/string.helper";
-// types
-import { TIssuePriorities } from "types";
-
-type Props = {
-  value: any;
-  onChange: (value: TIssuePriorities) => void;
-  disabled?: boolean;
-};
-
-export const PrioritySelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <WebViewModal
-        isOpen={isOpen}
-        modalTitle="Select priority"
-        onClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <WebViewModal.Options
-          options={
-            PRIORITIES?.map((priority) => ({
-              label: capitalizeFirstLetter(priority),
-              value: priority,
-              checked: priority === value,
-              onClick: () => {
-                setIsOpen(false);
-                if (disabled) return;
-                onChange(priority);
-              },
-              icon: (
-                <span
-                  className={`text-left text-xs capitalize rounded ${
-                    priority === "urgent"
-                      ? "border-red-500/20 text-red-500"
-                      : priority === "high"
-                      ? "border-orange-500/20 text-orange-500"
-                      : priority === "medium"
-                      ? "border-yellow-500/20 text-yellow-500"
-                      : priority === "low"
-                      ? "border-green-500/20 text-green-500"
-                      : "border-custom-border-200 text-custom-text-200"
-                  }`}
-                >
-                  <PriorityIcon priority={priority} className="text-sm" />
-                </span>
-              ),
-            })) || []
-          }
-        />
-      </WebViewModal>
-
-      <button
-        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 text-custom-text-100"
-        }
-      >
-        {value ? capitalizeFirstLetter(value) : "None"}
-        <ChevronDown className="w-5 h-5" />
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/select-state.tsx b/web/components/web-view/select-state.tsx
deleted file mode 100644
index c5bfa1257..000000000
--- a/web/components/web-view/select-state.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-// 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";
-
-// 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";
-
-type Props = {
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-};
-
-export const StateSelect: React.FC<Props> = (props) => {
-  const { value, onChange, disabled = false } = props;
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = 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
-  );
-  const states = getStatesList(stateGroups);
-
-  const selectedState = states?.find((s) => s.id === value);
-
-  return (
-    <>
-      <WebViewModal
-        isOpen={isOpen}
-        modalTitle="Select state"
-        onClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <WebViewModal.Options
-          options={
-            states?.map((state) => ({
-              label: state.name,
-              value: state.id,
-              checked: state.id === selectedState?.id,
-              icon: <StateGroupIcon stateGroup={state.group} color={state.color} />,
-              onClick: () => {
-                setIsOpen(false);
-                if (disabled) return;
-                onChange(state.id);
-              },
-            })) || []
-          }
-        />
-      </WebViewModal>
-
-      <button
-        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 text-custom-text-100"
-        }
-      >
-        {selectedState?.name || "Select a state"}
-        <ChevronDown className="w-5 h-5" />
-      </button>
-    </>
-  );
-};
diff --git a/web/components/web-view/sub-issues.tsx b/web/components/web-view/sub-issues.tsx
deleted file mode 100644
index 4299d9e3a..000000000
--- a/web/components/web-view/sub-issues.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-// react
-import React from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// swr
-import useSWR, { mutate } from "swr";
-
-// icons
-import { X } from "lucide-react";
-
-// services
-import issuesService from "services/issues.service";
-
-// fetch key
-import { SUB_ISSUES } from "constants/fetch-keys";
-
-// hooks
-import useUser from "hooks/use-user";
-
-// ui
-import { Spinner } from "components/ui";
-import { IIssue } from "types";
-
-// components
-import { Label } from "components/web-view";
-
-type Props = {
-  issueDetails?: IIssue;
-};
-
-export const SubIssueList: React.FC<Props> = (props) => {
-  const { issueDetails } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-
-  const { data: subIssuesResponse } = useSWR(
-    workspaceSlug && issueDetails ? SUB_ISSUES(issueDetails.id) : null,
-    workspaceSlug && issueDetails
-      ? () =>
-          issuesService.subIssues(workspaceSlug as string, issueDetails.project, issueDetails.id)
-      : null
-  );
-
-  const handleSubIssueRemove = (issue: any) => {
-    if (!workspaceSlug || !issueDetails || !user) return;
-
-    mutate(
-      SUB_ISSUES(issueDetails.id),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        const stateDistribution = { ...prevData.state_distribution };
-
-        const issueGroup = issue.state_detail.group;
-        stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1;
-
-        return {
-          state_distribution: stateDistribution,
-          sub_issues: prevData.sub_issues.filter((i: any) => i.id !== issue.id),
-        };
-      },
-      false
-    );
-
-    issuesService
-      .patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user)
-      .finally(() => mutate(SUB_ISSUES(issueDetails.id)));
-  };
-
-  return (
-    <div>
-      <Label>Sub Issues</Label>
-      <div className="p-3 border border-custom-border-200 rounded-[4px]">
-        {!subIssuesResponse && (
-          <div className="flex justify-center items-center">
-            <Spinner />
-            Loading...
-          </div>
-        )}
-
-        {subIssuesResponse?.sub_issues.length === 0 && (
-          <div className="flex justify-center items-center">
-            <p className="text-sm text-custom-text-200">No sub issues</p>
-          </div>
-        )}
-
-        {subIssuesResponse?.sub_issues?.map((subIssue) => (
-          <div key={subIssue.id} className="flex items-center justify-between gap-2 py-2">
-            <div className="flex items-center">
-              <p className="mr-3 text-sm text-custom-text-300">
-                {subIssue.project_detail.identifier}-{subIssue.sequence_id}
-              </p>
-              <p className="text-sm font-normal">{subIssue.name}</p>
-            </div>
-            <button type="button" onClick={() => handleSubIssueRemove(subIssue)}>
-              <X className="w-[18px] h-[18px] text-custom-text-400" />
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/web-view/web-view-modal.tsx b/web/components/web-view/web-view-modal.tsx
deleted file mode 100644
index 39769dfcd..000000000
--- a/web/components/web-view/web-view-modal.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-// react
-import React, { Fragment } from "react";
-
-// headless ui
-import { Transition, Dialog } from "@headlessui/react";
-
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  modalTitle: string;
-  children: React.ReactNode;
-};
-
-export const WebViewModal = (props: Props) => {
-  const { isOpen, onClose, modalTitle, children } = props;
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={handleClose}>
-        <Transition.Child
-          as={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 bottom-0 left-0 w-full z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center text-center sm:items-center">
-            <Transition.Child
-              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"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-none rounded-tr-[20px] rounded-tl-[20px] bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:mt-8 w-full">
-                <div className="flex justify-between items-center w-full">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-2xl font-semibold leading-6 text-custom-text-100"
-                  >
-                    {modalTitle}
-                  </Dialog.Title>
-                  <button
-                    type="button"
-                    className="inline-flex justify-center items-center p-2 rounded-md text-custom-text-200 hover:text-custom-text-100 focus:outline-none"
-                    onClick={handleClose}
-                  >
-                    <XMarkIcon className="w-6 h-6 text-custom-text-200" />
-                  </button>
-                </div>
-                <div className="mt-6 max-h-60 overflow-auto">{children}</div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-type OptionsProps = {
-  options: Array<{
-    label: string;
-    value: string | null;
-    checked: boolean;
-    icon?: any;
-    onClick: () => void;
-  }>;
-};
-
-const Options: React.FC<OptionsProps> = ({ options }) => (
-  <div className="divide-y">
-    {options.map((option) => (
-      <div key={option.value} className="flex items-center justify-between gap-2 py-[14px]">
-        <div className="flex items-center gap-x-2">
-          <input
-            type="checkbox"
-            checked={option.checked}
-            onChange={option.onClick}
-            className="rounded-full border border-custom-border-200 bg-custom-background-100 w-4 h-4"
-          />
-
-          {option.icon}
-
-          <p className="text-sm font-normal">{option.label}</p>
-        </div>
-      </div>
-    ))}
-  </div>
-);
-
-WebViewModal.Options = Options;
-WebViewModal.Options.displayName = "WebViewModal.Options";
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/completed-issues-graph.tsx b/web/components/workspace/completed-issues-graph.tsx
index 5f0512660..628b5206d 100644
--- a/web/components/workspace/completed-issues-graph.tsx
+++ b/web/components/workspace/completed-issues-graph.tsx
@@ -1,5 +1,6 @@
 // ui
-import { CustomMenu, LineGraph } from "components/ui";
+import { LineGraph } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // constants
 import { MONTHS } from "constants/project";
 
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index 9ca80c3dc..2c1387996 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -1,29 +1,38 @@
 import React, { useState } from "react";
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  handleDelete: () => void;
+  onSubmit: () => Promise<void>;
   data?: any;
 };
 
-const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, onSubmit } = props;
+
+  const [isRemoving, setIsRemoving] = useState(false);
+
+  const {
+    user: { currentUser },
+  } = useMobxStore();
 
   const handleClose = () => {
     onClose();
-    setIsDeleteLoading(false);
+    setIsRemoving(false);
   };
 
   const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-    handleDelete();
+    setIsRemoving(true);
+
+    await onSubmit();
+
     handleClose();
   };
 
@@ -39,7 +48,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -53,37 +62,40 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-100 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"
-                      />
+                      <AlertTriangle 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"
-                      >
-                        Remove {data?.display_name}?
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        {currentUser?.id === data?.memberId ? "Leave workspace?" : `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.
-                        </p>
+                        {currentUser?.id === data?.memberId ? (
+                          <p className="text-sm text-custom-text-200">
+                            Are you sure you want to leave the workspace? You will no longer have access to this
+                            workspace. This action cannot be undone.
+                          </p>
+                        ) : (
+                          <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.
+                          </p>
+                        )}
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Removing..." : "Remove"}
-                  </DangerButton>
+                <div className="flex justify-end gap-2 p-4 sm:px-6 bg-custom-background-100">
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
+                    {isRemoving ? "Removing..." : "Remove"}
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -92,6 +104,4 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
       </Dialog>
     </Transition.Root>
   );
-};
-
-export default ConfirmWorkspaceMemberRemove;
+});
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index c7eb584b9..a0792fe70 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -1,21 +1,19 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-
-import { mutate } from "swr";
-
-// react-hook-form
+import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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 { Button, CustomSelect, Input } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IWorkspace } from "types";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
+import { IWorkspace } from "types";
 // constants
-import { ORGANIZATION_SIZE } from "constants/workspace";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "constants/workspace";
 
 type Props = {
   onSubmit?: (res: IWorkspace) => Promise<void>;
@@ -25,7 +23,6 @@ type Props = {
     organization_size: string;
   };
   setDefaultValues: Dispatch<SetStateAction<any>>;
-  user: ICurrentUserResponse | undefined;
   secondaryButton?: React.ReactNode;
   primaryButtonText?: {
     loading: string;
@@ -33,40 +30,30 @@ type Props = {
   };
 };
 
-const restrictedUrls = [
-  "api",
-  "installations",
-  "404",
-  "create-workspace",
-  "error",
-  "invitations",
-  "magic-sign-in",
-  "onboarding",
-  "profile",
-  "reset-password",
-  "sign-up",
-  "spaces",
-  "workspace-member-invitation",
-];
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspaceForm: FC<Props> = observer((props) => {
+  const {
+    onSubmit,
+    defaultValues,
+    setDefaultValues,
+    secondaryButton,
+    primaryButtonText = {
+      loading: "Creating...",
+      default: "Create Workspace",
+    },
+  } = props;
 
-export const CreateWorkspaceForm: React.FC<Props> = ({
-  onSubmit,
-  defaultValues,
-  setDefaultValues,
-  user,
-  secondaryButton,
-  primaryButtonText = {
-    loading: "Creating...",
-    default: "Create Workspace",
-  },
-}) => {
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
 
+  const router = useRouter();
+
+  const { workspace: workspaceStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
     control,
     setValue,
@@ -78,11 +65,11 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
     await workspaceService
       .workspaceSlugCheck(formData.slug)
       .then(async (res) => {
-        if (res.status === true && !restrictedUrls.includes(formData.slug)) {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
           setSlugError(false);
 
-          await workspaceService
-            .createWorkspace(formData, user)
+          await workspaceStore
+            .createWorkspace(formData)
             .then(async (res) => {
               setToastAlert({
                 type: "success",
@@ -90,11 +77,6 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                 message: "Workspace created successfully.",
               });
 
-              mutate<IWorkspace[]>(
-                USER_WORKSPACES,
-                (prevData) => [res, ...(prevData ?? [])],
-                false
-              );
               if (onSubmit) await onSubmit(res);
             })
             .catch(() =>
@@ -128,54 +110,64 @@ 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, onChange } }) => (
+              <Input
+                id="workspaceName"
+                type="text"
+                value={value}
+                onChange={(e) => {
+                  onChange(e.target.value);
+                  setValue("name", e.target.value);
+                  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"
+          <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
+            <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: { onChange, value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  type="text"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  hasError={Boolean(errors.slug)}
+                  placeholder="Enter workspace url..."
+                  className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full border-none"
+                />
+              )}
             />
           </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>
           )}
@@ -193,9 +185,10 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-200">Select organization size</span>
+                      <span className="text-custom-text-400">Select organization size</span>
                     )
                   }
+                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                   input
                   width="w-full"
                 >
@@ -216,10 +209,15 @@ 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>
+        {!secondaryButton && (
+          <Button variant="neutral-primary" type="button" size="md" onClick={() => router.back()}>
+            Go back
+          </Button>
+        )}
       </div>
     </form>
   );
-};
+});
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 80cf08cd1..3fb4a8a51 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -1,31 +1,22 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import workspaceService from "services/workspace.service";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
+import type { IWorkspace } from "types";
 
 type Props = {
   isOpen: boolean;
   data: IWorkspace | null;
   onClose: () => void;
-  user: ICurrentUserResponse | undefined;
 };
 
 const defaultValues = {
@@ -33,21 +24,24 @@ const defaultValues = {
   confirmDelete: "",
 };
 
-export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, user }) => {
+export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
+  const { isOpen, data, onClose } = props;
+
   const router = useRouter();
 
+  const { workspace: workspaceStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   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(() => {
@@ -61,18 +55,13 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
   const onSubmit = async () => {
     if (!data || !canDelete) return;
 
-    await workspaceService
-      .deleteWorkspace(data.slug, user)
+    await workspaceStore
+      .deleteWorkspace(data.slug)
       .then(() => {
         handleClose();
 
         router.push("/");
 
-        mutate<IWorkspace[]>(
-          USER_WORKSPACES,
-          (prevData) => prevData?.filter((workspace) => workspace.id !== data.id)
-        );
-
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -100,7 +89,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -114,14 +103,11 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <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"
-                      />
+                      <AlertTriangle 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 +117,31 @@ 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"
+                          autoComplete="off"
                         />
                       )}
                     />
@@ -160,30 +149,36 @@ 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"
+                          autoComplete="off"
                         />
                       )}
                     />
                   </div>
 
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete Workspace"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
@@ -193,4 +188,4 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 9f35f337c..bdbba0de7 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -1,15 +1,15 @@
 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";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
-import { Bolt, HelpOutlineOutlined, WestOutlined } from "@mui/icons-material";
-import { DiscordIcon } from "components/icons";
-import { FileText, Github, MessagesSquare } from "lucide-react";
+import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
+import { DiscordIcon, GithubIcon } from "@plane/ui";
 // assets
 import packageJson from "package.json";
 
@@ -27,7 +27,7 @@ const helpOptions = [
   {
     name: "Report a bug",
     href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: Github,
+    Icon: GithubIcon,
   },
   {
     name: "Chat with us",
@@ -38,76 +38,67 @@ 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, commandPalette: commandPaletteStore } = useMobxStore();
+  // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-
+  // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
 
+  const isCollapsed = themeStore.sidebarCollapsed || false;
+
   return (
     <>
       <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" : ""
+          isCollapsed ? "flex-col" : ""
         }`}
       >
-        {!store?.theme?.sidebarCollapsed && (
+        {!isCollapsed && (
           <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"
-          }`}
-        >
+        <div className={`flex items-center gap-1 ${isCollapsed ? "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" : ""
+              isCollapsed ? "w-full" : ""
             }`}
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "h",
-              });
-              document.dispatchEvent(e);
-            }}
+            onClick={() => commandPaletteStore.toggleShortcutModal(true)}
           >
-            <Bolt fontSize="small" />
+            <Zap className="h-3.5 w-3.5" />
           </button>
           <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" : ""
+              isCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
-            <HelpOutlineOutlined fontSize="small" />
+            <HelpCircle className="h-3.5 w-3.5" />
           </button>
           <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.toggleSidebar()}
           >
-            <WestOutlined fontSize="small" />
+            <MoveLeft className="h-3.5 w-3.5" />
           </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" : ""
+              isCollapsed ? "w-full" : ""
             }`}
-            onClick={() => store.theme.setSidebarCollapsed(!store?.theme?.sidebarCollapsed)}
+            onClick={() => themeStore.toggleSidebar()}
           >
-            <WestOutlined
-              fontSize="small"
-              className={`duration-300 ${store?.theme?.sidebarCollapsed ? "rotate-180" : ""}`}
-            />
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
           </button>
         </div>
 
@@ -123,7 +114,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
           >
             <div
               className={`absolute bottom-2 min-w-[10rem] ${
-                store?.theme?.sidebarCollapsed ? "left-full" : "-left-[75px]"
+                isCollapsed ? "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}
             >
@@ -152,7 +143,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
                         className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
                       >
                         <div className="grid place-items-center flex-shrink-0">
-                          <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
+                          <Icon className="text-custom-text-200 h-3.5 w-3.5" />
                         </div>
                         <span className="text-xs">{name}</span>
                       </button>
@@ -166,4 +157,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..332ea6c60 100644
--- a/web/components/workspace/index.ts
+++ b/web/components/workspace/index.ts
@@ -1,11 +1,17 @@
+export * from "./settings";
+export * from "./views";
 export * from "./activity-graph";
 export * from "./completed-issues-graph";
+export * from "./confirm-workspace-member-remove";
 export * from "./create-workspace-form";
 export * from "./delete-workspace-modal";
 export * from "./help-section";
 export * from "./issues-list";
 export * from "./issues-pie-chart";
 export * from "./issues-stats";
+export * from "./member-select";
+export * from "./send-workspace-invitation-modal";
 export * from "./sidebar-dropdown";
 export * from "./sidebar-menu";
 export * from "./sidebar-quick-action";
+export * from "./single-invitation";
diff --git a/web/components/workspace/issues-list.tsx b/web/components/workspace/issues-list.tsx
index 0cb8416c0..5ec0769af 100644
--- a/web/components/workspace/issues-list.tsx
+++ b/web/components/workspace/issues-list.tsx
@@ -2,14 +2,13 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { AlertTriangle } from "lucide-react";
+import { LayersIcon, Loader } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { IIssueLite } from "types";
-import { Loader } from "components/ui";
-import { LayerDiagonalIcon } from "components/icons";
 
 type Props = {
   issues: IIssueLite[] | undefined;
@@ -55,24 +54,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" && <AlertTriangle className="h-3.5 w-3.5" />}
                           {dateDifference} {dateDifference > 1 ? "days" : "day"}
                         </h5>
                         <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
@@ -87,10 +77,9 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
             ) : (
               <div className="grid h-full place-items-center">
                 <div className="my-5 flex flex-col items-center gap-4">
-                  <LayerDiagonalIcon height={60} width={60} />
+                  <LayersIcon 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-pie-chart.tsx b/web/components/workspace/issues-pie-chart.tsx
index de1e199ff..594db4175 100644
--- a/web/components/workspace/issues-pie-chart.tsx
+++ b/web/components/workspace/issues-pie-chart.tsx
@@ -35,8 +35,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
             colors={(datum) => datum.data.color}
             tooltip={(datum) => (
               <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs">
-                <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
-                {datum.datum.value}
+                <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span> {datum.datum.value}
               </div>
             )}
             margin={{
@@ -53,10 +52,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
         <div className="flex sm:block items-center gap-3 flex-wrap justify-center sm:space-y-2 sm:self-end sm:justify-self-end sm:px-8 sm:pb-8">
           {groupedIssues?.map((cell) => (
             <div key={cell.state_group} className="flex items-center gap-2">
-              <div
-                className="h-2 w-2"
-                style={{ backgroundColor: STATE_GROUP_COLORS[cell.state_group] }}
-              />
+              <div className="h-2 w-2" style={{ backgroundColor: STATE_GROUP_COLORS[cell.state_group] }} />
               <div className="capitalize text-custom-text-200 text-xs whitespace-nowrap">
                 {cell.state_group}- {cell.state_count}
               </div>
diff --git a/web/components/workspace/issues-stats.tsx b/web/components/workspace/issues-stats.tsx
index 2c874d503..22e966ac8 100644
--- a/web/components/workspace/issues-stats.tsx
+++ b/web/components/workspace/issues-stats.tsx
@@ -1,9 +1,9 @@
 // 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";
+import { Info } from "lucide-react";
 // types
 import { IUserWorkspaceDashboard } from "types";
 import { useRouter } from "next/router";
@@ -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>
               ) : (
@@ -83,7 +80,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => {
             tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
             className="w-72 border border-custom-border-200"
           >
-            <InformationCircleIcon className="h-3 w-3" />
+            <Info className="h-3 w-3" />
           </Tooltip>
         </h3>
         <ActivityGraph activities={data?.issue_activities} />
diff --git a/web/components/workspace/member-select.tsx b/web/components/workspace/member-select.tsx
new file mode 100644
index 000000000..bae16de01
--- /dev/null
+++ b/web/components/workspace/member-select.tsx
@@ -0,0 +1,132 @@
+import React, { FC, useState, Fragment } from "react";
+// popper js
+import { usePopper } from "react-popper";
+// ui
+import { Avatar, Input } from "@plane/ui";
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, Search, User2 } from "lucide-react";
+// types
+import { IWorkspaceMember } from "types";
+
+export interface IWorkspaceMemberSelect {
+  value: IWorkspaceMember | undefined;
+  onChange: (value: IWorkspaceMember) => void;
+  options: IWorkspaceMember[];
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
+  const { value, onChange, options, placeholder = "Select Member", disabled = false } = props;
+  // states
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
+  // const options = workspaceMembers?.map((member: any) => ({
+  //   value: member.member.id,
+  //   query: member.member.display_name,
+  //   content: (
+  //     <div className="flex items-center gap-2">
+  //       <Avatar user={member.member} />
+  //       {member.member.display_name}
+  //     </div>
+  //   ),
+  // }));
+
+  // const selectedOption = workspaceMembers?.find((member) => member.member.id === value);
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
+
+  const label = (
+    <div className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
+      {value ? (
+        <>
+          <Avatar name={value?.member.display_name} src={value?.member.avatar} />
+          <span className="text-xs leading-4"> {value?.member.display_name}</span>
+        </>
+      ) : (
+        <>
+          <User2 className="h-[18px] w-[18px]" />
+          <span className="text-xs leading-4">{placeholder}</span>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Listbox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={onChange} disabled={disabled}>
+      <Listbox.Button as={React.Fragment}>
+        <button
+          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"
+          }`}
+        >
+          {label}
+        </button>
+      </Listbox.Button>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs  focus:outline-none w-48 whitespace-nowrap my-1`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 border-none focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((workspaceMember: IWorkspaceMember) => (
+                  <Listbox.Option
+                    key={workspaceMember.id}
+                    value={workspaceMember}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        <div className="flex items-center gap-2">
+                          <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
+                          {workspaceMember.member.display_name}
+                        </div>
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Listbox.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>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index c9d090405..b044ec5a2 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -1,36 +1,24 @@
 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";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, CustomSelect, Input } from "@plane/ui";
 // icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Plus, X } from "lucide-react";
 // types
-import { ICurrentUserResponse } from "types";
+import { IWorkspaceBulkInviteFormData, TUserWorkspaceRole } from "types";
 // constants
 import { ROLE } from "constants/workspace";
-import { WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  workspace_slug: string;
-  user: ICurrentUserResponse | undefined;
-  onSuccess: () => void;
+  onClose: () => void;
+  onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise<void> | undefined;
 };
 
 type EmailRole = {
   email: string;
-  role: 5 | 10 | 15 | 20;
+  role: TUserWorkspaceRole;
 };
 
 type FormValues = {
@@ -46,8 +34,10 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
-  const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props;
+export const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose, onSubmit } = props;
+
+  // form info
   const {
     control,
     reset,
@@ -60,55 +50,45 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
     name: "emails",
   });
 
-  const { setToastAlert } = useToast();
-
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
+
     const timeout = setTimeout(() => {
       reset(defaultValues);
       clearTimeout(timeout);
-    }, 500);
+    }, 350);
   };
 
-  const onSubmit = async (formData: FormValues) => {
-    if (!workspace_slug) return;
+  // const onSubmit = async (formData: FormValues) => {
+  //   if (!workspaceSlug) return;
 
-    const payload = { ...formData };
+  //   return workspaceService
+  //     .inviteWorkspace(workspaceSlug, formData, user)
 
-    await workspaceService
-      .inviteWorkspace(workspace_slug, payload, user)
-      .then(async (res) => {
-        setIsOpen(false);
-        handleClose();
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Invitations sent successfully.",
-        });
-        onSuccess();
-      })
-      .catch((err) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: `${err.error}`,
-        });
-        console.log(err);
-      })
-      .finally(() => {
-        reset(defaultValues);
-        mutate(WORKSPACE_INVITATIONS);
-      });
-  };
+  //     .then(async () => {
+  //       if (onSuccess) await onSuccess();
+  //       handleClose();
+  //       setToastAlert({
+  //         type: "success",
+  //         title: "Success!",
+  //         message: "Invitations sent successfully.",
+  //       });
+  //     })
+  //     .catch((err) =>
+  //       setToastAlert({
+  //         type: "error",
+  //         title: "Error!",
+  //         message: `${err.error ?? "Something went wrong. Please try again."}`,
+  //       })
+  //     );
+  // };
 
   const appendField = () => {
     append({ email: "", role: 15 });
   };
 
   useEffect(() => {
-    if (fields.length === 0) {
-      append([{ email: "", role: 15 }]);
-    }
+    if (fields.length === 0) append([{ email: "", role: 15 }]);
   }, [fields, append]);
 
   return (
@@ -123,7 +103,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -137,7 +117,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
               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-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl opacity-100 translate-y-0 sm:scale-100">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl opacity-100 translate-y-0 sm:scale-100">
                 <form
                   onSubmit={handleSubmit(onSubmit)}
                   onKeyDown={(e) => {
@@ -145,16 +125,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 +146,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">
@@ -215,7 +196,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                               className="self-center place-items-center rounded -ml-3"
                               onClick={() => remove(index)}
                             >
-                              <XMarkIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                              <X className="h-3.5 w-3.5 text-custom-text-200" />
                             </button>
                           )}
                         </div>
@@ -229,14 +210,16 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                       className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
@@ -248,5 +231,3 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
     </Transition.Root>
   );
 };
-
-export default SendWorkspaceInvitationModal;
diff --git a/web/components/workspace/settings/index.ts b/web/components/workspace/settings/index.ts
new file mode 100644
index 000000000..fb7aa7526
--- /dev/null
+++ b/web/components/workspace/settings/index.ts
@@ -0,0 +1,3 @@
+export * from "./members-list-item";
+export * from "./members-list";
+export * from "./workspace-details";
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
new file mode 100644
index 000000000..d98846e74
--- /dev/null
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -0,0 +1,217 @@
+import { useState, FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ConfirmWorkspaceMemberRemove } from "components/workspace";
+// ui
+import { CustomSelect, Tooltip } from "@plane/ui";
+// icons
+import { ChevronDown, XCircle } from "lucide-react";
+// constants
+import { ROLE } from "constants/workspace";
+import { TUserWorkspaceRole } from "types";
+
+type Props = {
+  member: {
+    id: string;
+    memberId: string;
+    avatar: string;
+    first_name: string;
+    last_name: string;
+    email: string | undefined;
+    display_name: string;
+    role: TUserWorkspaceRole;
+    status: boolean;
+    member: boolean;
+    accountCreated: boolean;
+  };
+};
+
+export const WorkspaceMembersListItem: FC<Props> = (props) => {
+  const { member } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const {
+    workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
+    user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings },
+  } = useMobxStore();
+  const isAdmin = currentWorkspaceRole === 20;
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState(false);
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleRemoveMember = async () => {
+    if (!workspaceSlug) return;
+
+    if (member.member)
+      await removeMember(workspaceSlug.toString(), member.id)
+        .then(() => {
+          const memberId = member.memberId;
+
+          if (memberId === currentUser?.id && currentUserSettings) {
+            if (currentUserSettings.workspace?.invites > 0) router.push("/invitations");
+            else router.push("/create-workspace");
+          }
+        })
+        .catch((err) => {
+          setToastAlert({
+            type: "error",
+            title: "Error",
+            message: err?.error || "Something went wrong",
+          });
+        });
+    else
+      await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id)
+        .then(() => {
+          setToastAlert({
+            type: "success",
+            title: "Success",
+            message: "Member removed successfully",
+          });
+        })
+        .catch((err) => {
+          setToastAlert({
+            type: "error",
+            title: "Error",
+            message: err?.error || "Something went wrong",
+          });
+        })
+        .finally(() => {
+          mutate(`WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`, (prevData: any) => {
+            if (!prevData) return prevData;
+
+            return prevData.filter((item: any) => item.id !== member.id);
+          });
+        });
+  };
+
+  if (!currentWorkspaceMemberInfo) return null;
+
+  return (
+    <>
+      <ConfirmWorkspaceMemberRemove
+        isOpen={removeMemberModal}
+        onClose={() => setRemoveMemberModal(false)}
+        data={member}
+        onSubmit={handleRemoveMember}
+      />
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
+        <div className="flex items-center gap-x-4 gap-y-2">
+          {member.avatar && member.avatar !== "" ? (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
+                <img
+                  src={member.avatar}
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                  alt={member.display_name || member.email}
+                />
+              </a>
+            </Link>
+          ) : (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
+                {(member.email ?? member.display_name ?? "?")[0]}
+              </a>
+            </Link>
+          )}
+          <div>
+            {member.member ? (
+              <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+                <a className="text-sm font-medium">
+                  {member.first_name} {member.last_name}
+                </a>
+              </Link>
+            ) : (
+              <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
+            )}
+            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          {!member?.status && (
+            <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs text-yellow-500 font-medium">
+              <p>Pending</p>
+            </div>
+          )}
+          {member?.status && !member?.accountCreated && (
+            <div className="flex items-center justify-center rounded bg-blue-500/20 px-2.5 py-1 text-center text-xs text-blue-500 font-medium">
+              <p>Account not created</p>
+            </div>
+          )}
+          <CustomSelect
+            customButton={
+              <div className="flex item-center gap-1 px-2 py-0.5 rounded">
+                <span
+                  className={`flex items-center text-xs font-medium rounded ${
+                    member.memberId !== currentWorkspaceMemberInfo.member ? "" : "text-custom-sidebar-text-400"
+                  }`}
+                >
+                  {ROLE[member.role as keyof typeof ROLE]}
+                </span>
+                {member.memberId !== currentWorkspaceMemberInfo.member && (
+                  <span className="grid place-items-center">
+                    <ChevronDown className="h-3 w-3" />
+                  </span>
+                )}
+              </div>
+            }
+            value={member.role}
+            onChange={(value: TUserWorkspaceRole | undefined) => {
+              if (!workspaceSlug || !value) return;
+
+              updateMember(workspaceSlug.toString(), member.id, {
+                role: value,
+              }).catch(() => {
+                setToastAlert({
+                  type: "error",
+                  title: "Error!",
+                  message: "An error occurred while updating member role. Please try again.",
+                });
+              });
+            }}
+            disabled={
+              member.memberId === currentWorkspaceMemberInfo.member ||
+              !member.status ||
+              Boolean(currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < member.role)
+            }
+            placement="bottom-end"
+          >
+            {Object.keys(ROLE).map((key) => {
+              if (currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < parseInt(key))
+                return null;
+
+              return (
+                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
+                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                </CustomSelect.Option>
+              );
+            })}
+          </CustomSelect>
+          {isAdmin && (
+            <Tooltip
+              tooltipContent={
+                member.memberId === currentWorkspaceMemberInfo.member ? "Leave workspace" : "Remove member"
+              }
+            >
+              <button
+                type="button"
+                onClick={() => setRemoveMemberModal(true)}
+                className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+              >
+                <XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx
new file mode 100644
index 000000000..b4f263c49
--- /dev/null
+++ b/web/components/workspace/settings/members-list.tsx
@@ -0,0 +1,68 @@
+import { FC } 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 { WorkspaceMembersListItem } from "components/workspace";
+// ui
+import { Loader } from "@plane/ui";
+
+export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ searchQuery }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const {
+    workspaceMember: {
+      workspaceMembers,
+      workspaceMembersWithInvitations,
+      workspaceMemberInvitations,
+      fetchWorkspaceMemberInvitations,
+    },
+    user: { currentWorkspaceMemberInfo },
+  } = useMobxStore();
+  // fetching workspace invitations
+  useSWR(
+    workspaceSlug ? `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => fetchWorkspaceMemberInvitations(workspaceSlug.toString()) : null
+  );
+
+  const searchedMembers = workspaceMembersWithInvitations?.filter((member: any) => {
+    const email = member.email?.toLowerCase();
+    const displayName = member.display_name.toLowerCase();
+    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+
+    return (
+      displayName.includes(searchQuery.toLowerCase()) ||
+      fullName.includes(searchQuery.toLowerCase()) ||
+      email?.includes(searchQuery.toLowerCase())
+    );
+  });
+
+  if (
+    !workspaceMembers ||
+    !workspaceMemberInvitations ||
+    !workspaceMembersWithInvitations ||
+    !currentWorkspaceMemberInfo
+  )
+    return (
+      <Loader className="space-y-5">
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+      </Loader>
+    );
+
+  return (
+    <div className="divide-y-[0.5px] divide-custom-border-200">
+      {workspaceMembersWithInvitations.length > 0
+        ? searchedMembers?.map((member) => <WorkspaceMembersListItem key={member.id} member={member} />)
+        : null}
+      {searchedMembers?.length === 0 && (
+        <h4 className="text-md text-custom-text-400 text-center mt-20">No matching member</h4>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
new file mode 100644
index 000000000..69034b201
--- /dev/null
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -0,0 +1,307 @@
+import { useEffect, useState, FC } from "react";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Disclosure, Transition } from "@headlessui/react";
+import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { FileService } from "services/file.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteWorkspaceModal } from "components/workspace";
+import { ImageUploadModal } from "components/core";
+// ui
+import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
+// types
+import { IWorkspace } from "types";
+// constants
+import { ORGANIZATION_SIZE } from "constants/workspace";
+
+const defaultValues: Partial<IWorkspace> = {
+  name: "",
+  url: "",
+  organization_size: "2-10",
+  logo: null,
+};
+
+// services
+const fileService = new FileService();
+
+export const WorkspaceDetails: FC = observer(() => {
+  // states
+  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const [isImageRemoving, setIsImageRemoving] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // store
+  const {
+    workspace: { currentWorkspace, updateWorkspace },
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
+  const isAdmin = currentWorkspaceRole === 20;
+  // hooks
+  const { setToastAlert } = useToast();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    reset,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<IWorkspace>({
+    defaultValues: { ...defaultValues, ...currentWorkspace },
+  });
+
+  const onSubmit = async (formData: IWorkspace) => {
+    if (!currentWorkspace) return;
+
+    const payload: Partial<IWorkspace> = {
+      logo: formData.logo,
+      name: formData.name,
+      organization_size: formData.organization_size,
+    };
+
+    await updateWorkspace(currentWorkspace.slug, payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Workspace updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!currentWorkspace || !url) return;
+
+    setIsImageRemoving(true);
+
+    fileService.deleteFile(currentWorkspace.id, url).then(() => {
+      updateWorkspace(currentWorkspace.slug, { logo: "" })
+        .then(() => {
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Workspace picture removed successfully.",
+          });
+          setIsImageUploadModalOpen(false);
+        })
+        .catch(() => {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "There was some error in deleting your profile picture. Please try again.",
+          });
+        })
+        .finally(() => setIsImageRemoving(false));
+    });
+  };
+
+  useEffect(() => {
+    if (currentWorkspace) reset({ ...currentWorkspace });
+  }, [currentWorkspace, reset]);
+
+  if (!currentWorkspace)
+    return (
+      <div className="grid place-items-center h-full w-full px-4 sm:px-0">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <DeleteWorkspaceModal
+        isOpen={deleteWorkspaceModal}
+        onClose={() => setDeleteWorkspaceModal(false)}
+        data={currentWorkspace}
+      />
+      <ImageUploadModal
+        isOpen={isImageUploadModalOpen}
+        onClose={() => setIsImageUploadModalOpen(false)}
+        isRemoving={isImageRemoving}
+        handleDelete={() => handleDelete(currentWorkspace?.logo)}
+        onSuccess={(imageUrl) => {
+          setIsImageUploading(true);
+          setValue("logo", imageUrl);
+          setIsImageUploadModalOpen(false);
+          handleSubmit(onSubmit)().then(() => setIsImageUploading(false));
+        }}
+        value={watch("logo")}
+      />
+      <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-100">
+          <div className="flex flex-col gap-1">
+            <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
+                    src={watch("logo")!}
+                    className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
+                    alt="Workspace Logo"
+                  />
+                </div>
+              ) : (
+                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                  {currentWorkspace?.name?.charAt(0) ?? "N"}
+                </div>
+              )}
+            </button>
+          </div>
+          <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://", "")
+            }/${currentWorkspace.slug}`}</span>
+            <div className="flex item-center gap-2.5">
+              <button
+                className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium"
+                onClick={() => setIsImageUploadModalOpen(true)}
+                disabled={!isAdmin}
+              >
+                {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
+                  <>
+                    <Pencil className="h-3 w-3" />
+                    Edit logo
+                  </>
+                ) : (
+                  "Upload logo"
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-8 my-10">
+          <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>
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: "Name is required",
+                  maxLength: {
+                    value: 80,
+                    message: "Workspace name should not exceed 80 characters",
+                  },
+                }}
+                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>
+
+            <div className="flex flex-col gap-1 ">
+              <h4 className="text-sm">Company Size</h4>
+              <Controller
+                name="organization_size"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
+                    width="w-full"
+                    buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                    input
+                    disabled={!isAdmin}
+                  >
+                    {ORGANIZATION_SIZE.map((item) => (
+                      <CustomSelect.Option key={item} value={item}>
+                        {item}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1 ">
+              <h4 className="text-sm">Workspace URL</h4>
+              <Controller
+                control={control}
+                name="url"
+                render={({ field: { onChange, ref } }) => (
+                  <Input
+                    id="url"
+                    name="url"
+                    type="url"
+                    value={`${
+                      typeof window !== "undefined" &&
+                      window.location.origin.replace("http://", "").replace("https://", "")
+                    }/${currentWorkspace.slug}`}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.url)}
+                    className="w-full"
+                    disabled
+                  />
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between py-2">
+            <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
+              {isSubmitting ? "Updating..." : "Update Workspace"}
+            </Button>
+          </div>
+        </div>
+        {isAdmin && (
+          <Disclosure as="div" className="border-t border-custom-border-100">
+            {({ open }) => (
+              <div className="w-full">
+                <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
+                  <span className="text-lg tracking-tight">Delete Workspace</span>
+                  {/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
+                  {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+                </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 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>
+                        <Button variant="danger" onClick={() => setDeleteWorkspaceModal(true)}>
+                          Delete my workspace
+                        </Button>
+                      </div>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            )}
+          </Disclosure>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index f3bbc029b..dfa45d9bf 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -1,28 +1,19 @@
 import { Fragment } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
-// headless ui
 import { Menu, Transition } from "@headlessui/react";
-// next-themes
-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";
-// components
-import { Avatar, Icon, Loader } from "components/ui";
-// icons
-import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { truncateText } from "helpers/string.helper";
-// types
-import { IWorkspace } from "types";
+import { Check, ChevronDown, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { AuthService } from "services/auth.service";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// types
+import { IWorkspace } from "types";
 
 // Static Data
 const userLinks = (workspaceSlug: string, userId: string) => [
@@ -43,37 +34,35 @@ const userLinks = (workspaceSlug: string, userId: string) => [
 const profileLinks = (workspaceSlug: string, userId: string) => [
   {
     name: "View profile",
-    icon: "account_circle",
+    icon: UserCircle2,
     link: `/${workspaceSlug}/profile/${userId}`,
   },
   {
     name: "Settings",
-    icon: "settings",
+    icon: Settings,
     link: `/${workspaceSlug}/me/profile`,
   },
 ];
 
-export const WorkspaceSidebarDropdown = () => {
-  const store: any = useMobxStore();
+const authService = new AuthService();
 
+export const WorkspaceSidebarDropdown = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
-  const { user, mutateUser } = useUser();
-
-  const { setTheme } = useTheme();
-
+  // store
+  const {
+    theme: { sidebarCollapsed },
+    workspace: { workspaces, currentWorkspace: activeWorkspace },
+    user: { currentUser, updateCurrentUser },
+  } = useMobxStore();
+  // hooks
   const { setToastAlert } = useToast();
 
-  const { activeWorkspace, workspaces } = useWorkspaces();
-
   const handleWorkspaceNavigation = (workspace: IWorkspace) => {
-    userService
-      .updateUser({
-        last_workspace_id: workspace?.id,
-      })
+    updateCurrentUser({
+      last_workspace_id: workspace?.id,
+    })
       .then(() => {
-        mutateUser();
         router.push(`/${workspace.slug}/`);
       })
       .catch(() =>
@@ -86,12 +75,10 @@ export const WorkspaceSidebarDropdown = () => {
   };
 
   const handleSignOut = async () => {
-    await authenticationService
+    await authService
       .signOut()
       .then(() => {
-        mutateUser(undefined);
         router.push("/");
-        setTheme("system");
       })
       .catch(() =>
         setToastAlert({
@@ -103,147 +90,170 @@ export const WorkspaceSidebarDropdown = () => {
   };
 
   return (
-    <div className="inline-flex items-center gap-2 px-4 pt-4">
-      <Menu as="div" className="relative col-span-4 inline-block w-full text-left">
-        <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-sm text-sm font-medium focus:outline-none">
-          <div
-            className={`flex w-full items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 ${
-              store?.theme?.sidebarCollapsed ? "justify-center" : ""
-            }`}
-          >
-            <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
-              {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
-                <img
-                  src={activeWorkspace.logo}
-                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                  alt="Workspace Logo"
-                />
-              ) : (
-                activeWorkspace?.name?.charAt(0) ?? "..."
-              )}
-            </div>
-
-            {!store?.theme?.sidebarCollapsed && (
-              <h4 className="text-custom-text-100">
-                {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
-              </h4>
-            )}
-          </div>
-        </Menu.Button>
-
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items
-            className="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md
-          border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none"
-          >
-            <div className="flex flex-col items-start justify-start gap-3 p-3">
-              <span className="text-sm font-medium text-custom-sidebar-text-200">Workspace</span>
-              {workspaces ? (
-                <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
-                  {workspaces.length > 0 ? (
-                    workspaces.map((workspace) => (
-                      <Menu.Item key={workspace.id}>
-                        {() => (
-                          <button
-                            type="button"
-                            onClick={() => handleWorkspaceNavigation(workspace)}
-                            className="flex w-full items-center justify-between gap-1 p-1 rounded-md text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
-                          >
-                            <div className="flex items-center justify-start gap-2.5">
-                              <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
-                                {workspace?.logo && workspace.logo !== "" ? (
-                                  <img
-                                    src={workspace.logo}
-                                    className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                                    alt="Workspace Logo"
-                                  />
-                                ) : (
-                                  workspace?.name?.charAt(0) ?? "..."
-                                )}
-                              </span>
-
-                              <h5
-                                className={`text-sm ${
-                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
-                                }`}
-                              >
-                                {truncateText(workspace.name, 18)}
-                              </h5>
-                            </div>
-                            <span className="p-1">
-                              <CheckIcon
-                                className={`h-3 w-3.5 text-custom-sidebar-text-100 ${
-                                  workspace.id === activeWorkspace?.id ? "opacity-100" : "opacity-0"
-                                }`}
-                              />
-                            </span>
-                          </button>
-                        )}
-                      </Menu.Item>
-                    ))
+    <div className="flex items-center gap-x-8 gap-y-2 px-4 pt-4">
+      <Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate">
+        {({ open }) => (
+          <>
+            <Menu.Button className="text-custom-sidebar-text-200 rounded-md hover:bg-custom-sidebar-background-80 text-sm font-medium focus:outline-none w-full h-full truncate">
+              <div
+                className={`flex items-center gap-x-2 rounded p-1 truncate ${sidebarCollapsed ? "justify-center" : ""}`}
+              >
+                <div
+                  className={`relative grid h-6 w-6 place-items-center uppercase flex-shrink-0 ${
+                    !activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
+                  }`}
+                >
+                  {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
+                    <img
+                      src={activeWorkspace.logo}
+                      className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                      alt="Workspace Logo"
+                    />
                   ) : (
-                    <p>No workspace found!</p>
+                    activeWorkspace?.name?.charAt(0) ?? "..."
                   )}
+                </div>
+
+                {!sidebarCollapsed && (
+                  <h4 className="text-custom-text-100 font-medium text-base truncate">
+                    {activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
+                  </h4>
+                )}
+
+                {!sidebarCollapsed && (
+                  <ChevronDown
+                    className={`h-4 w-4 mx-1 flex-shrink-0 ${
+                      open ? "rotate-180" : ""
+                    } text-custom-sidebar-text-400 duration-300`}
+                  />
+                )}
+              </div>
+            </Menu.Button>
+
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items
+                className="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md
+              border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none"
+              >
+                <div className="flex flex-col items-start justify-start gap-3 p-3">
+                  <span className="text-sm font-medium text-custom-sidebar-text-200">Workspace</span>
+                  {workspaces ? (
+                    <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
+                      {workspaces.length > 0 ? (
+                        workspaces.map((workspace: IWorkspace) => (
+                          <Menu.Item key={workspace.id}>
+                            {() => (
+                              <button
+                                type="button"
+                                onClick={() => handleWorkspaceNavigation(workspace)}
+                                className="flex w-full items-center justify-between gap-1 p-1 rounded-md text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
+                              >
+                                <div className="flex items-center justify-start gap-2.5 truncate">
+                                  <span
+                                    className={`relative flex h-6 w-6 items-center justify-center  p-2 text-xs uppercase flex-shrink-0 ${
+                                      !workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                                    }`}
+                                  >
+                                    {workspace?.logo && workspace.logo !== "" ? (
+                                      <img
+                                        src={workspace.logo}
+                                        className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                                        alt="Workspace Logo"
+                                      />
+                                    ) : (
+                                      workspace?.name?.charAt(0) ?? "..."
+                                    )}
+                                  </span>
+
+                                  <h5
+                                    className={`text-sm truncate ${
+                                      workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                    }`}
+                                  >
+                                    {workspace.name}
+                                  </h5>
+                                </div>
+                                {workspace.id === activeWorkspace?.id && (
+                                  <span className="p-1 flex-shrink-0">
+                                    <Check className="h-3 w-3.5 text-custom-sidebar-text-100" />
+                                  </span>
+                                )}
+                              </button>
+                            )}
+                          </Menu.Item>
+                        ))
+                      ) : (
+                        <p>No workspace found!</p>
+                      )}
+                      <Menu.Item
+                        as="button"
+                        type="button"
+                        onClick={() => {
+                          router.push("/create-workspace");
+                        }}
+                        className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                      >
+                        <Plus className="h-4 w-4" />
+                        Create Workspace
+                      </Menu.Item>
+                    </div>
+                  ) : (
+                    <div className="w-full">
+                      <Loader className="space-y-2">
+                        <Loader.Item height="30px" />
+                        <Loader.Item height="30px" />
+                      </Loader>
+                    </div>
+                  )}
+                </div>
+                <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
+                  {userLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
+                    <Menu.Item
+                      key={index}
+                      as="div"
+                      onClick={() => {
+                        router.push(link.href);
+                      }}
+                      className="flex w-full items-center cursor-pointer justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                    >
+                      {link.name}
+                    </Menu.Item>
+                  ))}
+                </div>
+                <div className="w-full border-t border-t-custom-sidebar-border-100 px-3 py-2">
                   <Menu.Item
                     as="button"
                     type="button"
-                    onClick={() => {
-                      router.push("/create-workspace");
-                    }}
-                    className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                    className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80"
+                    onClick={handleSignOut}
                   >
-                    <PlusIcon className="h-4 w-4" />
-                    Create Workspace
+                    Sign out
                   </Menu.Item>
                 </div>
-              ) : (
-                <div className="w-full">
-                  <Loader className="space-y-2">
-                    <Loader.Item height="30px" />
-                    <Loader.Item height="30px" />
-                  </Loader>
-                </div>
-              )}
-            </div>
-            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
-              {userLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
-                <Menu.Item
-                  key={index}
-                  as="div"
-                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                >
-                  <Link href={link.href}>
-                    <a className="w-full">{link.name}</a>
-                  </Link>
-                </Menu.Item>
-              ))}
-            </div>
-            <div className="w-full border-t border-t-custom-sidebar-border-100 px-3 py-2">
-              <Menu.Item
-                as="button"
-                type="button"
-                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80"
-                onClick={handleSignOut}
-              >
-                Sign out
-              </Menu.Item>
-            </div>
-          </Menu.Items>
-        </Transition>
+              </Menu.Items>
+            </Transition>
+          </>
+        )}
       </Menu>
 
-      {!store?.theme?.sidebarCollapsed && (
+      {!sidebarCollapsed && (
         <Menu as="div" className="relative flex-shrink-0">
           <Menu.Button className="grid place-items-center outline-none">
-            <Avatar user={user} height="28px" width="28px" fontSize="14px" />
+            <Avatar
+              name={currentUser?.display_name}
+              src={currentUser?.avatar}
+              size={24}
+              shape="square"
+              className="!text-base"
+            />
           </Menu.Button>
 
           <Transition
@@ -260,19 +270,17 @@ export const WorkspaceSidebarDropdown = () => {
           border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 divide-y divide-custom-sidebar-border-200 shadow-lg text-xs outline-none"
             >
               <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>
-                  )
-                )}
+                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+                {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.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">
+                        <link.icon className="h-4 w-4 stroke-[1.5]" />
+                        {link.name}
+                      </a>
+                    </Link>
+                  </Menu.Item>
+                ))}
               </div>
               <div className="pt-2">
                 <Menu.Item
@@ -281,7 +289,7 @@ export const WorkspaceSidebarDropdown = () => {
                   className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
                   onClick={handleSignOut}
                 >
-                  <Icon iconName="logout" className="!text-lg !leading-5" />
+                  <LogOut className="h-4 w-4 stroke-[1.5]" />
                   Sign out
                 </Menu.Item>
               </div>
@@ -291,4 +299,4 @@ export const WorkspaceSidebarDropdown = () => {
       )}
     </div>
   );
-};
+});
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index d6c6ee3f9..360277d5a 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -1,59 +1,48 @@
 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 { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 
 const workspaceLinks = (workspaceSlug: string) => [
   {
-    Icon: GridViewOutlined,
+    Icon: LayoutGrid,
     name: "Dashboard",
     href: `/${workspaceSlug}`,
   },
   {
-    Icon: BarChartRounded,
+    Icon: BarChart2,
     name: "Analytics",
     href: `/${workspaceSlug}/analytics`,
   },
   {
-    Icon: WorkOutlineOutlined,
+    Icon: Briefcase,
     name: "Projects",
     href: `/${workspaceSlug}/projects`,
   },
   {
-    Icon: TaskAltOutlined,
+    Icon: CheckCircle,
     name: "All Issues",
     href: `/${workspaceSlug}/workspace-views/all-issues`,
   },
 ];
 
-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}
+                  {<link.Icon className="h-4 w-4" />}
+                  {!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..9ae9ccde8 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -1,22 +1,25 @@
 import React, { useState } from "react";
 
 // ui
-import { Icon } from "components/ui";
-import { ChevronDown, PenSquare } from "lucide-react";
+import { ChevronDown, PenSquare, Search } from "lucide-react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { CreateUpdateDraftIssueModal } from "components/issues";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 
-export const WorkspaceSidebarQuickAction = () => {
-  const store: any = useMobxStore();
-
+export const WorkspaceSidebarQuickAction = observer(() => {
+  // states
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
 
+  const { theme: themeStore, commandPalette: commandPaletteStore } = useMobxStore();
+
   const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
 
+  const isSidebarCollapsed = themeStore.sidebarCollapsed;
+
   return (
     <>
       <CreateUpdateDraftIssueModal
@@ -32,47 +35,35 @@ export const WorkspaceSidebarQuickAction = () => {
 
       <div
         className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
-          store?.theme?.sidebarCollapsed ? "flex-col gap-1" : "gap-2"
+          isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
         }`}
       >
         <div
           className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
-            store?.theme?.sidebarCollapsed
+            isSidebarCollapsed
               ? "px-2 hover:bg-custom-sidebar-background-80"
-              : "px-3 shadow border-[0.5px] border-custom-border-300"
+              : "px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
           }`}
         >
           <button
             type="button"
-            className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 ${
-              store?.theme?.sidebarCollapsed ? "justify-center" : ""
+            className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none ${
+              isSidebarCollapsed ? "justify-center" : ""
             }`}
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
+            onClick={() => commandPaletteStore.toggleCreateIssueModal(true)}
           >
-            <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>
-            )}
+            <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
+            {!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
           </button>
 
           {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
             <>
-              <div
-                className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${
-                  store?.theme?.sidebarCollapsed ? "hidden" : "block"
-                }`}
-              />
+              <div className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${isSidebarCollapsed ? "hidden" : "block"}`} />
 
               <button
                 type="button"
                 className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${
-                  store?.theme?.sidebarCollapsed ? "hidden" : "block"
+                  isSidebarCollapsed ? "hidden" : "block"
                 }`}
               >
                 <ChevronDown
@@ -83,7 +74,7 @@ export const WorkspaceSidebarQuickAction = () => {
 
               <div
                 className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${
-                  store?.theme?.sidebarCollapsed ? "top-[5.5rem]" : "top-24"
+                  isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
                 }`}
               >
                 <div className="w-full h-full">
@@ -91,10 +82,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>
@@ -104,19 +92,16 @@ export const WorkspaceSidebarQuickAction = () => {
         </div>
 
         <button
-          className={`flex items-center justify-center rounded flex-shrink-0 p-2 ${
-            store?.theme?.sidebarCollapsed
+          className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none ${
+            isSidebarCollapsed
               ? "hover:bg-custom-sidebar-background-80"
-              : "shadow border-[0.5px] border-custom-border-300"
+              : "shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
           }`}
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "k", ctrlKey: true, metaKey: true });
-            document.dispatchEvent(e);
-          }}
+          onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
         >
-          <Icon iconName="search" className="!text-lg !leading-4 text-custom-sidebar-text-300" />
+          <Search className="h-4 w-4 text-custom-sidebar-text-300" />
         </button>
       </div>
     </>
   );
-};
+});
diff --git a/web/components/workspace/single-invitation.tsx b/web/components/workspace/single-invitation.tsx
index 0621c64b3..4db6c5f18 100644
--- a/web/components/workspace/single-invitation.tsx
+++ b/web/components/workspace/single-invitation.tsx
@@ -9,11 +9,7 @@ type Props = {
   handleInvitation: any;
 };
 
-const SingleInvitation: React.FC<Props> = ({
-  invitation,
-  invitationsRespond,
-  handleInvitation,
-}) => (
+const SingleInvitation: React.FC<Props> = ({ invitation, invitationsRespond, handleInvitation }) => (
   <li>
     <label
       className={`group relative flex cursor-pointer items-start space-x-3 border-2 border-transparent py-4`}
@@ -53,10 +49,7 @@ const SingleInvitation: React.FC<Props> = ({
               : "bg-custom-primary text-white"
           } text-sm px-4 py-2 border border-custom-border-200 rounded-3xl`}
           onClick={() => {
-            handleInvitation(
-              invitation,
-              invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
-            );
+            handleInvitation(invitation, invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted");
           }}
         >
           {invitationsRespond.includes(invitation.id) ? "Invitation Accepted" : "Accept Invitation"}
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 58%
rename from web/components/workspace/views/delete-workspace-view-modal.tsx
rename to web/components/workspace/views/delete-view-modal.tsx
index 6030f630f..6d91bdb55 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";
+import { AlertTriangle } from "lucide-react";
 // 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 (
@@ -82,7 +71,7 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -96,40 +85,33 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <AlertTriangle 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" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" tabIndex={1} 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..f6c6de2d2 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,30 @@ 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 {
-    register,
+    workspace: workspaceStore,
+    project: projectStore,
+    workspaceMember: { workspaceMembers },
+  } = useMobxStore();
+
+  const {
     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 +56,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 +64,124 @@ 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}
+                    members={workspaceMembers?.map((m) => m.member) ?? 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={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" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" 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..6406a994d
--- /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 { Plus } 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)}
+        >
+          <Plus 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..ce91456a2 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 (
@@ -125,7 +112,7 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -139,11 +126,10 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
               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-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <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..867ce3b5e
--- /dev/null
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { Pencil, Trash2 } from "lucide-react";
+// components
+import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
+// ui
+import { CustomMenu, PhotoFilterIcon } from "@plane/ui";
+// 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">
+                  <PhotoFilterIcon className="h-3.5 w-3.5" />
+                </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">
+                        <Pencil 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">
+                        <Trash2 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/crisp.tsx b/web/constants/crisp.tsx
index 8c50893dc..90dfda7c7 100644
--- a/web/constants/crisp.tsx
+++ b/web/constants/crisp.tsx
@@ -1,5 +1,7 @@
-import useUser from "hooks/use-user";
 import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
 
 declare global {
   interface Window {
@@ -8,16 +10,15 @@ declare global {
   }
 }
 
-const Crisp = () => {
-  const { user } = useUser();
+const Crisp = observer(() => {
+  const {
+    user: { currentUser },
+  } = useMobxStore();
 
   const validateCurrentUser = useCallback(() => {
-    const currentUser = user ? user : null;
-
-    if (currentUser && currentUser.email) return currentUser.email;
-
+    if (currentUser) return currentUser.email;
     return null;
-  }, [user]);
+  }, [currentUser]);
 
   useEffect(() => {
     if (typeof window && validateCurrentUser()) {
@@ -40,5 +41,5 @@ const Crisp = () => {
   }, [validateCurrentUser]);
 
   return <></>;
-};
+});
 export default Crisp;
diff --git a/web/constants/cycle.tsx b/web/constants/cycle.tsx
new file mode 100644
index 000000000..697dc3660
--- /dev/null
+++ b/web/constants/cycle.tsx
@@ -0,0 +1,79 @@
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+
+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_VIEW_LAYOUTS = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "board",
+    icon: LayoutGrid,
+    title: "Grid layout",
+  },
+  {
+    key: "gantt",
+    icon: GanttChartSquare,
+    title: "Gantt layout",
+  },
+];
+
+export const CYCLE_STATUS: {
+  label: string;
+  value: "current" | "upcoming" | "completed" | "draft";
+  color: string;
+  textColor: string;
+  bgColor: string;
+}[] = [
+  {
+    label: "day left",
+    value: "current",
+    color: "#F59E0B",
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    label: "Yet to start",
+    value: "upcoming",
+    color: "#3F76FF",
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    label: "Completed",
+    value: "completed",
+    color: "#16A34A",
+    textColor: "text-green-600",
+    bgColor: "bg-green-50",
+  },
+  {
+    label: "Draft",
+    value: "draft",
+    color: "#525252",
+    textColor: "text-custom-text-300",
+    bgColor: "bg-custom-background-90",
+  },
+];
diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts
index 431b6aafc..9ee4f630d 100644
--- a/web/constants/fetch-keys.ts
+++ b/web/constants/fetch-keys.ts
@@ -6,6 +6,7 @@ const paramsToKey = (params: any) => {
     state,
     state_group,
     priority,
+    mentions,
     assignees,
     created_by,
     labels,
@@ -22,6 +23,7 @@ const paramsToKey = (params: any) => {
   let stateKey = state ? state.split(",") : [];
   let stateGroupKey = state_group ? state_group.split(",") : [];
   let priorityKey = priority ? priority.split(",") : [];
+  let mentionsKey = mentions ? mentions.split(",") : [];
   let assigneesKey = assignees ? assignees.split(",") : [];
   let createdByKey = created_by ? created_by.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
@@ -40,37 +42,16 @@ const paramsToKey = (params: any) => {
   stateGroupKey = stateGroupKey.sort().join("_");
   priorityKey = priorityKey.sort().join("_");
   assigneesKey = assigneesKey.sort().join("_");
+  mentionsKey = mentionsKey.sort().join("_");
   createdByKey = createdByKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
   subscriberKey = subscriberKey.sort().join("_");
 
-  return `${layoutKey}_${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}_${subscriberKey}`;
-};
-
-const inboxParamsToKey = (params: any) => {
-  const { priority, inbox_status } = params;
-
-  let priorityKey = priority ? priority.split(",") : [];
-  let inboxStatusKey = inbox_status ? inbox_status.split(",") : [];
-
-  // sorting each keys in ascending order
-  priorityKey = priorityKey.sort().join("_");
-  inboxStatusKey = inboxStatusKey.sort().join("_");
-
-  return `${priorityKey}_${inboxStatusKey}`;
+  return `${layoutKey}_${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${mentionsKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}_${subscriberKey}`;
 };
 
 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,19 +80,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_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_INVITATIONS = "WORKSPACE_INVITATIONS";
-export const WORKSPACE_INVITATION_WITH_EMAIL = (workspaceSlug: string) =>
-  `WORKSPACE_INVITATION_WITH_EMAIL_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) => `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_INVITATIONS = (workspaceSlug: string) => `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`;
+export const WORKSPACE_INVITATION = (invitationId: string) => `WORKSPACE_INVITATION_${invitationId}`;
 export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
 
 export const PROJECTS_LIST = (
@@ -122,18 +96,12 @@ 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()}`;
 
 export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId.toUpperCase()}`;
-export const PROJECT_MEMBERS_WITH_EMAIL = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_MEMBERS_WITH_EMAIL_${workspaceSlug}_${projectId.toUpperCase()}`;
-export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS";
-export const PROJECT_INVITATIONS_WITH_EMAIL = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_INVITATIONS_WITH_EMAIL_${workspaceSlug}_${projectId.toUpperCase()}`;
+export const PROJECT_INVITATIONS = (projectId: string) => `PROJECT_INVITATIONS_${projectId.toString()}`;
 
 export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
   `PROJECT_ISSUES_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}`;
@@ -160,44 +128,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 +169,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()}`;
@@ -243,25 +192,11 @@ export const VIEW_ISSUES = (viewId: string, params: any) => {
   return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
 };
 
-// inbox
-export const INBOX_LIST = (projectId: string) => `INBOX_LIST_${projectId.toUpperCase()}`;
-export const INBOX_DETAILS = (inboxId: string) => `INBOX_DETAILS_${inboxId.toUpperCase()}`;
-export const INBOX_ISSUES = (inboxId: string, params?: any) => {
-  if (!params) return `INBOX_ISSUES_${inboxId.toUpperCase()}`;
-
-  const paramsKey = inboxParamsToKey(params);
-
-  return `INBOX_ISSUES_${inboxId.toUpperCase()}_${paramsKey.toUpperCase()}`;
-};
-export const INBOX_ISSUE_DETAILS = (inboxId: string, issueId: string) =>
-  `INBOX_ISSUE_DETAILS_${inboxId.toUpperCase()}_${issueId.toUpperCase()}`;
-
 // Issues
 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 +226,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 +245,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 +256,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 +298,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..5ba0f48a0 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -1,121 +1,418 @@
-export const GROUP_BY_OPTIONS: Array<{
-  name: string;
+// icons
+import { Calendar, GanttChartSquare, 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: GanttChartSquare },
+];
 
-  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: "mentions", title: "Mentions" },
+  { 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 };
+} = {
+  profile_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  archived_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  draft_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  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", "mentions", "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", "mentions", "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", "mentions", "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", "mentions", "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", "mentions", "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;
+};
+
+// issue reactions
+export const issueReactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
+
+export const groupReactionEmojis = (reactions: any) => {
+  let _groupedEmojis: any = {};
+
+  issueReactionEmojis.map((_r) => {
+    _groupedEmojis = { ..._groupedEmojis, [_r]: [] };
+  });
+
+  if (reactions && reactions.length > 0) {
+    reactions.map((_reaction: any) => {
+      _groupedEmojis = {
+        ..._groupedEmojis,
+        [_reaction.reaction]: [..._groupedEmojis[_reaction.reaction], _reaction],
+      };
+    });
+  }
+
+  return _groupedEmojis;
 };
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/module.ts b/web/constants/module.ts
index 058171328..849974084 100644
--- a/web/constants/module.ts
+++ b/web/constants/module.ts
@@ -1,3 +1,4 @@
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
 // types
 import { TModuleStatus } from "types";
 
@@ -5,11 +6,67 @@ export const MODULE_STATUS: {
   label: string;
   value: TModuleStatus;
   color: string;
+  textColor: string;
+  bgColor: string;
 }[] = [
-  { label: "Backlog", value: "backlog", color: "#a3a3a2" },
-  { label: "Planned", value: "planned", color: "#3f76ff" },
-  { label: "In Progress", value: "in-progress", color: "#f39e1f" },
-  { label: "Paused", value: "paused", color: "#525252" },
-  { label: "Completed", value: "completed", color: "#16a34a" },
-  { label: "Cancelled", value: "cancelled", color: "#ef4444" },
+  {
+    label: "Backlog",
+    value: "backlog",
+    color: "#a3a3a2",
+    textColor: "text-custom-text-400",
+    bgColor: "bg-custom-background-80",
+  },
+  {
+    label: "Planned",
+    value: "planned",
+    color: "#3f76ff",
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    label: "In Progress",
+    value: "in-progress",
+    color: "#f39e1f",
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    label: "Paused",
+    value: "paused",
+    color: "#525252",
+    textColor: "text-custom-text-300",
+    bgColor: "bg-custom-background-90",
+  },
+  {
+    label: "Completed",
+    value: "completed",
+    color: "#16a34a",
+    textColor: "text-green-600",
+    bgColor: "bg-green-100",
+  },
+  {
+    label: "Cancelled",
+    value: "cancelled",
+    color: "#ef4444",
+    textColor: "text-red-500",
+    bgColor: "bg-red-50",
+  },
+];
+
+export const MODULE_VIEW_LAYOUTS: { key: "list" | "grid" | "gantt_chart"; icon: any; title: string }[] = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "grid",
+    icon: LayoutGrid,
+    title: "Grid layout",
+  },
+  {
+    key: "gantt_chart",
+    icon: GanttChartSquare,
+    title: "Gantt layout",
+  },
 ];
diff --git a/web/constants/page.ts b/web/constants/page.ts
new file mode 100644
index 000000000..424f1b59c
--- /dev/null
+++ b/web/constants/page.ts
@@ -0,0 +1,37 @@
+import { LayoutGrid, List } from "lucide-react";
+
+export const PAGE_VIEW_LAYOUTS = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "detailed",
+    icon: LayoutGrid,
+    title: "Detailed layout",
+  },
+];
+
+export const PAGE_TABS_LIST: { key: string; title: string }[] = [
+  {
+    key: "recent",
+    title: "Recent",
+  },
+  {
+    key: "all",
+    title: "All",
+  },
+  {
+    key: "favorites",
+    title: "Favorites",
+  },
+  {
+    key: "created-by-me",
+    title: "Created by me",
+  },
+  {
+    key: "created-by-others",
+    title: "Created by others",
+  },
+];
diff --git a/web/constants/project.ts b/web/constants/project.ts
index 2f15b74bc..f8508ad45 100644
--- a/web/constants/project.ts
+++ b/web/constants/project.ts
@@ -1,15 +1,16 @@
+import { Globe2, Lock, LucideIcon } from "lucide-react";
 import { TIssuePriorities } from "types";
 
-export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: string }[] = [
+export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: LucideIcon }[] = [
   {
     key: 0,
     label: "Private",
-    icon: "lock",
+    icon: Lock,
   },
   {
     key: 2,
     label: "Public",
-    icon: "public",
+    icon: Globe2,
   },
 ];
 
@@ -49,3 +50,22 @@ export const PROJECT_AUTOMATION_MONTHS = [
   { label: "9 Months", value: 9 },
   { label: "12 Months", value: 12 },
 ];
+
+export const PROJECT_UNSPLASH_COVERS = [
+  "https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1693027407934-e3aa8a54c7ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1464925257126-6450e871c667?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1606768666853-403c90a981ad?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1643330683233-ff2ac89b002c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1542202229-7d93c33f5d07?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1475738972911-5b44ce984c42?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1673393058808-50e9baaf4d2c?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1696643830146-44a8755f1905?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1693868769698-6c7440636a09?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+];
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index df6cd5aef..603e280f5 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -1,86 +1,96 @@
-import {
-  CalendarDaysIcon,
-  PlayIcon,
-  Squares2X2Icon,
-  TagIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
+import { TIssueOrderByOptions } from "types";
 
-export const SPREADSHEET_COLUMN = [
-  {
-    propertyName: "title",
-    colName: "Title",
-    colSize: "440px",
+export const SPREADSHEET_PROPERTY_DETAILS: {
+  [key: string]: {
+    title: string;
+    ascendingOrderKey: TIssueOrderByOptions;
+    ascendingOrderTitle: string;
+    descendingOrderKey: TIssueOrderByOptions;
+    descendingOrderTitle: string;
+  };
+} = {
+  assignee: {
+    title: "Assignees",
+    ascendingOrderKey: "assignees__first_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-assignees__first_name",
+    descendingOrderTitle: "Z",
   },
-  {
-    propertyName: "state",
-    colName: "State",
-    colSize: "128px",
-    icon: Squares2X2Icon,
-    ascendingOrder: "state__name",
-    descendingOrder: "-state__name",
+  created_on: {
+    title: "Created on",
+    ascendingOrderKey: "-created_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "created_at",
+    descendingOrderTitle: "Old",
   },
-  {
-    propertyName: "priority",
-    colName: "Priority",
-    colSize: "128px",
-    ascendingOrder: "priority",
-    descendingOrder: "-priority",
+  due_date: {
+    title: "Due date",
+    ascendingOrderKey: "-target_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "target_date",
+    descendingOrderTitle: "Old",
   },
-  {
-    propertyName: "assignee",
-    colName: "Assignees",
-    colSize: "128px",
-    icon: UserGroupIcon,
-    ascendingOrder: "assignees__id",
-    descendingOrder: "-assignees__id",
+  estimate: {
+    title: "Estimate",
+    ascendingOrderKey: "estimate_point",
+    ascendingOrderTitle: "Low",
+    descendingOrderKey: "-estimate_point",
+    descendingOrderTitle: "High",
   },
-  {
-    propertyName: "labels",
-    colName: "Labels",
-    colSize: "128px",
-    icon: TagIcon,
-    ascendingOrder: "labels__name",
-    descendingOrder: "-labels__name",
+  labels: {
+    title: "Labels",
+    ascendingOrderKey: "labels__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-labels__name",
+    descendingOrderTitle: "Z",
   },
-  {
-    propertyName: "start_date",
-    colName: "Start Date",
-    colSize: "128px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-start_date",
-    descendingOrder: "start_date",
+  priority: {
+    title: "Priority",
+    ascendingOrderKey: "priority",
+    ascendingOrderTitle: "None",
+    descendingOrderKey: "-priority",
+    descendingOrderTitle: "Urgent",
   },
-  {
-    propertyName: "due_date",
-    colName: "Due Date",
-    colSize: "128px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-target_date",
-    descendingOrder: "target_date",
+  start_date: {
+    title: "Start date",
+    ascendingOrderKey: "-start_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "start_date",
+    descendingOrderTitle: "Old",
   },
-  {
-    propertyName: "estimate",
-    colName: "Estimate",
-    colSize: "128px",
-    icon: PlayIcon,
-    ascendingOrder: "estimate_point",
-    descendingOrder: "-estimate_point",
+  state: {
+    title: "State",
+    ascendingOrderKey: "state__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-state__name",
+    descendingOrderTitle: "Z",
   },
-  {
-    propertyName: "created_on",
-    colName: "Created On",
-    colSize: "144px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-created_at",
-    descendingOrder: "created_at",
+  updated_on: {
+    title: "Updated on",
+    ascendingOrderKey: "-updated_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "updated_at",
+    descendingOrderTitle: "Old",
   },
-  {
-    propertyName: "updated_on",
-    colName: "Updated On",
-    colSize: "144px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-updated_at",
-    descendingOrder: "updated_at",
+  link: {
+    title: "Link",
+    ascendingOrderKey: "-link_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "link_count",
+    descendingOrderTitle: "Least",
   },
-];
+  attachment_count: {
+    title: "Attachment",
+    ascendingOrderKey: "-attachment_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "attachment_count",
+    descendingOrderTitle: "Least",
+  },
+  sub_issue_count: {
+    title: "Sub-issue",
+    ascendingOrderKey: "-sub_issues_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "sub_issues_count",
+    descendingOrderTitle: "Least",
+  },
+};
diff --git a/web/constants/themes.ts b/web/constants/themes.ts
index 74b74caba..96ece0600 100644
--- a/web/constants/themes.ts
+++ b/web/constants/themes.ts
@@ -1,6 +1,17 @@
 export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
 
-export const THEMES_OBJ = [
+export interface I_THEME_OPTION {
+  value: string;
+  label: string;
+  type: string;
+  icon: {
+    border: string;
+    color1: string;
+    color2: string;
+  };
+}
+
+export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     value: "system",
     label: "System Preference",
diff --git a/web/constants/workspace.ts b/web/constants/workspace.ts
index 0683e39af..e442bf242 100644
--- a/web/constants/workspace.ts
+++ b/web/constants/workspace.ts
@@ -1,9 +1,10 @@
 // services images
 import GithubLogo from "public/services/github.png";
-import JiraLogo from "public/services/jira.png";
+import JiraLogo from "public/services/jira.svg";
 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",
@@ -27,7 +28,7 @@ export const USER_ROLES = [
   { value: "Other", label: "Other" },
 ];
 
-export const IMPORTERS_EXPORTERS_LIST = [
+export const IMPORTERS_LIST = [
   {
     provider: "github",
     type: "import",
@@ -67,3 +68,41 @@ 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",
+  },
+];
+
+export const RESTRICTED_URLS = [
+  "api",
+  "installations",
+  "404",
+  "create-workspace",
+  "error",
+  "invitations",
+  "magic-sign-in",
+  "onboarding",
+  "profile",
+  "reset-password",
+  "sign-up",
+  "spaces",
+  "workspace-member-invitation",
+];
diff --git a/web/contexts/inbox-view-context.tsx b/web/contexts/inbox-view-context.tsx
deleted file mode 100644
index b7b452f12..000000000
--- a/web/contexts/inbox-view-context.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { createContext, useCallback, useEffect, useReducer } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// components
-import ToastAlert from "components/toast-alert";
-// services
-import inboxServices 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);
-
-type InboxViewProps = {
-  filters: IInboxFilterOptions;
-};
-
-type ReducerActionType = {
-  type: "REHYDRATE_THEME" | "SET_FILTERS";
-  payload?: Partial<InboxViewProps>;
-};
-
-type ContextType = InboxViewProps & {
-  setFilters: (filters: Partial<IInboxFilterOptions>) => void;
-  clearAllFilters: () => void;
-};
-
-type StateType = {
-  filters: IInboxFilterOptions;
-};
-type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
-
-export const initialState: StateType = {
-  filters: {
-    priority: null,
-    inbox_status: null,
-  },
-};
-
-export const reducer: ReducerFunctionType = (state, action) => {
-  const { type, payload } = action;
-
-  switch (type) {
-    case "REHYDRATE_THEME": {
-      return { ...initialState, ...payload };
-    }
-
-    case "SET_FILTERS": {
-      const newState = {
-        ...state,
-        filters: {
-          ...state.filters,
-          ...payload?.filters,
-        },
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-  }
-};
-
-const saveDataToServer = async (
-  workspaceSlug: string,
-  projectId: string,
-  inboxId: string,
-  state: any
-) => {
-  await inboxServices.patchInbox(workspaceSlug, projectId, inboxId, {
-    view_props: state,
-  });
-};
-
-export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId } = router.query;
-
-  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()
-          )
-      : 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;
-      });
-
-      dispatch({
-        type: "SET_FILTERS",
-        payload: {
-          filters: {
-            ...state.filters,
-            ...property,
-          },
-        },
-      });
-
-      if (!workspaceSlug || !projectId || !inboxId) return;
-
-      const newViewProps = {
-        ...state,
-        filters: {
-          ...state.filters,
-          ...property,
-        },
-      };
-
-      mutateInboxDetails((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: newViewProps,
-        };
-      }, false);
-
-      saveDataToServer(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        newViewProps
-      );
-    },
-    [workspaceSlug, projectId, inboxId, mutateInboxDetails, state]
-  );
-
-  const clearAllFilters = useCallback(() => {
-    dispatch({
-      type: "SET_FILTERS",
-      payload: {
-        filters: { ...initialState.filters },
-      },
-    });
-
-    if (!workspaceSlug || !projectId || !inboxId) return;
-
-    const newViewProps = {
-      ...state,
-      filters: { ...initialState.filters },
-    };
-
-    mutateInboxDetails((prevData: any) => {
-      if (!prevData) return prevData;
-
-      return {
-        ...prevData,
-        view_props: newViewProps,
-      };
-    }, false);
-
-    saveDataToServer(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      inboxId.toString(),
-      newViewProps
-    );
-  }, [inboxId, mutateInboxDetails, projectId, state, workspaceSlug]);
-
-  useEffect(() => {
-    dispatch({
-      type: "REHYDRATE_THEME",
-      payload: {
-        ...inboxDetails?.view_props,
-      },
-    });
-  }, [inboxDetails]);
-
-  return (
-    <inboxViewContext.Provider
-      value={{
-        filters: state.filters,
-        setFilters,
-        clearAllFilters,
-      }}
-    >
-      <ToastAlert />
-      {children}
-    </inboxViewContext.Provider>
-  );
-};
diff --git a/web/contexts/issue-view.context.tsx b/web/contexts/issue-view.context.tsx
index 6e961cd1e..c64dcf194 100644
--- a/web/contexts/issue-view.context.tsx
+++ b/web/contexts/issue-view.context.tsx
@@ -1,33 +1,25 @@
 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, ProjectMemberService } 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 projectMemberService = new ProjectMemberService();
+const cycleService = new CycleService();
+const moduleService = new ModuleService();
+const viewService = new ViewService();
 
 export const issueViewContext = createContext<ContextType>({} as ContextType);
 
@@ -60,6 +52,7 @@ export const initialState: StateType = {
     labels: null,
     state: null,
     state_group: null,
+    mentions: null,
     subscriber: null,
     created_by: null,
     start_date: null,
@@ -122,11 +115,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 +139,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 +157,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 +175,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,
@@ -230,43 +219,28 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
+      ? () => projectMemberService.projectMemberMe(workspaceSlug as string, projectId as string)
       : null
   );
 
   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 +261,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 +312,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..f7586bdeb 100644
--- a/web/contexts/profile-issues-context.tsx
+++ b/web/contexts/profile-issues-context.tsx
@@ -3,12 +3,7 @@ import { createContext, useCallback, useReducer } from "react";
 // components
 import ToastAlert from "components/toast-alert";
 // types
-import {
-  IIssueFilterOptions,
-  Properties,
-  IWorkspaceViewProps,
-  IIssueDisplayFilterOptions,
-} from "types";
+import { IIssueFilterOptions, Properties, IWorkspaceViewProps, IIssueDisplayFilterOptions } from "types";
 
 export const profileIssuesContext = createContext<ContextType>({} as ContextType);
 
@@ -117,9 +112,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
   }
 };
 
-export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const setDisplayFilters = useCallback(
@@ -133,11 +126,7 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         },
       });
 
-      if (
-        displayFilter.layout &&
-        displayFilter.layout === "kanban" &&
-        state.display_filters?.group_by === null
-      ) {
+      if (displayFilter.layout && displayFilter.layout === "kanban" && state.display_filters?.group_by === null) {
         dispatch({
           type: "SET_DISPLAY_FILTERS",
           payload: {
@@ -154,8 +143,7 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
   const setFilters = useCallback(
     (property: Partial<IIssueFilterOptions>) => {
       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({
@@ -177,7 +165,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
deleted file mode 100644
index 60cb8954f..000000000
--- a/web/contexts/project-member.context.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { createContext, useContext } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// swr
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-
-// keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
-
-// types
-import { IProjectMember } from "types";
-
-type ContextType = {
-  loading: boolean;
-  memberDetails?: IProjectMember;
-  error: any;
-};
-
-export const ProjectMemberContext = createContext<ContextType>({} as ContextType);
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const ProjectMemberProvider: React.FC<Props> = (props) => {
-  const { children } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: memberDetails, error } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const loading = !memberDetails && !error;
-
-  return (
-    <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.`);
-
-  return {
-    ...context,
-    memberRole: {
-      isOwner: context.memberDetails?.role === 20,
-      isMember: context.memberDetails?.role === 15,
-      isViewer: context.memberDetails?.role === 10,
-      isGuest: context.memberDetails?.role === 5,
-    },
-  };
-};
diff --git a/web/contexts/theme.context.tsx b/web/contexts/theme.context.tsx
deleted file mode 100644
index d338b9b6b..000000000
--- a/web/contexts/theme.context.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { createContext, useCallback, useReducer, useEffect } from "react";
-import { useRouter } from "next/router";
-// swr
-import useSWR from "swr";
-// components
-import ToastAlert from "components/toast-alert";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import projectService from "services/project.service";
-// fetch-keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
-// helper
-import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
-// constants
-
-export const themeContext = createContext<ContextType>({} as ContextType);
-
-type ThemeProps = {
-  collapsed: boolean;
-};
-
-type ReducerActionType = {
-  type: "TOGGLE_SIDEBAR" | "REHYDRATE_THEME";
-  payload?: Partial<ThemeProps>;
-};
-
-type ContextType = {
-  collapsed: boolean;
-  toggleCollapsed: () => void;
-};
-
-type StateType = {
-  collapsed: boolean;
-};
-type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
-
-export const initialState: StateType = {
-  collapsed: false,
-};
-
-export const reducer: ReducerFunctionType = (state, action) => {
-  const { type, payload } = action;
-
-  switch (type) {
-    case "TOGGLE_SIDEBAR":
-      const newState = {
-        ...state,
-        collapsed: !state.collapsed,
-      };
-      localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
-      return newState;
-
-    case "REHYDRATE_THEME": {
-      let collapsed: any = localStorage.getItem("collapsed");
-      collapsed = collapsed ? JSON.parse(collapsed) : false;
-      return { ...initialState, ...payload, collapsed };
-    }
-
-    default: {
-      return state;
-    }
-  }
-};
-
-export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const { user } = useUserAuth(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: myViewProps } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const toggleCollapsed = useCallback(() => {
-    dispatch({
-      type: "TOGGLE_SIDEBAR",
-    });
-  }, []);
-
-  useEffect(() => {
-    dispatch({
-      type: "REHYDRATE_THEME",
-      payload: myViewProps?.view_props as any,
-    });
-  }, [myViewProps]);
-
-  useEffect(() => {
-    const theme = localStorage.getItem("theme");
-
-    if (theme) {
-      if (theme === "custom") {
-        if (user && user.theme.palette) {
-          applyTheme(
-            user.theme.palette !== ",,,,"
-              ? user.theme.palette
-              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-            user.theme.darkPalette
-          );
-        }
-      } else unsetCustomCssVariables();
-    }
-  }, [user]);
-
-  return (
-    <themeContext.Provider
-      value={{
-        collapsed: state.collapsed,
-        toggleCollapsed,
-      }}
-    >
-      <ToastAlert />
-      {children}
-    </themeContext.Provider>
-  );
-};
diff --git a/web/contexts/toast.context.tsx b/web/contexts/toast.context.tsx
index 69adf0e92..30e100b20 100644
--- a/web/contexts/toast.context.tsx
+++ b/web/contexts/toast.context.tsx
@@ -72,11 +72,7 @@ export const ToastContextProvider: React.FC<{ children: React.ReactNode }> = ({
   }, []);
 
   const setToastAlert = useCallback(
-    (data: {
-      title: string;
-      type?: "success" | "error" | "warning" | "info";
-      message?: string;
-    }) => {
+    (data: { title: string; type?: "success" | "error" | "warning" | "info"; message?: string }) => {
       const id = uuid();
       const { title, type, message } = data;
       dispatch({
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..e08e09399 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,10 @@ type Props = {
   children: React.ReactNode;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
+// TODO: remove this context
 export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
   const { children } = props;
 
@@ -37,7 +41,7 @@ export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
   const loading = !memberDetails && !error;
 
   return (
-    <WorkspaceMemberContext.Provider value={{ loading, memberDetails, error }}>
+    <WorkspaceMemberContext.Provider value={{ loading, memberDetails: undefined, error }}>
       {children}
     </WorkspaceMemberContext.Provider>
   );
@@ -46,8 +50,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
deleted file mode 100644
index 2ecbb2ef5..000000000
--- a/web/contexts/workspace.context.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { FC, ReactElement, createContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// types
-import { IWorkspace } from "types";
-// constants
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-export interface WorkspaceProviderProps {
-  children: ReactElement;
-}
-
-export interface WorkspaceContextProps {
-  workspaces: IWorkspace[];
-  activeWorkspace: IWorkspace | undefined;
-  mutateWorkspaces: () => void;
-}
-
-export const WorkspaceContext = createContext<WorkspaceContextProps>({} as WorkspaceContextProps);
-
-export const WorkspaceProvider: FC<WorkspaceProviderProps> = (props) => {
-  const { children } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // API to fetch user information
-  const {
-    data = [],
-    error,
-    mutate,
-  } = useSWR<IWorkspace[]>(USER_WORKSPACES, () => workspaceService.userWorkspaces());
-  // active workspace
-  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
-
-  return (
-    <WorkspaceContext.Provider
-      value={{
-        workspaces: error ? [] : data,
-        activeWorkspace,
-        mutateWorkspaces: mutate,
-      }}
-    >
-      {children}
-    </WorkspaceContext.Provider>
-  );
-};
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/array.helper.ts b/web/helpers/array.helper.ts
index a682b0a1c..a55ad8fd9 100644
--- a/web/helpers/array.helper.ts
+++ b/web/helpers/array.helper.ts
@@ -7,11 +7,7 @@ export const groupBy = (array: any[], key: string) => {
   }, {});
 };
 
-export const orderArrayBy = (
-  orgArray: any[],
-  key: string,
-  ordering: "ascending" | "descending" = "ascending"
-) => {
+export const orderArrayBy = (orgArray: any[], key: string, ordering: "ascending" | "descending" = "ascending") => {
   if (!orgArray || !Array.isArray(orgArray) || orgArray.length === 0) return [];
 
   const array = [...orgArray];
@@ -53,3 +49,28 @@ export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] |
 
   return arr1.length === arr2.length && arr1.every((e) => arr2.includes(e));
 };
+
+type GroupedItems<T> = { [key: string]: T[] };
+
+export const groupByField = <T>(array: T[], field: keyof T): GroupedItems<T> =>
+  array.reduce((grouped: GroupedItems<T>, item: T) => {
+    const key = String(item[field]);
+    grouped[key] = (grouped[key] || []).concat(item);
+    return grouped;
+  }, {});
+
+export const sortByField = (array: any[], field: string): any[] =>
+  array.sort((a, b) => (a[field] < b[field] ? -1 : a[field] > b[field] ? 1 : 0));
+
+export const orderGroupedDataByField = <T>(groupedData: GroupedItems<T>, orderBy: keyof T): GroupedItems<T> => {
+  for (const key in groupedData) {
+    if (groupedData.hasOwnProperty(key)) {
+      groupedData[key] = groupedData[key].sort((a, b) => {
+        if (a[orderBy] < b[orderBy]) return -1;
+        if (a[orderBy] > b[orderBy]) return 1;
+        return 0;
+      });
+    }
+  }
+  return groupedData;
+};
diff --git a/web/helpers/attachment.helper.ts b/web/helpers/attachment.helper.ts
index 24cfb2c49..67e989063 100644
--- a/web/helpers/attachment.helper.ts
+++ b/web/helpers/attachment.helper.ts
@@ -1,5 +1,4 @@
-export const getFileExtension = (filename: string) =>
-  filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
+export const getFileExtension = (filename: string) => filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
 
 export const getFileName = (fileName: string) => {
   const dotIndex = fileName.lastIndexOf(".");
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/common.helper.ts b/web/helpers/common.helper.ts
index 7fb8896de..ed199fed4 100644
--- a/web/helpers/common.helper.ts
+++ b/web/helpers/common.helper.ts
@@ -17,6 +17,4 @@ export const debounce = (func: any, wait: number, immediate: boolean = false) =>
   };
 };
 
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
-  ? process.env.NEXT_PUBLIC_API_BASE_URL
-  : "";
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index 6784a9aa6..b49cb8814 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -130,24 +130,16 @@ 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());
-  const now = new Date(today);
+  const now = new Date();
   const start = new Date(startDate);
   const end = new Date(endDate);
 
-  if (start <= now && end >= now) {
-    return "current";
-  } else if (start > now) {
-    return "upcoming";
-  } else {
-    return "completed";
-  }
+  if (start <= now && end >= now) return "current";
+  else if (start > now) return "upcoming";
+  else return "completed";
 };
 
 export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
@@ -155,20 +147,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,26 +160,25 @@ 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()];
 
   return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
 };
 
+export const renderShortMonthDate = (date: string | Date, placeholder?: string) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${month} ${year}`;
+};
+
 export const render12HourFormatTime = (date: string | Date): string => {
   if (!date || date === "") return "";
 
@@ -234,8 +212,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 +308,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 +360,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);
@@ -396,7 +368,7 @@ export const findTotalDaysInRange = (
 
   // find number of days between startDate and endDate
   const diffInTime = endDate.getTime() - startDate.getTime();
-  const diffInDays = diffInTime / (1000 * 3600 * 24);
+  const diffInDays = Math.floor(diffInTime / (1000 * 3600 * 24));
 
   // if inclusive is true, add 1 to diffInDays
   if (inclusive) return diffInDays + 1;
@@ -405,3 +377,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..026211634 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>
     );
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..39424c76e
--- /dev/null
+++ b/web/helpers/issue.helper.ts
@@ -0,0 +1,199 @@
+import { v4 as uuidv4 } from "uuid";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import {
+  IIssue,
+  TIssueGroupByOptions,
+  TIssueLayouts,
+  TIssueOrderByOptions,
+  TIssueParams,
+  IProject,
+  IWorkspace,
+} 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,
+    };
+
+    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,
+    };
+
+    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" | "profile_issues" | "archived_issues" | "draft_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;
+};
+
+/**
+ *
+ * @description create a full issue payload with some default values. This function also parse the form field
+ * like assignees, labels, etc. and add them to the payload
+ * @param workspaceDetail workspace detail to be added in the issue payload
+ * @param projectDetail project detail to be added in the issue payload
+ * @param formData partial issue data from the form. This will override the default values
+ * @returns full issue payload with some default values
+ */
+
+export const createIssuePayload: (
+  workspaceDetail: IWorkspace,
+  projectDetail: IProject,
+  formData: Partial<IIssue>
+) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial<IIssue>) => {
+  const payload = {
+    archived_at: null,
+    assignee_details: [],
+    attachment_count: 0,
+    attachments: [],
+    issue_relations: [],
+    related_issues: [],
+    bridge_id: null,
+    completed_at: new Date(),
+    created_at: "",
+    created_by: "",
+    cycle: null,
+    cycle_id: null,
+    cycle_detail: null,
+    description: {},
+    description_html: "",
+    description_stripped: "",
+    estimate_point: null,
+    issue_cycle: null,
+    issue_link: [],
+    issue_module: null,
+    label_details: [],
+    is_draft: false,
+    links_list: [],
+    link_count: 0,
+    module: null,
+    module_id: null,
+    name: "",
+    parent: null,
+    parent_detail: null,
+    priority: "none",
+    project: projectDetail.id,
+    project_detail: projectDetail,
+    sequence_id: 0,
+    sort_order: 0,
+    sprints: null,
+    start_date: null,
+    state: projectDetail.default_state,
+    state_detail: {} as any,
+    sub_issues_count: 0,
+    target_date: null,
+    updated_at: "",
+    updated_by: "",
+    workspace: workspaceDetail.id,
+    workspace_detail: workspaceDetail,
+    id: uuidv4(),
+    tempId: uuidv4(),
+    // to be overridden by the form data
+    ...formData,
+    assignees: Array.isArray(formData.assignees)
+      ? formData.assignees
+      : formData.assignees && formData.assignees !== "none" && formData.assignees !== null
+      ? [formData.assignees]
+      : [],
+    labels: Array.isArray(formData.labels)
+      ? formData.labels
+      : formData.labels && formData.labels !== "none" && formData.labels !== null
+      ? [formData.labels]
+      : [],
+  } as IIssue;
+
+  return payload;
+};
diff --git a/web/helpers/state.helper.ts b/web/helpers/state.helper.ts
index edf740c10..ef6c3ba77 100644
--- a/web/helpers/state.helper.ts
+++ b/web/helpers/state.helper.ts
@@ -1,27 +1,7 @@
 // types
-import { IState, IStateResponse } from "types";
+import { IStateResponse } from "types";
 
-export const orderStateGroups = (
-  unorderedStateGroups: IStateResponse | undefined
-): IStateResponse | undefined => {
+export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
   if (!unorderedStateGroups) return undefined;
-
-  return Object.assign(
-    { backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
-    unorderedStateGroups
-  );
-};
-
-export const getStatesList = (stateGroups: IStateResponse | undefined): IState[] | undefined => {
-  if (!stateGroups) return undefined;
-
-  // order the unordered state groups first
-  const orderedStateGroups = orderStateGroups(stateGroups);
-
-  if (!orderedStateGroups) return undefined;
-
-  // extract states from the groups and return them
-  return Object.keys(orderedStateGroups)
-    .map((group) => [...orderedStateGroups[group].map((state: IState) => state)])
-    .flat();
+  return Object.assign({ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] }, unorderedStateGroups);
 };
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
index d1e0e98b7..778ec602a 100644
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@@ -5,7 +5,13 @@ import {
   VIEW_ISSUES,
 } from "constants/fetch-keys";
 
-export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
+export const addSpaceIfCamelCase = (str: string) => {
+  if (str === undefined || str === null) return "";
+
+  if (typeof str !== "string") str = `${str}`;
+
+  return str.replace(/([a-z])([A-Z])/g, "$1 $2");
+};
 
 export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
 
@@ -56,6 +62,19 @@ export const copyTextToClipboard = async (text: string) => {
   await navigator.clipboard.writeText(text);
 };
 
+/**
+ * @description: This function copies the url to clipboard after prepending the origin URL to it
+ * @param {string} path
+ * @example:
+ * const text = copyUrlToClipboard("path");
+ * copied URL: origin_url/path
+ */
+export const copyUrlToClipboard = async (path: string) => {
+  const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+  await copyTextToClipboard(`${originUrl}/${path}`);
+};
+
 export const generateRandomColor = (string: string): string => {
   if (!string) return "rgb(var(--color-primary-100))";
 
@@ -98,11 +117,20 @@ export const getFirstCharacters = (str: string) => {
  */
 
 export const stripHTML = (html: string) => {
-  const tmp = document.createElement("DIV");
-  tmp.innerHTML = html;
-  return tmp.textContent || tmp.innerText || "";
+  const strippedText = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ""); // Remove script tags
+  return strippedText.replace(/<[^>]*>/g, ""); // Remove all other HTML tags
 };
 
+/**
+ *
+ * @example:
+ * const html = "<p>Some text</p>";
+ * const text = stripAndTruncateHTML(html);
+ * console.log(text); // Some text
+ */
+
+export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(stripHTML(html), length);
+
 /**
  * @description: This function return number count in string if number is more than 100 then it will return 99+
  * @param {number} number
@@ -135,47 +163,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 +177,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
deleted file mode 100644
index c2f6972fa..000000000
--- a/web/hooks/gantt-chart/issue-view.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
-  const { displayFilters, filters } = useIssuesView();
-
-  const params: any = {
-    order_by: displayFilters.order_by,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-    sub_issue: displayFilters.sub_issue,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params) : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-    params,
-  };
-};
-
-export default useGanttChartIssues;
diff --git a/web/hooks/gantt-chart/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
deleted file mode 100644
index bc6a964c3..000000000
--- a/web/hooks/my-issues/use-my-issues-filter.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { useEffect, useCallback } from "react";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// types
-import {
-  IIssueDisplayFilterOptions,
-  IIssueFilterOptions,
-  IWorkspaceMember,
-  IWorkspaceViewProps,
-  Properties,
-} from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
-
-const initialValues: IWorkspaceViewProps = {
-  display_filters: {
-    group_by: null,
-    layout: "list",
-    order_by: "-created_at",
-    show_empty_groups: true,
-    sub_issue: true,
-    type: null,
-  },
-  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,
-  },
-  filters: {
-    assignees: null,
-    created_by: null,
-    labels: null,
-    priority: null,
-    state_group: null,
-    subscriber: null,
-    start_date: null,
-    target_date: null,
-  },
-};
-
-const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
-  const { data: myWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug as string) : null,
-    {
-      shouldRetryOnError: false,
-    }
-  );
-
-  const saveData = useCallback(
-    (data: Partial<IWorkspaceViewProps>) => {
-      if (!workspaceSlug || !myWorkspace) return;
-
-      const oldData = { ...myWorkspace };
-
-      mutate<IWorkspaceMember>(
-        WORKSPACE_MEMBERS_ME(workspaceSlug.toString()),
-        (prevData) => {
-          if (!prevData) return;
-          return {
-            ...prevData,
-            view_props: {
-              ...prevData?.view_props,
-              ...data,
-            },
-          };
-        },
-        false
-      );
-
-      workspaceService.updateWorkspaceView(workspaceSlug, {
-        view_props: {
-          ...oldData.view_props,
-          ...data,
-        },
-      });
-    },
-    [myWorkspace, workspaceSlug]
-  );
-
-  const groupBy = (myWorkspace?.view_props ?? initialValues).display_filters?.group_by;
-  const filters = (myWorkspace?.view_props ?? initialValues).filters;
-
-  const setDisplayFilters = useCallback(
-    (displayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      const payload: Partial<IWorkspaceViewProps> = {
-        display_filters: {
-          ...myWorkspace?.view_props?.display_filters,
-          ...displayFilter,
-        },
-      };
-
-      if (
-        displayFilter.layout &&
-        displayFilter.layout === "kanban" &&
-        groupBy === null &&
-        payload.display_filters
-      )
-        payload.display_filters.group_by = "state_detail.group";
-
-      saveData(payload);
-    },
-    [groupBy, myWorkspace?.view_props.display_filters, saveData]
-  );
-
-  const setProperty = useCallback(
-    (key: keyof Properties) => {
-      if (!myWorkspace?.view_props.display_properties) return;
-
-      saveData({
-        display_properties: {
-          ...myWorkspace.view_props?.display_properties,
-          [key]: !myWorkspace.view_props?.display_properties[key],
-        },
-      });
-    },
-    [myWorkspace, saveData]
-  );
-
-  const setFilters = useCallback(
-    (updatedFilter: Partial<IIssueFilterOptions>) => {
-      if (!myWorkspace) return;
-
-      saveData({
-        filters: {
-          ...myWorkspace.view_props?.filters,
-          ...updatedFilter,
-        },
-      });
-    },
-    [myWorkspace, saveData]
-  );
-
-  useEffect(() => {
-    if (!myWorkspace || !workspaceSlug) return;
-
-    if (!myWorkspace.view_props) {
-      workspaceService.updateWorkspaceView(workspaceSlug, {
-        view_props: { ...initialValues },
-      });
-    }
-  }, [myWorkspace, workspaceSlug]);
-
-  const newProperties: Properties = {
-    assignee: myWorkspace?.view_props.display_properties?.assignee ?? true,
-    start_date: myWorkspace?.view_props.display_properties?.start_date ?? true,
-    due_date: myWorkspace?.view_props.display_properties?.due_date ?? true,
-    key: myWorkspace?.view_props.display_properties?.key ?? true,
-    labels: myWorkspace?.view_props.display_properties?.labels ?? true,
-    priority: myWorkspace?.view_props.display_properties?.priority ?? true,
-    state: myWorkspace?.view_props.display_properties?.state ?? true,
-    sub_issue_count: myWorkspace?.view_props.display_properties?.sub_issue_count ?? true,
-    attachment_count: myWorkspace?.view_props.display_properties?.attachment_count ?? true,
-    link: myWorkspace?.view_props.display_properties?.link ?? true,
-    estimate: myWorkspace?.view_props.display_properties?.estimate ?? true,
-    created_on: myWorkspace?.view_props.display_properties?.created_on ?? true,
-    updated_on: myWorkspace?.view_props.display_properties?.updated_on ?? true,
-  };
-
-  return {
-    displayFilters: myWorkspace?.view_props?.display_filters,
-    setDisplayFilters,
-    properties: newProperties,
-    setProperty,
-    filters,
-    setFilters,
-  };
-};
-
-export default useMyIssuesFilters;
diff --git a/web/hooks/my-issues/use-my-issues.tsx b/web/hooks/my-issues/use-my-issues.tsx
deleted file mode 100644
index 3e79d6f1e..000000000
--- a/web/hooks/my-issues/use-my-issues.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useMemo } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// hooks
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import { USER_ISSUES } from "constants/fetch-keys";
-
-const useMyIssues = (workspaceSlug: string | undefined) => {
-  const router = useRouter();
-
-  const { filters, displayFilters } = useMyIssuesFilters(workspaceSlug);
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: displayFilters?.group_by,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: displayFilters?.order_by,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    type: displayFilters?.type,
-  };
-
-  const { data: myIssues, mutate: mutateMyIssues } = useSWR(
-    workspaceSlug && router.pathname.includes("my-issues")
-      ? USER_ISSUES(workspaceSlug.toString(), params)
-      : null,
-    workspaceSlug && router.pathname.includes("my-issues")
-      ? () => userService.userIssues(workspaceSlug.toString(), params)
-      : null
-  );
-
-  const groupedIssues:
-    | {
-        [key: string]: IIssue[];
-      }
-    | undefined = useMemo(() => {
-    if (!myIssues) return undefined;
-
-    if (Array.isArray(myIssues))
-      return {
-        allIssues: myIssues,
-      };
-
-    if (displayFilters?.group_by === "state_detail.group") {
-      return myIssues
-        ? Object.assign(
-            {
-              backlog: [],
-              unstarted: [],
-              started: [],
-              completed: [],
-              cancelled: [],
-            },
-            myIssues
-          )
-        : undefined;
-    }
-
-    return myIssues;
-  }, [displayFilters, myIssues]);
-
-  const isEmpty =
-    Object.values(groupedIssues ?? {}).every((group) => group.length === 0) ||
-    Object.keys(groupedIssues ?? {}).length === 0;
-
-  return {
-    groupedIssues,
-    isEmpty,
-    mutateMyIssues,
-    params,
-  };
-};
-
-export default useMyIssues;
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-editor-suggestions.tsx b/web/hooks/use-editor-suggestions.tsx
new file mode 100644
index 000000000..337fc5f0a
--- /dev/null
+++ b/web/hooks/use-editor-suggestions.tsx
@@ -0,0 +1,13 @@
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const useEditorSuggestions = () => {
+  const { mentionsStore }: RootStore = useMobxStore();
+
+  return {
+    mentionSuggestions: mentionsStore.mentionSuggestions,
+    mentionHighlights: mentionsStore.mentionHighlights,
+  };
+};
+
+export default useEditorSuggestions;
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
deleted file mode 100644
index a5dedc380..000000000
--- a/web/hooks/use-inbox-view.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { inboxViewContext } from "contexts/inbox-view-context";
-// services
-import inboxServices from "services/inbox.service";
-// types
-import { IInboxQueryParams } from "types";
-// fetch-keys
-import { INBOX_ISSUES } from "constants/fetch-keys";
-
-const useInboxView = () => {
-  const { filters, setFilters, clearAllFilters } = useContext(inboxViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId } = router.query;
-
-  const params: IInboxQueryParams = {
-    priority: filters?.priority ? filters?.priority.join(",") : null,
-    inbox_status: filters?.inbox_status ? filters?.inbox_status.join(",") : null,
-  };
-
-  const { data: inboxIssues, mutate: mutateInboxIssues } = useSWR(
-    workspaceSlug && projectId && inboxId && params
-      ? INBOX_ISSUES(inboxId.toString(), params)
-      : null,
-    workspaceSlug && projectId && inboxId && params
-      ? () =>
-          inboxServices.getInboxIssues(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxId.toString(),
-            params
-          )
-      : null
-  );
-
-  let filtersLength = 0;
-  Object.keys(filters ?? {}).forEach((key) => {
-    const filterKey = key as keyof typeof filters;
-
-    if (filters[filterKey] && Array.isArray(filters[filterKey]))
-      filtersLength += (filters[filterKey] ?? []).length;
-  });
-
-  return {
-    filters,
-    setFilters,
-    clearAllFilters,
-    filtersLength,
-    params,
-    issues: inboxIssues,
-    mutate: mutateInboxIssues,
-  } as const;
-};
-
-export default useInboxView;
diff --git a/web/hooks/use-integration-popup.tsx b/web/hooks/use-integration-popup.tsx
index 58cfbc009..fb9aab223 100644
--- a/web/hooks/use-integration-popup.tsx
+++ b/web/hooks/use-integration-popup.tsx
@@ -1,23 +1,26 @@
 import { useRef, useState } from "react";
-
 import { useRouter } from "next/router";
 
-const useIntegrationPopup = (provider: string | undefined, stateParams?: string) => {
+const useIntegrationPopup = ({
+  provider,
+  stateParams,
+  github_app_name,
+  slack_client_id,
+}: {
+  provider: string | undefined;
+  stateParams?: string;
+  github_app_name?: string;
+  slack_client_id?: string;
+}) => {
   const [authLoader, setAuthLoader] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const providerUrls: { [key: string]: string } = {
-    github: `https://github.com/apps/${
-      process.env.NEXT_PUBLIC_GITHUB_APP_NAME
-    }/installations/new?state=${workspaceSlug?.toString()}`,
-    slack: `https://slack.com/oauth/v2/authorize?scope=chat:write,im:history,im:write,links:read,links:write,users:read,users:read.email&amp;user_scope=&amp;&client_id=${
-      process.env.NEXT_PUBLIC_SLACK_CLIENT_ID
-    }&state=${workspaceSlug?.toString()}`,
-    slackChannel: `https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${
-      process.env.NEXT_PUBLIC_SLACK_CLIENT_ID
-    }&state=${workspaceSlug?.toString()},${projectId?.toString()}${
+    github: `https://github.com/apps/${github_app_name}/installations/new?state=${workspaceSlug?.toString()}`,
+    slack: `https://slack.com/oauth/v2/authorize?scope=chat:write,im:history,im:write,links:read,links:write,users:read,users:read.email&amp;user_scope=&amp;&client_id=${slack_client_id}&state=${workspaceSlug?.toString()}`,
+    slackChannel: `https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${slack_client_id}&state=${workspaceSlug?.toString()},${projectId?.toString()}${
       stateParams ? "," + stateParams : ""
     }`,
   };
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
deleted file mode 100644
index 6f4f093e0..000000000
--- a/web/hooks/use-issue-properties.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-import useSWR from "swr";
-
-// services
-import issueServices from "services/issues.service";
-// hooks
-import useUser from "hooks/use-user";
-// types
-import { IssuePriorities, Properties } from "types";
-
-const initialValues: 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 useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
-  const [properties, setProperties] = useState<Properties>(initialValues);
-
-  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
-  );
-
-  useEffect(() => {
-    if (!issueProperties || !workspaceSlug || !projectId || !user) return;
-
-    setProperties({ ...initialValues, ...issueProperties.properties });
-
-    if (Object.keys(issueProperties).length === 0)
-      issueServices.createIssueProperties(workspaceSlug, projectId, {
-        properties: { ...initialValues },
-        user: user.id,
-      });
-    else if (Object.keys(issueProperties?.properties).length === 0)
-      issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
-        properties: { ...initialValues },
-        user: user.id,
-      });
-  }, [issueProperties, workspaceSlug, projectId, user]);
-
-  const updateIssueProperties = useCallback(
-    (key: keyof Properties) => {
-      if (!workspaceSlug || !user) return;
-
-      setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
-
-      if (issueProperties && projectId) {
-        mutateIssueProperties(
-          (prev: any) =>
-            ({
-              ...prev,
-              properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
-            }) as IssuePriorities,
-          false
-        );
-        if (Object.keys(issueProperties).length > 0) {
-          issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
-            properties: {
-              ...issueProperties.properties,
-              [key]: !issueProperties.properties[key],
-            },
-            user: user.id,
-          });
-        } else {
-          issueServices.createIssueProperties(workspaceSlug, projectId, {
-            properties: { ...initialValues },
-            user: user.id,
-          });
-        }
-      }
-    },
-    [workspaceSlug, projectId, issueProperties, user, mutateIssueProperties]
-  );
-
-  const newProperties: Properties = {
-    assignee: properties.assignee,
-    start_date: properties.start_date,
-    due_date: properties.due_date,
-    key: properties.key,
-    labels: properties.labels,
-    priority: properties.priority,
-    state: properties.state,
-    sub_issue_count: properties.sub_issue_count,
-    attachment_count: properties.attachment_count,
-    link: properties.link,
-    estimate: properties.estimate,
-    created_on: properties.created_on,
-    updated_on: properties.updated_on,
-  };
-
-  return [newProperties, updateIssueProperties] as const;
-};
-
-export default useIssuesProperties;
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
deleted file mode 100644
index 1f15c09f9..000000000
--- a/web/hooks/use-issues-view.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-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";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// types
-import type { IIssue } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  STATES_LIST,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-const useIssuesView = () => {
-  const {
-    display_filters: displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useContext(issueViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, archivedIssueId } = router.query;
-  const isArchivedIssues = router.pathname.includes("archived-issues");
-  const isDraftIssues = router.pathname.includes("draft-issues");
-
-  const params: any = {
-    order_by: displayFilters?.order_by,
-    group_by: displayFilters?.group_by,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: !isArchivedIssues ? (displayFilters?.type ? displayFilters?.type : undefined) : 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: displayFilters?.sub_issue,
-  };
-
-  const { data: projectIssues, mutate: mutateProjectIssues } = useSWR(
-    workspaceSlug && projectId && params
-      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)
-      : null,
-    workspaceSlug && projectId && params
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, params)
-      : null
-  );
-
-  const { data: projectArchivedIssues, mutate: mutateProjectArchivedIssues } = useSWR(
-    workspaceSlug && projectId && params && isArchivedIssues && !archivedIssueId
-      ? 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)
-      : null
-  );
-
-  const { data: draftIssues, mutate: mutateDraftIssues } = useSWR(
-    workspaceSlug && projectId && params && isDraftIssues && !archivedIssueId
-      ? 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)
-      : null
-  );
-
-  const { data: cycleIssues, mutate: mutateCycleIssues } = useSWR(
-    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
-          )
-      : null
-  );
-
-  const { data: moduleIssues, mutate: mutateModuleIssues } = useSWR(
-    workspaceSlug && projectId && moduleId && params
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
-      : null,
-    workspaceSlug && projectId && moduleId && params
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            moduleId as string,
-            params
-          )
-      : null
-  );
-
-  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)
-      : null
-  );
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const statesList = getStatesList(states);
-  const activeStatesList = statesList?.filter(
-    (state) => state.group === "started" || state.group === "unstarted"
-  );
-  const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
-
-  const stateIds =
-    displayFilters && displayFilters?.type === "active"
-      ? activeStatesList?.map((state) => state.id)
-      : displayFilters?.type === "backlog"
-      ? backlogStatesList?.map((state) => state.id)
-      : statesList?.map((state) => state.id);
-
-  const filteredStateIds =
-    (filters && filters?.state ? stateIds?.filter((s) => filters.state?.includes(s)) : stateIds) ??
-    [];
-
-  const emptyStatesObject: { [key: string]: [] } = {};
-  for (let i = 0; i < filteredStateIds.length; i++) {
-    emptyStatesObject[filteredStateIds[i]] = [];
-  }
-
-  const groupedByIssues:
-    | {
-        [key: string]: IIssue[];
-      }
-    | undefined = useMemo(() => {
-    const issuesToGroup = cycleId
-      ? cycleIssues
-      : moduleId
-      ? moduleIssues
-      : viewId
-      ? viewIssues
-      : isArchivedIssues
-      ? projectArchivedIssues
-      : isDraftIssues
-      ? draftIssues
-      : projectIssues;
-
-    if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
-    if (displayFilters?.group_by === "state")
-      return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined;
-
-    return issuesToGroup;
-  }, [
-    displayFilters?.group_by,
-    projectIssues,
-    cycleIssues,
-    moduleIssues,
-    viewIssues,
-    projectArchivedIssues,
-    cycleId,
-    moduleId,
-    viewId,
-    isArchivedIssues,
-    isDraftIssues,
-    draftIssues,
-    emptyStatesObject,
-  ]);
-
-  const isEmpty =
-    Object.values(groupedByIssues ?? {}).every((group) => group.length === 0) ||
-    Object.keys(groupedByIssues ?? {}).length === 0;
-
-  return {
-    displayFilters: {
-      ...displayFilters,
-      layout: isArchivedIssues ? "list" : displayFilters?.layout,
-    },
-    setDisplayFilters,
-    groupedByIssues,
-    mutateIssues: cycleId
-      ? mutateCycleIssues
-      : moduleId
-      ? mutateModuleIssues
-      : viewId
-      ? mutateViewIssues
-      : isArchivedIssues
-      ? mutateProjectArchivedIssues
-      : isDraftIssues
-      ? mutateDraftIssues
-      : mutateProjectIssues,
-    filters,
-    setFilters,
-    params,
-    isEmpty,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } as const;
-};
-
-export default useIssuesView;
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
deleted file mode 100644
index 263aa307c..000000000
--- a/web/hooks/use-profile-issues.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useContext, useEffect, useMemo } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// contexts
-import { profileIssuesContext } from "contexts/profile-issues-context";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import { USER_PROFILE_ISSUES } from "constants/fetch-keys";
-import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
-
-const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
-  const {
-    display_filters: displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    display_properties: displayProperties,
-    setProperties,
-  } = useContext(profileIssuesContext);
-
-  const router = useRouter();
-
-  const { memberRole } = useWorkspaceMyMembership();
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: displayFilters?.group_by,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: displayFilters?.order_by,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
-  };
-
-  const { data: userProfileIssues, mutate: mutateProfileIssues } = useSWR(
-    workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
-      ? USER_PROFILE_ISSUES(workspaceSlug.toString(), userId.toString(), params)
-      : null,
-    workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
-      ? () => userService.getUserProfileIssues(workspaceSlug.toString(), userId.toString(), params)
-      : null
-  );
-
-  const groupedIssues:
-    | {
-        [key: string]: IIssue[];
-      }
-    | undefined = useMemo(() => {
-    if (!userProfileIssues) return undefined;
-
-    if (Array.isArray(userProfileIssues))
-      return {
-        allIssues: userProfileIssues,
-      };
-
-    if (displayFilters?.group_by === "state_detail.group") {
-      return userProfileIssues
-        ? Object.assign(
-            {
-              backlog: [],
-              unstarted: [],
-              started: [],
-              completed: [],
-              cancelled: [],
-            },
-            userProfileIssues
-          )
-        : undefined;
-    }
-
-    return userProfileIssues;
-  }, [displayFilters?.group_by, userProfileIssues]);
-
-  useEffect(() => {
-    if (!userId || !filters) return;
-
-    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))
-    ) {
-      setFilters({ created_by: [...(filters.created_by ?? []), userId] });
-      return;
-    }
-
-    if (router.pathname.includes("subscribed") && filters.subscriber === null) {
-      setFilters({ subscriber: [userId] });
-      return;
-    }
-  }, [filters, router, setFilters, userId]);
-
-  const isEmpty =
-    Object.values(groupedIssues ?? {}).every((group) => group.length === 0) ||
-    Object.keys(groupedIssues ?? {}).length === 0;
-
-  return {
-    groupedIssues,
-    displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    displayProperties,
-    setProperties,
-    isEmpty,
-    mutateProfileIssues,
-    params,
-  };
-};
-
-export default useProfileIssues;
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
deleted file mode 100644
index b810dcef9..000000000
--- a/web/hooks/use-project-members.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import useSWR from "swr";
-// services
-import projectService from "services/project.service";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// hooks
-import useUser from "./use-user";
-
-const useProjectMembers = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  fetchCondition?: boolean
-) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const { user } = useUser();
-  // fetching project members
-  const { data: members } = useSWR(
-    workspaceSlug && projectId && fetchCondition ? PROJECT_MEMBERS(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 isGuest = members?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
-
-  return {
-    members,
-    hasJoined,
-    isOwner,
-    isMember,
-    isViewer,
-    isGuest,
-  };
-};
-
-export default useProjectMembers;
diff --git a/web/hooks/use-projects.tsx b/web/hooks/use-projects.tsx
deleted file mode 100644
index 3363ff278..000000000
--- a/web/hooks/use-projects.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-
-const useProjects = (type?: "all" | boolean, fetchCondition?: boolean) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const router = useRouter();
-  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
-  );
-
-  const recentProjects = [...(projects ?? [])]
-    ?.sort((a, b) => Date.parse(`${a.updated_at}`) - Date.parse(`${b.updated_at}`))
-    ?.slice(0, 3);
-
-  return {
-    projects: projects
-      ? (orderArrayBy(projects, "is_favorite", "descending") as IProject[])
-      : undefined,
-    recentProjects: recentProjects || [],
-    mutateProjects,
-  };
-};
-
-export default useProjects;
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-theme.tsx b/web/hooks/use-theme.tsx
deleted file mode 100644
index 81e9249da..000000000
--- a/web/hooks/use-theme.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { themeContext } from "contexts/theme.context";
-
-const useTheme = () => {
-  const themeContextData = useContext(themeContext);
-  return themeContextData;
-};
-
-export default useTheme;
diff --git a/web/hooks/use-user-auth.tsx b/web/hooks/use-user-auth.tsx
index d3116ce06..0f555b9dc 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 { 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,
   });
@@ -30,9 +33,7 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
   useEffect(() => {
     const handleWorkSpaceRedirection = async () => {
       workspaceService.userWorkspaces().then(async (userWorkspaces) => {
-        const lastActiveWorkspace = userWorkspaces.find(
-          (workspace: IWorkspace) => workspace.id === user?.last_workspace_id
-        );
+        const lastActiveWorkspace = userWorkspaces.find((workspace) => workspace.id === user?.last_workspace_id);
         if (lastActiveWorkspace) {
           router.push(`/${lastActiveWorkspace.slug}`);
           return;
@@ -109,8 +110,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..a60921395 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,12 +143,13 @@ 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() });
 
+    if (readNotification) removeNotification(notificationId);
+
     if (isRead) {
       await userNotificationServices
         .markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)
@@ -193,28 +174,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 +227,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 +294,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
deleted file mode 100644
index 4a2f97626..000000000
--- a/web/hooks/use-workspace-details.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// services
-import workspaceService from "services/workspace.service";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-
-const useWorkspaceDetails = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // Fetching Workspace Details
-  const {
-    data: workspaceDetails,
-    error: workspaceDetailsError,
-    mutate: mutateWorkspaceDetails,
-  } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.getWorkspace(workspaceSlug as string) : null
-  );
-
-  useEffect(() => {
-    if (workspaceDetailsError?.status === 404) {
-      router.push("/404");
-    } else if (workspaceDetailsError) {
-      router.push("/error");
-    }
-  }, [workspaceDetailsError, router]);
-
-  return {
-    workspaceDetails,
-    workspaceDetailsError,
-    mutateWorkspaceDetails,
-  };
-};
-
-export default useWorkspaceDetails;
diff --git a/web/hooks/use-workspace-members.tsx b/web/hooks/use-workspace-members.tsx
deleted file mode 100644
index d4104d3bd..000000000
--- a/web/hooks/use-workspace-members.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import useSWR from "swr";
-// services
-import workspaceService from "services/workspace.service";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-// hooks
-import useUser from "./use-user";
-
-const useWorkspaceMembers = (workspaceSlug: string | undefined, fetchCondition?: boolean) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const { user } = useUser();
-
-  const { data: workspaceMembers, error: workspaceMemberErrors } = useSWR(
-    workspaceSlug && fetchCondition ? WORKSPACE_MEMBERS(workspaceSlug) : null,
-    workspaceSlug && fetchCondition ? () => workspaceService.workspaceMembers(workspaceSlug) : null
-  );
-
-  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
-  );
-
-  return {
-    workspaceMembers,
-    workspaceMemberErrors,
-    hasJoined,
-    isOwner,
-    isMember,
-    isViewer,
-    isGuest,
-  };
-};
-
-export default useWorkspaceMembers;
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
deleted file mode 100644
index d924d0f69..000000000
--- a/web/hooks/use-workspaces.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-const useWorkspaces = () => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // API to fetch user information
-  const { data, error, mutate } = useSWR(USER_WORKSPACES, () => workspaceService.userWorkspaces());
-  // active workspace
-  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
-
-  return {
-    workspaces: data,
-    error,
-    activeWorkspace,
-    mutateWorkspaces: mutate,
-  };
-};
-
-export default useWorkspaces;
diff --git a/web/layouts/app-layout/app-header.tsx b/web/layouts/app-layout/app-header.tsx
deleted file mode 100644
index 27c52f654..000000000
--- a/web/layouts/app-layout/app-header.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// next imports
-import { useRouter } from "next/router";
-import Link from "next/link";
-// icons
-import { Bars3Icon } from "@heroicons/react/24/outline";
-// ui components
-import { Tooltip } from "components/ui";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-type Props = {
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-  noHeader: boolean;
-};
-
-const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
-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";
-}
-
-const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => {
-  const { projectDetails } = useProjectDetails();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  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 px-5 py-4 ${
-        noHeader ? "md:hidden" : ""
-      }`}
-    >
-      <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={() => setToggleSidebar((prevData) => !prevData)}
-          >
-            <Bars3Icon className="h-5 w-5" />
-          </button>
-        </div>
-        <div>{breadcrumbs}</div>
-
-        {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"
-              >
-                <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>
-                  </div>
-                  <div className="text-xs font-medium">Public</div>
-                  <div className="w-[14px] h-[14px] hidden group-hover:flex justify-center items-center">
-                    <span className="material-symbols-rounded text-[14px]">open_in_new</span>
-                  </div>
-                </div>
-              </Tooltip>
-            </a>
-          </Link>
-        )}
-
-        <div className="flex-shrink-0">{left}</div>
-      </div>
-      <div className="flex-shrink-0">{right}</div>
-    </div>
-  );
-};
-
-export default Header;
diff --git a/web/layouts/app-layout/app-sidebar.tsx b/web/layouts/app-layout/app-sidebar.tsx
deleted file mode 100644
index 19878458a..000000000
--- a/web/layouts/app-layout/app-sidebar.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import dynamic from "next/dynamic";
-// hooks
-import useTheme from "hooks/use-theme";
-// components
-import {
-  WorkspaceHelpSection,
-  WorkspaceSidebarDropdown,
-  WorkspaceSidebarMenu,
-} from "components/workspace";
-
-const WorkspaceSidebarQuickAction = dynamic<{}>(
-  () =>
-    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";
-
-export interface SidebarProps {
-  toggleSidebar: boolean;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
-  const store: any = useMobxStore();
-  // theme
-  const { collapsed: sidebarCollapse } = useTheme();
-
-  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]"
-      } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
-    >
-      <div className="flex h-full w-full flex-1 flex-col">
-        <WorkspaceSidebarDropdown />
-        <WorkspaceSidebarQuickAction />
-        <WorkspaceSidebarMenu />
-        <ProjectSidebarList />
-        <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
-      </div>
-      {/* publish project modal */}
-      <PublishProjectModal />
-      {/* project leave modal */}
-      <ConfirmProjectLeaveModal />
-    </div>
-  );
-});
-
-export default Sidebar;
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..b16013280
--- /dev/null
+++ b/web/layouts/app-layout/layout.tsx
@@ -0,0 +1,37 @@
+import { FC, ReactNode } from "react";
+// layouts
+import { UserAuthWrapper, WorkspaceAuthWrapper, ProjectAuthWrapper } from "layouts/auth-layout";
+// components
+import { CommandPalette } from "components/command-palette";
+import { AppSidebar } from "./sidebar";
+
+export interface IAppLayout {
+  children: ReactNode;
+  header: ReactNode;
+  withProjectWrapper?: boolean;
+}
+
+export const AppLayout: FC<IAppLayout> = (props) => {
+  const { children, header, withProjectWrapper = false } = 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">
+              {header}
+              <div className="h-full w-full overflow-hidden">
+                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
+                  {withProjectWrapper ? <ProjectAuthWrapper>{children}</ProjectAuthWrapper> : <>{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/index.ts b/web/layouts/auth-layout/index.ts
index 6790a6b16..fcd53c5eb 100644
--- a/web/layouts/auth-layout/index.ts
+++ b/web/layouts/auth-layout/index.ts
@@ -1,2 +1,3 @@
-export * from "./project-authorization-wrapper";
-export * from "./workspace-authorization-wrapper";
+export * from "./user-wrapper";
+export * from "./workspace-wrapper";
+export * from "./project-wrapper";
diff --git a/web/layouts/auth-layout/project-authorization-wrapper.tsx b/web/layouts/auth-layout/project-authorization-wrapper.tsx
deleted file mode 100644
index 386883736..000000000
--- a/web/layouts/auth-layout/project-authorization-wrapper.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useState } from "react";
-
-import Link from "next/link";
-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";
-// components
-import { NotAuthorizedView, JoinProject } from "components/auth-screens";
-import { CommandPalette } from "components/command-palette";
-// ui
-import { EmptyState, PrimaryButton, Spinner } from "components/ui";
-// icons
-import { LayerDiagonalIcon } from "components/icons";
-// images
-import emptyProject from "public/empty-state/project.svg";
-
-type Props = {
-  children: React.ReactNode;
-  noHeader?: boolean;
-  bg?: "primary" | "secondary";
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-};
-
-export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
-  <ProjectMemberProvider>
-    <WorkspaceViewProvider>
-      <ProjectAuthorizationWrapped {...props} />
-    </WorkspaceViewProvider>
-  </ProjectMemberProvider>
-);
-
-const ProjectAuthorizationWrapped: React.FC<Props> = ({
-  children,
-  noHeader = false,
-  bg = "primary",
-  breadcrumbs,
-  left,
-  right,
-}) => {
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { loading, error, memberRole: memberType } = useProjectMyMembership();
-
-  const settingsLayout = router.pathname.includes("/settings");
-
-  return (
-    <>
-      <CommandPalette />
-      <div className="relative flex h-screen w-full overflow-hidden">
-        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-
-        {loading ? (
-          <div className="grid h-full w-full place-items-center p-4 bg-custom-background-100">
-            <div className="flex flex-col items-center gap-3 text-center">
-              <h3 className="text-xl">Loading your project...</h3>
-              <Spinner />
-            </div>
-          </div>
-        ) : error?.status === 401 || error?.status === 403 ? (
-          <JoinProject />
-        ) : error?.status === 404 ? (
-          <div className="container grid h-screen place-items-center bg-custom-background-100">
-            <EmptyState
-              title="No such project exists"
-              description="Try creating a new project"
-              image={emptyProject}
-              primaryButton={{
-                text: "Create Project",
-                onClick: () => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "p",
-                  });
-                  document.dispatchEvent(e);
-                },
-              }}
-            />
-          </div>
-        ) : settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
-          <NotAuthorizedView
-            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>
-                </a>
-              </Link>
-            }
-            type="project"
-          />
-        ) : (
-          <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="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
-            </div>
-          </main>
-        )}
-      </div>
-    </>
-  );
-};
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
new file mode 100644
index 000000000..225e92f2a
--- /dev/null
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -0,0 +1,127 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { Spinner } from "@plane/ui";
+import { JoinProject } from "components/auth-screens";
+import { EmptyState } from "components/common";
+// images
+import emptyProject from "public/empty-state/project.svg";
+
+interface IProjectAuthWrapper {
+  children: ReactNode;
+}
+
+export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
+  const { children } = props;
+  // store
+  const {
+    user: { fetchUserProjectInfo, projectMemberInfo, hasPermissionToProject },
+    project: { fetchProjectDetails, fetchProjectLabels, fetchProjectEstimates, workspaceProjects },
+    projectMember: { fetchProjectMembers },
+    projectState: { fetchProjectStates },
+    cycle: { fetchCycles },
+    module: { fetchModules },
+    projectViews: { fetchAllViews },
+    inbox: { fetchInboxesList, isInboxEnabled },
+    commandPalette: { toggleCreateProjectModal },
+  } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // fetching project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching user project member information
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project labels
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project members
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project estimates
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project cycles
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchCycles(workspaceSlug.toString(), projectId.toString(), "all") : null
+  );
+  // fetching project modules
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchModules(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project views
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchAllViews(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // TODO: fetching project pages
+  // fetching project inboxes if inbox is enabled
+  useSWR(
+    workspaceSlug && projectId && isInboxEnabled ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && isInboxEnabled
+      ? () => fetchInboxesList(workspaceSlug.toString(), projectId.toString())
+      : null,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const projectsList = workspaceSlug ? workspaceProjects : null;
+  const projectExists = projectId ? projectsList?.find((project) => project.id === projectId.toString()) : null;
+
+  // check if the project member apis is loading
+  if (!projectMemberInfo && projectId && hasPermissionToProject[projectId.toString()] === 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>
+    );
+
+  // check if the user don't have permission to access the project
+  if (projectExists && projectId && hasPermissionToProject[projectId.toString()] === false) return <JoinProject />;
+
+  // check if the project info is not found.
+  if (!projectExists && projectId && hasPermissionToProject[projectId.toString()] === false)
+    return (
+      <div className="container grid h-screen place-items-center bg-custom-background-100">
+        <EmptyState
+          title="No such project exists"
+          description="Try creating a new project"
+          image={emptyProject}
+          primaryButton={{
+            text: "Create Project",
+            onClick: () => toggleCreateProjectModal(true),
+          }}
+        />
+      </div>
+    );
+
+  return <>{children}</>;
+});
diff --git a/web/layouts/auth-layout/user-authorization-wrapper.tsx b/web/layouts/auth-layout/user-authorization-wrapper.tsx
deleted file mode 100644
index f48403b0f..000000000
--- a/web/layouts/auth-layout/user-authorization-wrapper.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// ui
-import { Spinner } from "components/ui";
-// fetch-keys
-import { CURRENT_USER } from "constants/fetch-keys";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
-  const router = useRouter();
-
-  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">
-          <h3 className="text-xl">Loading your profile...</h3>
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    const redirectTo = router.asPath;
-
-    router.push(`/?next=${redirectTo}`);
-    return null;
-  }
-
-  return <>{children}</>;
-};
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
new file mode 100644
index 000000000..6072f1673
--- /dev/null
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -0,0 +1,52 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// ui
+import { Spinner } from "@plane/ui";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IUserAuthWrapper {
+  children: ReactNode;
+}
+
+export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
+  const { children } = props;
+  // store
+  const {
+    user: { fetchCurrentUser, fetchCurrentUserSettings },
+    workspace: { fetchWorkspaces },
+  } = useMobxStore();
+  // router
+  const router = useRouter();
+  // fetching user information
+  const { data: currentUser, error } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+  // fetching user settings
+  useSWR("CURRENT_USER_SETTINGS", () => fetchCurrentUserSettings(), {
+    shouldRetryOnError: false,
+  });
+  // fetching all workspaces
+  useSWR(`USER_WORKSPACES_LIST`, () => fetchWorkspaces(), {
+    shouldRetryOnError: false,
+  });
+
+  if (!currentUser && !error) {
+    return (
+      <div className="h-screen grid place-items-center p-4 bg-custom-background-100">
+        <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-authorization-wrapper.tsx b/web/layouts/auth-layout/workspace-authorization-wrapper.tsx
deleted file mode 100644
index c8088a731..000000000
--- a/web/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-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";
-// 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 { UserAuthorizationLayout } from "./user-authorization-wrapper";
-// components
-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";
-
-type Props = {
-  children: React.ReactNode;
-  noHeader?: boolean;
-  bg?: "primary" | "secondary";
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-};
-
-export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
-  children,
-  noHeader = false,
-  bg = "primary",
-  breadcrumbs,
-  left,
-  right,
-}) => {
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: workspaceMemberMe, error } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceServices.workspaceMemberMe(workspaceSlug.toString()) : null
-  );
-
-  if (!workspaceMemberMe && !error)
-    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">
-          <h3 className="text-xl">Loading your workspace...</h3>
-          <Spinner />
-        </div>
-      </div>
-    );
-
-  if (error?.status === 401 || error?.status === 403) return <NotAWorkspaceMember />;
-
-  // FIXME: show 404 for workspace not workspace member
-  if (error?.status === 404) {
-    return (
-      <div className="container flex h-screen items-center justify-center bg-custom-background-100">
-        <p className="text-2xl font-semibold">No such workspace exists. Create one?</p>
-      </div>
-    );
-  }
-
-  const settingsLayout = router.pathname.includes("/settings");
-  const memberType = {
-    isOwner: workspaceMemberMe?.role === 20,
-    isMember: workspaceMemberMe?.role === 15,
-    isViewer: workspaceMemberMe?.role === 10,
-    isGuest: workspaceMemberMe?.role === 5,
-  };
-
-  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"
-              />
-            ) : (
-              <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>
-      </WorkspaceMemberProvider>
-    </UserAuthorizationLayout>
-  );
-};
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
new file mode 100644
index 000000000..3cfe4e7c8
--- /dev/null
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -0,0 +1,95 @@
+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 { Button, Spinner } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IWorkspaceAuthWrapper {
+  children: ReactNode;
+}
+
+export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+  const { children } = props;
+  // store
+  const {
+    user: { currentWorkspaceMemberInfo, hasPermissionToCurrentWorkspace, fetchUserWorkspaceInfo },
+    project: { fetchProjects },
+    workspace: { fetchWorkspaceLabels },
+    workspaceMember: { fetchWorkspaceMembers },
+  } = useMobxStore();
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // fetching user workspace information
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchUserWorkspaceInfo(workspaceSlug.toString()) : null
+  );
+  // fetching workspace projects
+  useSWR(
+    workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchProjects(workspaceSlug.toString()) : null
+  );
+  // fetch workspace members
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
+  );
+  // fetch workspace labels
+  useSWR(
+    workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  // while data is being loaded
+  if (!currentWorkspaceMemberInfo && hasPermissionToCurrentWorkspace === undefined) {
+    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 (hasPermissionToCurrentWorkspace !== undefined && hasPermissionToCurrentWorkspace === 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>
+                  <Button variant="neutral-primary" size="sm">
+                    Check pending invites
+                  </Button>
+                </a>
+              </Link>
+              <Link href="/create-workspace">
+                <a>
+                  <Button variant="primary" size="sm">
+                    Create new workspace
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+});
diff --git a/web/layouts/default-layout/index.tsx b/web/layouts/default-layout/index.tsx
index 5f31dcd67..ea647312b 100644
--- a/web/layouts/default-layout/index.tsx
+++ b/web/layouts/default-layout/index.tsx
@@ -1,12 +1,12 @@
+import { FC, ReactNode } from "react";
+
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
   gradient?: boolean;
 };
 
-const DefaultLayout: React.FC<Props> = ({ children, gradient = false }) => (
-  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>
-    {children}
-  </div>
+const DefaultLayout: FC<Props> = ({ children, gradient = false }) => (
+  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>{children}</div>
 );
 
 export default DefaultLayout;
diff --git a/web/layouts/profile-layout.tsx b/web/layouts/profile-layout.tsx
deleted file mode 100644
index 46ac24d8e..000000000
--- a/web/layouts/profile-layout.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// hooks
-import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// components
-import { ProfileNavbar, ProfileSidebar } from "components/profile";
-// ui
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export const ProfileAuthWrapper = (props: Props) => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <Breadcrumbs>
-        <BreadcrumbItem title="User Profile" />
-      </Breadcrumbs>
-    }
-  >
-    <ProfileLayout {...props} />
-  </WorkspaceAuthorizationLayout>
-);
-
-const ProfileLayout: React.FC<Props> = ({ children, className }) => {
-  const { memberRole } = useWorkspaceMyMembership();
-
-  return (
-    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
-      <ProfileSidebar />
-      <div className="md:h-full w-full flex flex-col md:overflow-hidden">
-        <ProfileNavbar memberRole={memberRole} />
-        {memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? (
-          <div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
-        ) : (
-          <div className="h-full w-full grid place-items-center text-custom-text-200">
-            You do not have the permission to access this page.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/issues/gantt-chart/index.ts b/web/layouts/profile-layout/index.ts
similarity index 50%
rename from web/components/issues/gantt-chart/index.ts
rename to web/layouts/profile-layout/index.ts
index 7f0d16273..eec9d1e67 100644
--- a/web/components/issues/gantt-chart/index.ts
+++ b/web/layouts/profile-layout/index.ts
@@ -1,2 +1 @@
-export * from "./blocks";
 export * from "./layout";
diff --git a/web/layouts/profile-layout/layout.tsx b/web/layouts/profile-layout/layout.tsx
new file mode 100644
index 000000000..4127530da
--- /dev/null
+++ b/web/layouts/profile-layout/layout.tsx
@@ -0,0 +1,47 @@
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { ProfileNavbar, ProfileSidebar } from "components/profile";
+// constants
+import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  showProfileIssuesFilter?: boolean;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const ProfileAuthWrapper: React.FC<Props> = (props) => {
+  const { children, className, showProfileIssuesFilter } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: memberDetails } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
+  );
+
+  const isAuthorized = memberDetails?.role === 20 || memberDetails?.role === 15 || memberDetails?.role === 10;
+
+  return (
+    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
+      <ProfileSidebar />
+      <div className="md:h-full w-full flex flex-col md:overflow-hidden">
+        <ProfileNavbar isAuthorized={isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
+        {isAuthorized ? (
+          <div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
+        ) : (
+          <div className="h-full w-full grid place-items-center text-custom-text-200">
+            You do not have the permission to access this page.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/index.ts b/web/layouts/settings-layout/index.ts
new file mode 100644
index 000000000..acaed01ba
--- /dev/null
+++ b/web/layouts/settings-layout/index.ts
@@ -0,0 +1,2 @@
+export * from "./project";
+export * from "./workspace";
diff --git a/web/layouts/settings-layout/project/index.tsx b/web/layouts/settings-layout/project/index.tsx
new file mode 100644
index 000000000..c4bfd4db3
--- /dev/null
+++ b/web/layouts/settings-layout/project/index.tsx
@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./sidebar";
diff --git a/web/layouts/settings-layout/project/layout.tsx b/web/layouts/settings-layout/project/layout.tsx
new file mode 100644
index 000000000..7a0bee0eb
--- /dev/null
+++ b/web/layouts/settings-layout/project/layout.tsx
@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+// components
+import { ProjectSettingsSidebar } from "./sidebar";
+
+export interface IProjectSettingLayout {
+  children: ReactNode;
+}
+
+export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
+  const { children } = props;
+
+  return (
+    <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+      <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+        <ProjectSettingsSidebar />
+      </div>
+      {children}
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/project/sidebar.tsx b/web/layouts/settings-layout/project/sidebar.tsx
new file mode 100644
index 000000000..2ce97dd88
--- /dev/null
+++ b/web/layouts/settings-layout/project/sidebar.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+export const ProjectSettingsSidebar = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const projectLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
+    },
+    {
+      label: "Features",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
+    },
+    {
+      label: "States",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
+    },
+    {
+      label: "Estimates",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
+    },
+    {
+      label: "Automations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-6 w-80 px-5">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
+        <div className="flex flex-col gap-1 w-full">
+          {projectLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <a>
+                <div
+                  className={`px-4 py-2 text-sm font-medium rounded-md ${
+                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.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"
+                  }`}
+                >
+                  {link.label}
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/workspace/index.tsx b/web/layouts/settings-layout/workspace/index.tsx
new file mode 100644
index 000000000..c4bfd4db3
--- /dev/null
+++ b/web/layouts/settings-layout/workspace/index.tsx
@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./sidebar";
diff --git a/web/layouts/settings-layout/workspace/layout.tsx b/web/layouts/settings-layout/workspace/layout.tsx
new file mode 100644
index 000000000..a584c26c1
--- /dev/null
+++ b/web/layouts/settings-layout/workspace/layout.tsx
@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+// components
+import { WorkspaceSettingsSidebar } from "./sidebar";
+
+export interface IWorkspaceSettingLayout {
+  children: ReactNode;
+}
+
+export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
+  const { children } = props;
+
+  return (
+    <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+      <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+        <WorkspaceSettingsSidebar />
+      </div>
+      {children}
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/workspace/sidebar.tsx b/web/layouts/settings-layout/workspace/sidebar.tsx
new file mode 100644
index 000000000..34ef39dd1
--- /dev/null
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+export const WorkspaceSettingsSidebar = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const workspaceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/settings/members`,
+    },
+    {
+      label: "Billing & Plans",
+      href: `/${workspaceSlug}/settings/billing`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/settings/integrations`,
+    },
+    {
+      label: "Imports",
+      href: `/${workspaceSlug}/settings/imports`,
+    },
+    {
+      label: "Exports",
+      href: `/${workspaceSlug}/settings/exports`,
+    },
+  ];
+
+  const profileLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "Profile",
+      href: `/${workspaceSlug}/me/profile`,
+    },
+    {
+      label: "Activity",
+      href: `/${workspaceSlug}/me/profile/activity`,
+    },
+    {
+      label: "Preferences",
+      href: `/${workspaceSlug}/me/profile/preferences`,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6 w-80 px-5">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
+        <div className="flex flex-col gap-1 w-full">
+          {workspaceLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <a>
+                <div
+                  className={`px-4 py-2 text-sm font-medium rounded-md ${
+                    router.pathname.split("/")?.[3] === link.href.split("/")?.[3]
+                      ? "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"
+                  }`}
+                >
+                  {link.label}
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
+        <div className="flex flex-col gap-1 w-full">
+          {profileLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <a>
+                <div
+                  className={`px-4 py-2 text-sm font-medium rounded-md ${
+                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.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"
+                  }`}
+                >
+                  {link.label}
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/layouts/web-view-layout/index.tsx b/web/layouts/web-view-layout/index.tsx
deleted file mode 100644
index 8a58407c3..000000000
--- a/web/layouts/web-view-layout/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// swr
-import useSWR from "swr";
-
-// services
-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/ui";
-
-type Props = {
-  children: React.ReactNode;
-  fullScreen?: boolean;
-};
-
-const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
-  const safari = /safari/.test(userAgent);
-
-  if (safari) return false;
-  else if (/iphone|ipod|ipad/.test(userAgent) || userAgent.includes("wv")) return true;
-  else return false;
-};
-
-const useMobileDetect = () => {
-  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
-  return getIfInWebview(userAgent);
-};
-
-const WebViewLayout: React.FC<Props> = ({ children, fullScreen = true }) => {
-  const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
-
-  const isWebview = useMobileDetect();
-
-  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">
-          <h3 className="text-xl">Loading your profile...</h3>
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={fullScreen ? "h-screen w-full bg-custom-background-100" : ""}>
-      {error || !isWebview ? (
-        <div className="flex flex-col items-center justify-center gap-y-3 h-full text-center text-custom-text-200">
-          <AlertCircle size={64} />
-          <h2 className="text-2xl font-semibold">You are not authorized to view this page.</h2>
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-};
-
-export default WebViewLayout;
diff --git a/web/lib/auth.ts b/web/lib/auth.ts
index 56cfab9ae..6f84db402 100644
--- a/web/lib/auth.ts
+++ b/web/lib/auth.ts
@@ -76,15 +76,12 @@ export const requiredWorkspaceAdmin = async (workspaceSlug: string, cookie?: str
   let memberDetail: IWorkspaceMember | null = null;
 
   try {
-    const data = await fetch(
-      `${API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-members/me/`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    )
+    const data = await fetch(`${API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-members/me/`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
       .then((res) => res.json())
       .then((data) => data);
 
@@ -143,9 +140,7 @@ export const homePageRedirect = async (cookie?: string) => {
     };
   }
 
-  const lastActiveWorkspace = workspaces.find(
-    (workspace) => workspace.id === user.last_workspace_id
-  );
+  const lastActiveWorkspace = workspaces.find((workspace) => workspace.id === user.last_workspace_id);
 
   if (lastActiveWorkspace) {
     return {
diff --git a/web/lib/local-storage.ts b/web/lib/local-storage.ts
new file mode 100644
index 000000000..41d66fe0c
--- /dev/null
+++ b/web/lib/local-storage.ts
@@ -0,0 +1,21 @@
+export const getLocalStorage = (key: string) => {
+  if (typeof window === undefined || typeof window === "undefined") return null;
+  try {
+    const item = window.localStorage.getItem(key);
+    return item ? item : null;
+  } catch (error) {
+    window.localStorage.removeItem(key);
+    return null;
+  }
+};
+
+export const setLocalStorage = (key: string, value: any) => {
+  if (key && value) {
+    const _value = value ? (["string", "boolean"].includes(typeof value) ? value : JSON.stringify(value)) : null;
+    if (_value) window.localStorage.setItem(key, _value);
+  }
+};
+
+export const removeLocalStorage = (key: string) => {
+  if (key) window.localStorage.removeItem(key);
+};
diff --git a/web/lib/mobx/store-init.tsx b/web/lib/mobx/store-init.tsx
index 771d8eaba..f89aa72c7 100644
--- a/web/lib/mobx/store-init.tsx
+++ b/web/lib/mobx/store-init.tsx
@@ -1,53 +1,92 @@
-import { useEffect } from "react";
-// next themes
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
 
-const MobxStoreInit = () => {
-  const store: any = useMobxStore();
+const MobxStoreInit = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
+  // store
+  const {
+    theme: { sidebarCollapsed, toggleSidebar },
+    user: { currentUser },
+    workspace: { setWorkspaceSlug },
+    project: { setProjectId },
+    cycle: { setCycleId },
+    module: { setModuleId },
+    globalViews: { setGlobalViewId },
+    projectViews: { setViewId },
+    inbox: { setInboxId },
+    appConfig: { fetchAppConfig },
+  } = useMobxStore();
+  // fetching application Config
+  useSWR("APP_CONFIG", () => fetchAppConfig(), { revalidateIfStale: false, revalidateOnFocus: false });
+  // state
+  const [dom, setDom] = useState<any>();
+  // theme
   const { setTheme } = useTheme();
 
+  /**
+   * Sidebar collapsed fetching from local storage
+   */
   useEffect(() => {
-    // sidebar collapsed toggle
-    if (
-      localStorage &&
-      localStorage.getItem("app_sidebar_collapsed") &&
-      store?.theme?.sidebarCollapsed === null
-    )
-      store.theme.setSidebarCollapsed(
-        localStorage.getItem("app_sidebar_collapsed")
-          ? localStorage.getItem("app_sidebar_collapsed") === "true"
-            ? true
-            : false
-          : false
-      );
-
-    // theme
-    if (
-      (store.theme.theme === null || store.theme.theme === "undefined") &&
-      store?.user?.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 } });
-      }
+    const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (localValue && sidebarCollapsed === undefined) {
+      toggleSidebar(localBoolValue);
     }
-  }, [store?.theme, store?.user, setTheme]);
+  }, [sidebarCollapsed, currentUser, setTheme, toggleSidebar]);
 
+  /**
+   * Setting up the theme of the user by fetching it from local storage
+   */
   useEffect(() => {
-    // current user
-    if (store?.user?.currentUser === null) store.user.setCurrentUser();
+    if (!currentUser) return;
+    if (window) {
+      setDom(window.document?.querySelector<HTMLElement>("[data-theme='custom']"));
+    }
+    setTheme(currentUser?.theme?.theme || "system");
+    if (currentUser?.theme?.theme === "custom" && dom) {
+      applyTheme(currentUser?.theme?.palette, false);
+    } else unsetCustomCssVariables();
+  }, [currentUser, setTheme, dom]);
 
-    // current user settings
-    if (store?.user?.currentUserSettings === null) store.user.setCurrentUserSettings();
-  }, [store?.user]);
+  /**
+   * Setting router info to the respective stores.
+   */
+  useEffect(() => {
+    if (workspaceSlug) setWorkspaceSlug(workspaceSlug.toString());
+
+    setProjectId(projectId?.toString() ?? null);
+    setCycleId(cycleId?.toString() ?? null);
+    setModuleId(moduleId?.toString() ?? null);
+    setGlobalViewId(globalViewId?.toString() ?? null);
+    setViewId(viewId?.toString() ?? null);
+    setInboxId(inboxId?.toString() ?? null);
+  }, [
+    workspaceSlug,
+    projectId,
+    cycleId,
+    moduleId,
+    globalViewId,
+    viewId,
+    inboxId,
+    setWorkspaceSlug,
+    setProjectId,
+    setCycleId,
+    setModuleId,
+    setGlobalViewId,
+    setViewId,
+    setInboxId,
+  ]);
 
   return <></>;
-};
+});
 
 export default MobxStoreInit;
diff --git a/web/next.config.js b/web/next.config.js
index 058a68b7d..f48ccd9a6 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -3,24 +3,17 @@ require("dotenv").config({ path: ".env" });
 const { withSentryConfig } = require("@sentry/nextjs");
 const path = require("path");
 
-const extraImageDomains = (process.env.NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS ?? "")
-  .split(",")
-  .filter((domain) => domain.length > 0);
-
 const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   images: {
-    domains: [
-      "vinci-web.s3.amazonaws.com",
-      "planefs-staging.s3.ap-south-1.amazonaws.com",
-      "planefs.s3.amazonaws.com",
-      "planefs-staging.s3.amazonaws.com",
-      "images.unsplash.com",
-      "avatars.githubusercontent.com",
-      "localhost",
-      ...extraImageDomains,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
     ],
+    unoptimized: true,
   },
   output: "standalone",
   experimental: {
diff --git a/web/package.json b/web/package.json
index e0cf4efed..b2791978f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -3,21 +3,18 @@
   "version": "0.13.2",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3000",
+    "dev": "turbo run develop",
+    "develop": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
-    "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.3",
-    "@heroicons/react": "^2.0.12",
+    "@hello-pangea/dnd": "^16.3.0",
     "@jitsu/nextjs": "^3.1.5",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.1",
     "@nivo/bar": "0.80.0",
     "@nivo/calendar": "0.80.0",
     "@nivo/core": "0.80.0",
@@ -25,38 +22,19 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
+    "@plane/lite-text-editor": "*",
+    "@plane/rich-text-editor": "*",
+    "@plane/ui": "*",
+    "@popperjs/core": "^2.11.8",
     "@sentry/nextjs": "^7.36.0",
-    "@tiptap/extension-code-block-lowlight": "^2.0.4",
-    "@tiptap/extension-color": "^2.0.4",
-    "@tiptap/extension-gapcursor": "^2.1.7",
-    "@tiptap/extension-highlight": "^2.0.4",
-    "@tiptap/extension-horizontal-rule": "^2.0.4",
-    "@tiptap/extension-image": "^2.0.4",
-    "@tiptap/extension-link": "^2.0.4",
-    "@tiptap/extension-placeholder": "^2.0.4",
-    "@tiptap/extension-table": "^2.1.6",
-    "@tiptap/extension-table-cell": "^2.1.6",
-    "@tiptap/extension-table-header": "^2.1.6",
-    "@tiptap/extension-table-row": "^2.1.6",
-    "@tiptap/extension-task-item": "^2.0.4",
-    "@tiptap/extension-task-list": "^2.0.4",
-    "@tiptap/extension-text-style": "^2.0.4",
-    "@tiptap/extension-underline": "^2.0.4",
-    "@tiptap/pm": "^2.0.4",
-    "@tiptap/react": "^2.0.4",
-    "@tiptap/starter-kit": "^2.0.4",
-    "@tiptap/suggestion": "^2.0.4",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
-    "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "dotenv": "^16.0.3",
-    "highlight.js": "^11.8.0",
     "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",
@@ -64,31 +42,24 @@
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
     "react": "18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.38.0",
     "react-markdown": "^8.0.7",
-    "react-moveable": "^0.54.1",
+    "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
-    "sonner": "^0.6.2",
     "swr": "^2.1.3",
-    "tailwind-merge": "^1.14.0",
-    "tiptap-markdown": "^0.8.2",
-    "tlds": "^1.238.0",
-    "use-debounce": "^9.0.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.2",
     "@types/node": "18.0.6",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "18.0.15",
-    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react": "^18.2.35",
     "@types/react-color": "^3.0.6",
-    "@types/react-dom": "18.0.6",
+    "@types/react-dom": "^18.2.14",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
@@ -99,8 +70,5 @@
     "tailwind-config-custom": "*",
     "tsconfig": "*",
     "typescript": "4.7.4"
-  },
-  "resolutions": {
-    "prosemirror-model": "1.18.1"
   }
 }
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index 6386093a7..a1f462f2c 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>
+          <a className="flex justify-center">
+            <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..a71904e67 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -1,154 +1,110 @@
-import React, { Fragment, useEffect } from "react";
-
+import React, { Fragment, useEffect, ReactElement } 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
+import { Plus } from "lucide-react";
+// 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";
+// type
+import { NextPageWithLayout } from "types/app";
 
-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: NextPageWithLayout = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
-  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
-  );
+  // store
+  const {
+    project: { workspaceProjects },
+    user: { currentUser },
+    commandPalette: { toggleCreateProjectModal },
+  } = useMobxStore();
 
   const trackAnalyticsEvent = (tab: string) => {
+    if (!currentUser) return;
     const eventPayload = {
       workspaceSlug: workspaceSlug?.toString(),
     };
-
     const eventType =
-      tab === "Scope and Demand"
-        ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS"
-        : "WORKSPACE_CUSTOM_ANALYTICS";
-
-    trackEventServices.trackAnalyticsEvent(eventPayload, eventType, user);
+      tab === "scope_and_demand" ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS" : "WORKSPACE_CUSTOM_ANALYTICS";
+    trackEventService.trackAnalyticsEvent(eventPayload, eventType, currentUser);
   };
 
   useEffect(() => {
     if (!workspaceSlug) return;
 
-    if (user && workspaceSlug)
-      trackEventServices.trackAnalyticsEvent(
+    if (currentUser && workspaceSlug)
+      trackEventService.trackAnalyticsEvent(
         { workspaceSlug: workspaceSlug?.toString() },
         "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS",
-        user
+        currentUser
       );
-  }, [user, workspaceSlug]);
+  }, [currentUser, workspaceSlug]);
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Workspace Analytics" />
-        </Breadcrumbs>
-      }
-    >
-      {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) => (
-                  <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>
-              <Tab.Panels as={Fragment}>
-                <Tab.Panel as={Fragment}>
-                  <ScopeAndDemand fullScreen />
-                </Tab.Panel>
-                <Tab.Panel as={Fragment}>
-                  <CustomAnalytics
-                    analytics={analytics}
-                    analyticsError={analyticsError}
-                    params={params}
-                    control={control}
-                    setValue={setValue}
-                    user={user}
-                    fullScreen
-                  />
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
-          </div>
-        ) : (
+    <>
+      {workspaceProjects && workspaceProjects.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">
+              {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={Fragment}>
+              <Tab.Panel as={Fragment}>
+                <ScopeAndDemand fullScreen />
+              </Tab.Panel>
+              <Tab.Panel as={Fragment}>
+                <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."
+            description="Let's create your first project and analyze the stats with various graphs."
             image={emptyAnalytics}
             primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
+              icon: <Plus className="h-4 w-4" />,
               text: "New Project",
-              onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "p",
-                });
-                document.dispatchEvent(e);
-              },
+              onClick: () => toggleCreateProjectModal(true),
             }}
           />
-        )
-      ) : null}
-    </WorkspaceAuthorizationLayout>
+        </>
+      )}
+    </>
   );
+});
+
+AnalyticsPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<WorkspaceAnalyticsHeader />}>{page}</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 711e4a166..000000000
--- a/web/pages/[workspaceSlug]/editor.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { TipTapEditor } from "components/tiptap";
-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";
-
-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 } }) => (
-          <TipTapEditor
-            borderOnFocus={false}
-            value={
-              !value ||
-              value === "" ||
-              (typeof value === "object" && Object.keys(value).length === 0)
-                ? watch("description_html")
-                : value
-            }
-            editable={editable === "true"}
-            noBorder={true}
-            workspaceSlug={cookies.MOBILE_slug ?? ""}
-            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..daeb8aae5 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -1,211 +1,16 @@
-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";
+import { ReactElement } from "react";
 // 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";
+import { AppLayout } from "layouts/app-layout";
 // 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";
+import { WorkspaceDashboardView } from "components/page-views";
+import { WorkspaceDashboardHeader } from "components/headers/workspace-dashboard";
 // types
-import { ICurrentUserResponse } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { CURRENT_USER, USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
+import { NextPageWithLayout } from "types/app";
 
-const Greeting = ({ user }: { user: ICurrentUserResponse | undefined }) => {
-  const currentTime = new Date();
+const WorkspacePage: NextPageWithLayout = () => <WorkspaceDashboardView />;
 
-  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>
-  );
+WorkspacePage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<WorkspaceDashboardHeader />}>{page}</AppLayout>;
 };
 
 export default WorkspacePage;
diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
deleted file mode 100644
index 5b6ae3ecd..000000000
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// 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 { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
-// types
-import type { NextPage } from "next";
-import useUser from "hooks/use-user";
-
-const MyIssuesPage: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-
-  const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const tabsList = [
-    {
-      key: "assigned",
-      label: "Assigned",
-      selected: (filters?.assignees ?? []).length > 0,
-      onClick: () => {
-        setFilters({
-          assignees: [user?.id ?? ""],
-          created_by: null,
-          subscriber: null,
-        });
-      },
-    },
-    {
-      key: "created",
-      label: "Created",
-      selected: (filters?.created_by ?? []).length > 0,
-      onClick: () => {
-        setFilters({
-          assignees: null,
-          created_by: [user?.id ?? ""],
-          subscriber: null,
-        });
-      },
-    },
-    {
-      key: "subscribed",
-      label: "Subscribed",
-      selected: (filters?.subscriber ?? []).length > 0,
-      onClick: () => {
-        setFilters({
-          assignees: null,
-          created_by: null,
-          subscriber: [user?.id ?? ""],
-        });
-      },
-    },
-  ];
-
-  useEffect(() => {
-    if (!filters || !user) return;
-
-    if (!filters.assignees && !filters.created_by && !filters.subscriber) {
-      setFilters({
-        assignees: [user.id],
-      });
-      return;
-    }
-  }, [filters, setFilters, user]);
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="My Issues" />
-        </Breadcrumbs>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <MyIssuesViewOptions />
-          <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>
-      }
-    >
-      <div className="h-full w-full flex flex-col overflow-hidden">
-        <div className="px-4 sm:px-5 border-b border-custom-border-300">
-          <div className="flex items-center overflow-x-scroll">
-            {tabsList.map((tab) => (
-              <button
-                key={tab.key}
-                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.label}
-              </button>
-            ))}
-          </div>
-        </div>
-        <MyIssuesView />
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-export default MyIssuesPage;
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index d8588390e..820a62596 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -1,27 +1,30 @@
+import { ReactElement } from "react";
 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 { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
-import { TipTapEditor } from "components/tiptap";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+import { WorkspaceSettingHeader } from "components/headers";
 // icons
-import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
+import { History, MessageSquare } from "lucide-react";
 // ui
-import { Icon, Loader } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { ExternalLinkIcon, 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";
+// type
+import { NextPageWithLayout } from "types/app";
 
-const ProfileActivity = () => {
+const userService = new UserService();
+
+const ProfileActivityPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -31,197 +34,169 @@ const ProfileActivity = () => {
   );
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="My Profile Activity" />
-        </Breadcrumbs>
-      }
-    >
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
+    <>
+      {userActivity ? (
+        <section className="pr-9 py-8 w-full overflow-y-auto">
+          <div className="flex items-center py-3.5 border-b border-custom-border-100">
+            <h3 className="text-xl font-medium">Activity</h3>
+          </div>
+          <div className={`flex flex-col gap-2 py-4 w-full`}>
+            <ul role="list" className="-mb-4">
+              {userActivity.results.map((activityItem: any) => {
+                if (activityItem.field === "comment") {
+                  return (
+                    <div key={activityItem.id} className="mt-2">
+                      <div className="relative flex items-start space-x-3">
+                        <div className="relative px-1">
+                          {activityItem.field ? (
+                            activityItem.new_value === "restore" && (
+                              <History className="h-3.5 w-3.5 text-custom-text-200" />
+                            )
+                          ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                            <img
+                              src={activityItem.actor_detail.avatar}
+                              alt={activityItem.actor_detail.display_name}
+                              height={30}
+                              width={30}
+                              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`}
+                            >
+                              {activityItem.actor_detail.display_name?.charAt(0)}
+                            </div>
+                          )}
 
-        {userActivity ? (
-          <section className="pr-9 py-8 w-full overflow-y-auto">
-            <div className="flex items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">Activity</h3>
-            </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) => {
-                  if (activityItem.field === "comment") {
-                    return (
-                      <div key={activityItem.id} className="mt-2">
-                        <div className="relative flex items-start space-x-3">
-                          <div className="relative px-1">
-                            {activityItem.field ? (
-                              activityItem.new_value === "restore" && (
-                                <Icon iconName="history" className="text-sm text-custom-text-200" />
-                              )
-                            ) : activityItem.actor_detail.avatar &&
-                              activityItem.actor_detail.avatar !== "" ? (
-                              <img
-                                src={activityItem.actor_detail.avatar}
-                                alt={activityItem.actor_detail.display_name}
-                                height={30}
-                                width={30}
-                                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`}
-                              >
-                                {activityItem.actor_detail.display_name?.charAt(0)}
-                              </div>
-                            )}
-
-                            <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                              <ChatBubbleLeftEllipsisIcon
-                                className="h-6 w-6 !text-2xl text-custom-text-200"
-                                aria-hidden="true"
-                              />
-                            </span>
+                          <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
+                            <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div>
+                            <div className="text-xs">
+                              {activityItem.actor_detail.is_bot
+                                ? activityItem.actor_detail.first_name + " Bot"
+                                : activityItem.actor_detail.display_name}
+                            </div>
+                            <p className="mt-0.5 text-xs text-custom-text-200">
+                              Commented {timeAgo(activityItem.created_at)}
+                            </p>
                           </div>
-                          <div className="min-w-0 flex-1">
-                            <div>
-                              <div className="text-xs">
-                                {activityItem.actor_detail.is_bot
-                                  ? activityItem.actor_detail.first_name + " Bot"
-                                  : activityItem.actor_detail.display_name}
-                              </div>
-                              <p className="mt-0.5 text-xs text-custom-text-200">
-                                Commented {timeAgo(activityItem.created_at)}
-                              </p>
-                            </div>
-                            <div className="issue-comments-section p-0">
-                              <TipTapEditor
-                                workspaceSlug={workspaceSlug as string}
-                                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}
-                                editable={false}
-                              />
-                            </div>
+                          <div className="issue-comments-section p-0">
+                            <RichReadOnlyEditor
+                              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}
+                            />
                           </div>
                         </div>
                       </div>
-                    );
-                  }
+                    </div>
+                  );
+                }
 
-                  const message =
-                    activityItem.verb === "created" &&
-                    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}`}
-                        >
-                          <a className="inline-flex items-center hover:underline">
-                            this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
-                          </a>
-                        </Link>
-                      </span>
-                    ) : activityItem.field ? (
-                      <ActivityMessage activity={activityItem} showIssue />
-                    ) : (
-                      "created the issue."
-                    );
+                const message =
+                  activityItem.verb === "created" &&
+                  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}`}>
+                        <a className="inline-flex items-center hover:underline">
+                          this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
+                        </a>
+                      </Link>
+                    </span>
+                  ) : activityItem.field ? (
+                    <ActivityMessage activity={activityItem} showIssue />
+                  ) : (
+                    "created the issue."
+                  );
 
-                  if ("field" in activityItem && activityItem.field !== "updated_by") {
-                    return (
-                      <li key={activityItem.id}>
-                        <div className="relative pb-1">
-                          <div className="relative flex items-center space-x-2">
-                            <>
-                              <div>
-                                <div className="relative px-1.5">
-                                  <div className="mt-1.5">
-                                    <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"
-                                          />
-                                        ) : (
-                                          <ActivityIcon activity={activityItem} />
-                                        )
-                                      ) : activityItem.actor_detail.avatar &&
-                                        activityItem.actor_detail.avatar !== "" ? (
-                                        <img
-                                          src={activityItem.actor_detail.avatar}
-                                          alt={activityItem.actor_detail.display_name}
-                                          height={24}
-                                          width={24}
-                                          className="rounded-full"
-                                        />
+                if ("field" in activityItem && activityItem.field !== "updated_by") {
+                  return (
+                    <li key={activityItem.id}>
+                      <div className="relative pb-1">
+                        <div className="relative flex items-center space-x-2">
+                          <>
+                            <div>
+                              <div className="relative px-1.5">
+                                <div className="mt-1.5">
+                                  <div className="flex h-6 w-6 items-center justify-center">
+                                    {activityItem.field ? (
+                                      activityItem.new_value === "restore" ? (
+                                        <History className="h-5 w-5 text-custom-text-200" />
                                       ) : (
-                                        <div
-                                          className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                                        >
-                                          {activityItem.actor_detail.display_name?.charAt(0)}
-                                        </div>
-                                      )}
-                                    </div>
+                                        <ActivityIcon activity={activityItem} />
+                                      )
+                                    ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                                      <img
+                                        src={activityItem.actor_detail.avatar}
+                                        alt={activityItem.actor_detail.display_name}
+                                        height={24}
+                                        width={24}
+                                        className="rounded-full h-full w-full object-cover"
+                                      />
+                                    ) : (
+                                      <div
+                                        className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                      >
+                                        {activityItem.actor_detail.display_name?.charAt(0)}
+                                      </div>
+                                    )}
                                   </div>
                                 </div>
                               </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" ? (
-                                    <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>
-                                  )}{" "}
-                                  {message}{" "}
-                                  <span className="whitespace-nowrap">
-                                    {timeAgo(activityItem.created_at)}
+                            </div>
+                            <div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
+                              <div className="text-sm text-custom-text-200 break-words">
+                                {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>
-                                </div>
+                                ) : (
+                                  <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>
                               </div>
-                            </>
-                          </div>
+                            </div>
+                          </>
                         </div>
-                      </li>
-                    );
-                  }
-                })}
-              </ul>
-            </div>
-          </section>
-        ) : (
-          <Loader className="space-y-5">
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-          </Loader>
-        )}
-      </div>
-    </WorkspaceAuthorizationLayout>
+                      </div>
+                    </li>
+                  );
+                }
+              })}
+            </ul>
+          </div>
+        </section>
+      ) : (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
   );
 };
 
-export default ProfileActivity;
+ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProfileActivityPage;
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index 8738ff46f..33813fa52 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -1,29 +1,26 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, ReactElement } 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 { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
-import { SettingsSidebar } from "components/project";
+import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { CustomSearchSelect, CustomSelect, Input, PrimaryButton, Spinner } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
 // icons
-import { UserIcon } from "@heroicons/react/24/outline";
-import { UserCircle } from "lucide-react";
+import { User2, UserCircle2 } from "lucide-react";
 // types
-import type { NextPage } from "next";
 import type { IUser } from "types";
+import type { NextPageWithLayout } from "types/app";
 // constants
 import { USER_ROLES } from "constants/workspace";
 import { TIME_ZONES } from "constants/timezones";
@@ -38,15 +35,17 @@ const defaultValues: Partial<IUser> = {
   user_timezone: "Asia/Kolkata",
 };
 
-const Profile: NextPage = () => {
+const fileService = new FileService();
+const userService = new UserService();
+
+const ProfilePage: NextPageWithLayout = () => {
   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,
@@ -145,13 +144,7 @@ const Profile: NextPage = () => {
   }));
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="My Profile" />
-        </Breadcrumbs>
-      }
-    >
+    <>
       <ImageUploadModal
         isOpen={isImageUploadModalOpen}
         onClose={() => setIsImageUploadModalOpen(false)}
@@ -166,218 +159,227 @@ const Profile: NextPage = () => {
         userImage
       />
       {myProfile ? (
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <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={`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"
-                  }
-                  className="h-44 w-full rounded-lg object-cover"
-                  alt={myProfile?.name ?? "Cover image"}
+        <form onSubmit={handleSubmit(onSubmit)} className="h-full w-full">
+          <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"}
+                className="h-44 w-full rounded-lg object-cover"
+                alt={myProfile?.first_name ?? "Cover image"}
+              />
+              <div className="flex items-end justify-between absolute left-8 -bottom-6">
+                <div className="flex gap-3">
+                  <div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
+                    <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                      {!watch("avatar") || watch("avatar") === "" ? (
+                        <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
+                          <User2 className="h-full w-full text-custom-text-200" />
+                        </div>
+                      ) : (
+                        <div className="relative h-16 w-16 overflow-hidden">
+                          <img
+                            src={watch("avatar")}
+                            className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
+                            onClick={() => setIsImageUploadModalOpen(true)}
+                            alt={myProfile.display_name}
+                          />
+                        </div>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex absolute right-3 bottom-3">
+                <Controller
+                  control={control}
+                  name="cover_image"
+                  render={() => (
+                    <ImagePickerPopover
+                      label={"Change cover"}
+                      onChange={(imageUrl) => {
+                        setValue("cover_image", imageUrl);
+                      }}
+                      control={control}
+                      value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                    />
+                  )}
                 />
-                <div className="flex items-end justify-between absolute left-8 -bottom-6">
-                  <div className="flex gap-3">
-                    <div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
-                      <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
-                        {!watch("avatar") || watch("avatar") === "" ? (
-                          <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                            <UserIcon className="h-full w-full text-custom-text-200" />
-                          </div>
-                        ) : (
-                          <div className="relative h-16 w-16 overflow-hidden">
-                            <img
-                              src={watch("avatar")}
-                              className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
-                              onClick={() => setIsImageUploadModalOpen(true)}
-                              alt={myProfile.display_name}
-                            />
-                          </div>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                </div>
+              </div>
+            </div>
 
-                <div className="flex absolute right-3 bottom-3">
-                  <Controller
-                    control={control}
-                    name="cover_image"
-                    render={() => (
-                      <ImagePickerPopover
-                        label={"Change cover"}
-                        onChange={(imageUrl) => {
-                          setValue("cover_image", imageUrl);
-                        }}
-                        value={
-                          watch("cover_image") ??
-                          "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
-                        }
-                      />
-                    )}
-                  />
+            <div className="flex item-center justify-between px-8 mt-4">
+              <div className="flex flex-col">
+                <div className="flex item-center text-lg font-semibold text-custom-text-100">
+                  <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
                 </div>
+                <span className="text-sm tracking-tight">{watch("email")}</span>
               </div>
 
-              <div className="flex item-center justify-between px-8 mt-4">
-                <div className="flex flex-col">
-                  <div className="flex item-center text-lg font-semibold text-custom-text-100">
-                    <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
-                  </div>
-                  <span className="text-sm tracking-tight">{watch("email")}</span>
-                </div>
+              <Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
+                <a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
+                  <span className="h-4 w-4">
+                    <UserCircle2 className="h-4 w-4" />
+                  </span>
+                  View Profile
+                </a>
+              </Link>
+            </div>
 
-                <Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
-                  <a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
-                    <span className="h-4 w-4">
-                      <UserCircle className="h-4 w-4" />
-                    </span>
-                    View Profile
-                  </a>
-                </Link>
+            <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>
+                <Controller
+                  control={control}
+                  name="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="rounded-md font-medium w-full"
+                    />
+                  )}
+                />
               </div>
 
-              <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
-                    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}
-                  />
-                </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Last Name</h4>
 
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm">Last Name</h4>
-                  <Input
-                    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}
-                  />
-                </div>
-
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm">Email</h4>
-                  <Input
-                    id="email"
-                    name="email"
-                    autoComplete="off"
-                    register={register}
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    error={errors.name}
-                    disabled
-                  />
-                </div>
-
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm">Role</h4>
-                  <Controller
-                    name="role"
-                    control={control}
-                    rules={{ required: "This field is required" }}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        value={value}
-                        onChange={onChange}
-                        label={value ? value.toString() : "Select your role"}
-                        buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : ""}
-                        width="w-full"
-                        input
-                        verticalPosition="top"
-                        position="right"
-                      >
-                        {USER_ROLES.map((item) => (
-                          <CustomSelect.Option key={item.value} value={item.value}>
-                            {item.label}
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                  {errors.role && (
-                    <span className="text-xs text-red-500">Please select a role</span>
+                <Controller
+                  control={control}
+                  name="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="rounded-md font-medium w-full"
+                    />
                   )}
-                </div>
+                />
+              </div>
 
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm">Display name </h4>
-
-                  <Input
-                    id="display_name"
-                    name="display_name"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.display_name}
-                    className="w-full"
-                    placeholder="Enter your display name"
-                    validations={{
-                      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.replace(/\s/g, "").length < 1)
-                          return "Display name must be at least 1 characters long.";
-
-                        if (value.replace(/\s/g, "").length > 20)
-                          return "Display name must be less than 20 characters long.";
-
-                        return true;
-                      },
-                    }}
-                  />
-                </div>
-
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm">Timezone </h4>
-
-                  <Controller
-                    name="user_timezone"
-                    control={control}
-                    rules={{ required: "This field is required" }}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSearchSelect
-                        value={value}
-                        label={
-                          value
-                            ? TIME_ZONES.find((t) => t.value === value)?.label ?? value
-                            : "Select a timezone"
-                        }
-                        options={timeZoneOptions}
-                        onChange={onChange}
-                        verticalPosition="top"
-                        optionsClassName="w-full"
-                        input
-                      />
-                    )}
-                  />
-                  {errors.role && (
-                    <span className="text-xs text-red-500">Please select a role</span>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Email</h4>
+                <Controller
+                  control={control}
+                  name="email"
+                  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>
+                />
+              </div>
 
-                <div className="flex items-center justify-between py-2">
-                  <PrimaryButton type="submit" loading={isSubmitting}>
-                    {isSubmitting ? "Updating Profile..." : "Update Profile"}
-                  </PrimaryButton>
-                </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Role</h4>
+                <Controller
+                  name="role"
+                  control={control}
+                  rules={{ required: "This field is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={value ? value.toString() : "Select your role"}
+                      buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : ""}
+                      width="w-full"
+                      input
+                    >
+                      {USER_ROLES.map((item) => (
+                        <CustomSelect.Option key={item.value} value={item.value}>
+                          {item.label}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+                {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>
+                <Controller
+                  control={control}
+                  name="display_name"
+                  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.replace(/\s/g, "").length < 1)
+                        return "Display name must be at least 1 characters long.";
+
+                      if (value.replace(/\s/g, "").length > 20)
+                        return "Display name must be less than 20 characters long.";
+
+                      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>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Timezone </h4>
+
+                <Controller
+                  name="user_timezone"
+                  control={control}
+                  rules={{ required: "This field is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSearchSelect
+                      value={value}
+                      label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
+                      options={timeZoneOptions}
+                      onChange={onChange}
+                      optionsClassName="w-full"
+                      input
+                    />
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
+              </div>
+
+              <div className="flex items-center justify-between py-2">
+                <Button variant="primary" type="submit" loading={isSubmitting}>
+                  {isSubmitting ? "Updating Profile..." : "Update Profile"}
+                </Button>
               </div>
             </div>
           </div>
@@ -387,8 +389,16 @@ const Profile: NextPage = () => {
           <Spinner />
         </div>
       )}
-    </WorkspaceAuthorizationLayout>
+    </>
   );
 };
 
-export default Profile;
+ProfilePage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="My Profile" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProfilePage;
diff --git a/web/pages/[workspaceSlug]/me/profile/preferences.tsx b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
index eb6a3c821..d08b9da3c 100644
--- a/web/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -1,98 +1,86 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, ReactElement } from "react";
+import { observer } from "mobx-react-lite";
+import { useTheme } from "next-themes";
 // hooks
-import useUserAuth from "hooks/use-user-auth";
+import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
 import { CustomThemeSelector, ThemeSwitch } from "components/core";
+import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { Spinner } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// types
-import { ICustomTheme } from "types";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { SettingsSidebar } from "components/project";
+import { Spinner } from "@plane/ui";
+// constants
+import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes";
+// type
+import { NextPageWithLayout } from "types/app";
 
-const ProfilePreferences = observer(() => {
-  const { user: myProfile } = useUserAuth();
-
-  const store: any = useMobxStore();
-
-  // console.log("store", store?.theme?.theme);
-  // console.log("theme", theme);
-
-  const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
-
-  const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
+const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
+  const {
+    user: { currentUser, updateCurrentUserTheme },
+  } = useMobxStore();
+  // states
+  const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
+  // computed
+  const userTheme = currentUser?.theme;
+  // hooks
+  const { setTheme } = useTheme();
+  const { setToastAlert } = useToast();
 
   useEffect(() => {
-    if (store?.user && store?.theme?.theme === "custom") {
-      const currentTheme = store?.user?.currentUserSettings?.theme;
-      if (currentTheme.palette)
-        setPreLoadedData({
-          background: currentTheme.background !== "" ? currentTheme.background : "#0d101b",
-          text: currentTheme.text !== "" ? currentTheme.text : "#c5c5c5",
-          primary: currentTheme.primary !== "" ? currentTheme.primary : "#3f76ff",
-          sidebarBackground:
-            currentTheme.sidebarBackground !== "" ? currentTheme.sidebarBackground : "#0d101b",
-          sidebarText: currentTheme.sidebarText !== "" ? currentTheme.sidebarText : "#c5c5c5",
-          darkPalette: false,
-          palette:
-            currentTheme.palette !== ",,,,"
-              ? currentTheme.palette
-              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-          theme: "custom",
-        });
-      setCustomThemeSelectorOptions((prevData) => true);
+    if (userTheme) {
+      const userThemeOption = THEME_OPTIONS.find((t) => t.value === userTheme?.theme);
+      if (userThemeOption) {
+        setCurrentTheme(userThemeOption);
+      }
     }
-  }, [store, store?.theme?.theme]);
+  }, [userTheme]);
+
+  const handleThemeChange = (themeOption: I_THEME_OPTION) => {
+    setTheme(themeOption.value);
+    updateCurrentUserTheme(themeOption.value).catch(() => {
+      setToastAlert({
+        title: "Failed to Update the theme",
+        type: "error",
+      });
+    });
+  };
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="My Profile Preferences" />
-        </Breadcrumbs>
-      }
-    >
-      {myProfile ? (
-        <div className="flex flex-row gap-2 h-full">
-          <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-            <SettingsSidebar />
+    <>
+      {currentUser ? (
+        <div className="pr-9 py-8 w-full overflow-y-auto">
+          <div className="flex items-center py-3.5 border-b border-custom-border-100">
+            <h3 className="text-xl font-medium">Preferences</h3>
           </div>
-
-          <div className="pr-9 py-8 w-full overflow-y-auto">
-            <div className="flex items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">Preferences</h3>
+          <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>
             </div>
-            <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>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                <ThemeSwitch
-                  setPreLoadedData={setPreLoadedData}
-                  customThemeSelectorOptions={customThemeSelectorOptions}
-                  setCustomThemeSelectorOptions={setCustomThemeSelectorOptions}
-                />
-              </div>
+            <div className="col-span-12 sm:col-span-6">
+              <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
             </div>
-            {customThemeSelectorOptions && <CustomThemeSelector preLoadedData={preLoadedData} />}
           </div>
+          {userTheme?.theme === "custom" && <CustomThemeSelector />}
         </div>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
           <Spinner />
         </div>
       )}
-    </WorkspaceAuthorizationLayout>
+    </>
   );
 });
 
-export default ProfilePreferences;
+ProfilePreferencesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProfilePreferencesPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
index a60116503..6d0c6e0d6 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -1,19 +1,74 @@
-import React from "react";
-
-// contexts
-import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
+import React, { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// layouts
+import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
-import { ProfileIssuesView } from "components/profile";
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 
-const ProfileAssignedIssues: NextPage = () => (
-  <ProfileIssuesContextProvider>
-    <ProfileAuthWrapper>
-      <ProfileIssuesView />
-    </ProfileAuthWrapper>
-  </ProfileIssuesContextProvider>
-);
+const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  }: RootStore = useMobxStore();
 
-export default ProfileAssignedIssues;
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query as {
+    workspaceSlug: string;
+    userId: string;
+  };
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug);
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug);
+      await projectStore.fetchProjects(workspaceSlug);
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug, userId, "assigned");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="w-full h-full relative overflow-auto -z-1">
+          {activeLayout === "list" ? (
+            <ProfileIssuesListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ProfileIssuesKanBanLayout />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+});
+
+ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Assigned" />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default ProfileAssignedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
index 1cac31e62..7bf21edd9 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@@ -1,20 +1,70 @@
-import React from "react";
-
-// contexts
-import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
+import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
-import { ProfileIssuesView } from "components/profile";
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { Spinner } from "@plane/ui";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 
-const ProfileCreatedIssues: NextPage = () => (
-  <ProfileIssuesContextProvider>
-    <ProfileAuthWrapper>
-      <ProfileIssuesView />
-    </ProfileAuthWrapper>
-  </ProfileIssuesContextProvider>
-);
+const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  } = useMobxStore();
 
-export default ProfileCreatedIssues;
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_CREATED_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
+      await projectStore.fetchProjects(workspaceSlug.toString());
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "created");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="w-full h-full relative overflow-auto -z-1">
+          {activeLayout === "list" ? (
+            <ProfileIssuesListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ProfileIssuesKanBanLayout />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Created" />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default observer(ProfileCreatedIssuesPage);
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
index 0cf54bb0d..e5b70b1db 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
@@ -1,14 +1,13 @@
-import React from "react";
-
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // layouts
+import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
+import { UserProfileHeader } from "components/headers";
 import {
   ProfileActivity,
   ProfilePriorityDistribution,
@@ -17,21 +16,22 @@ import {
   ProfileWorkload,
 } from "components/profile";
 // types
-import type { NextPage } from "next";
 import { IUserStateDistribution, TStateGroups } from "types";
+import { NextPageWithLayout } from "types/app";
 // constants
 import { USER_PROFILE_DATA } from "constants/fetch-keys";
 import { GROUP_CHOICES } from "constants/project";
 
-const ProfileOverview: NextPage = () => {
+// services
+const userService = new UserService();
+
+const ProfileOverviewPage: NextPageWithLayout = () => {
   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) => {
@@ -42,21 +42,24 @@ const ProfileOverview: NextPage = () => {
   });
 
   return (
-    <ProfileAuthWrapper>
-      <div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
-        <ProfileStats userProfile={userProfile} />
-        <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}
-          />
-        </div>
-        <ProfileActivity />
+    <div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
+      <ProfileStats userProfile={userProfile} />
+      <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} />
       </div>
-    </ProfileAuthWrapper>
+      <ProfileActivity />
+    </div>
   );
 };
 
-export default ProfileOverview;
+ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Overview" />}>
+      <ProfileAuthWrapper>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default ProfileOverviewPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
index 3a1ca01ee..8900fb3fd 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@@ -1,20 +1,70 @@
-import React from "react";
-
-// contexts
-import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
+import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
-import { ProfileIssuesView } from "components/profile";
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { Spinner } from "@plane/ui";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 
-const ProfileSubscribedIssues: NextPage = () => (
-  <ProfileIssuesContextProvider>
-    <ProfileAuthWrapper>
-      <ProfileIssuesView />
-    </ProfileAuthWrapper>
-  </ProfileIssuesContextProvider>
-);
+const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  } = useMobxStore();
 
-export default ProfileSubscribedIssues;
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_SUBSCRIBED_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
+      await projectStore.fetchProjects(workspaceSlug.toString());
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "subscribed");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="w-full h-full relative overflow-auto -z-1">
+          {activeLayout === "list" ? (
+            <ProfileIssuesListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ProfileIssuesKanBanLayout />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Subscribed" />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default observer(ProfileSubscribedIssuesPage);
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index e4a1c37b2..cf0987edb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -1,30 +1,26 @@
-import React, { useCallback, useEffect, useState } from "react";
-
+import { useCallback, useEffect, useState, ReactElement } from "react";
 import { useRouter } from "next/router";
-
 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 { AppLayout } from "layouts/app-layout";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
+import { ProjectArchivedIssueDetailsHeader } from "components/headers";
 // ui
-import { Icon, Loader } from "components/ui";
-import { Breadcrumbs } from "components/breadcrumbs";
+import { ArchiveIcon, Loader } from "@plane/ui";
+// icons
+import { History } from "lucide-react";
 // types
 import { IIssue } from "types";
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
 
 const defaultValues: Partial<IIssue> = {
   name: "",
@@ -32,20 +28,23 @@ const defaultValues: Partial<IIssue> = {
   description_html: "",
   estimate_point: null,
   state: "",
-  assignees_list: [],
   priority: "low",
   target_date: new Date().toString(),
   issue_cycle: null,
   issue_module: null,
-  labels_list: [],
 };
 
-const ArchivedIssueDetailsPage: NextPage = () => {
-  const [isRestoring, setIsRestoring] = useState(false);
+// services
+const issueService = new IssueService();
+const issueArchiveService = new IssueArchiveService();
 
+const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, archivedIssueId } = router.query;
-
+  // states
+  const [isRestoring, setIsRestoring] = useState(false);
+  // hooks
   const { user } = useUserAuth();
   const { setToastAlert } = useToast();
 
@@ -53,7 +52,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 +85,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,10 +104,6 @@ const ArchivedIssueDetailsPage: NextPage = () => {
     mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
     reset({
       ...issueDetails,
-      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,
     });
   }, [issueDetails, reset, archivedIssueId]);
 
@@ -123,7 +112,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
 
     setIsRestoring(true);
 
-    await issuesService
+    await issueArchiveService
       .unarchiveIssue(workspaceSlug as string, projectId as string, archivedIssueId as string)
       .then(() => {
         setToastAlert({
@@ -144,30 +133,14 @@ const ArchivedIssueDetailsPage: NextPage = () => {
   };
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
-          />
-          <Breadcrumbs.BreadcrumbItem
-            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
-              issueDetails?.sequence_id ?? "..."
-            } Details`}
-            unshrinkTitle
-          />
-        </Breadcrumbs>
-      }
-    >
+    <>
       {issueDetails && projectId ? (
         <div className="flex h-full overflow-hidden">
           <div className="w-2/3 h-full overflow-y-auto space-y-2 divide-y-2 divide-custom-border-300 p-5">
             {issueDetails.archived_at && (
               <div className="flex items-center justify-between gap-2 px-2.5 py-2 text-sm border rounded-md text-custom-text-200 border-custom-border-200 bg-custom-background-90">
                 <div className="flex gap-2 items-center">
-                  <Icon iconName="archive" className="" />
+                  <ArchiveIcon className="h-3.5 w-3.5" />
                   <p>This issue has been archived by Plane.</p>
                 </div>
                 <button
@@ -175,17 +148,14 @@ const ArchivedIssueDetailsPage: NextPage = () => {
                   onClick={handleUnArchive}
                   disabled={isRestoring}
                 >
-                  <Icon iconName="history" />
+                  <History className="h-3.5 w-3.5" />
+
                   <span>{isRestoring ? "Restoring..." : "Restore Issue"}</span>
                 </button>
               </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">
@@ -214,7 +184,15 @@ const ArchivedIssueDetailsPage: NextPage = () => {
           </div>
         </Loader>
       )}
-    </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+ArchivedIssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectArchivedIssueDetailsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index d09ee9ffa..13fb00f6d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -1,73 +1,48 @@
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
-// helper
-import { truncateText } from "helpers/string.helper";
-// components
-import { IssuesFilterView, IssuesView } from "components/core";
+import { ArchivedIssueLayoutRoot } from "components/issues";
 // ui
-import { Icon } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { ArchiveIcon } from "@plane/ui";
+import { ProjectArchivedIssuesHeader } from "components/headers";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { X } from "lucide-react";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
+import { NextPageWithLayout } from "types/app";
 
-const ProjectArchivedIssues: NextPage = () => {
+const ProjectArchivedIssuesPage: NextPageWithLayout = () => {
   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
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
+        <button
+          type="button"
+          onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
+          className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
+        >
+          <ArchiveIcon className="h-4 w-4" />
+          <span>Archived Issues</span>
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+      <ArchivedIssueLayoutRoot />
+    </div>
   );
+};
 
+ProjectArchivedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
     <IssueViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`}
-            />
-          </Breadcrumbs>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            <IssuesFilterView />
-          </div>
-        }
-      >
-        <div className="h-full w-full flex flex-col">
-          <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
-            <button
-              type="button"
-              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-              className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
-            >
-              <Icon iconName="archive" className="text-base" />
-              <span>Archived Issues</span>
-
-              <XMarkIcon className="h-3 w-3" />
-            </button>
-          </div>
-          <IssuesView />
-        </div>
-      </ProjectAuthorizationWrapper>
+      <AppLayout header={<ProjectArchivedIssuesHeader />} withProjectWrapper>
+        {page}
+      </AppLayout>
     </IssueViewContextProvider>
   );
 };
 
-export default ProjectArchivedIssues;
+export default ProjectArchivedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 65007db3c..f0f16fa1c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -1,213 +1,85 @@
-import React, { useState } from "react";
-
+import { ReactElement } 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";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
-// components
-import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
-import { CycleDetailsSidebar, TransferIssues, TransferIssuesModal } from "components/cycles";
-// services
-import issuesService from "services/issues.service";
-import cycleServices from "services/cycles.service";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
+import useLocalStorage from "hooks/use-local-storage";
+// layouts
+import { AppLayout } from "layouts/app-layout";
 // components
-import { AnalyticsProjectModal } from "components/analytics";
+import { CycleIssuesHeader } from "components/headers";
+import { CycleDetailsSidebar } from "components/cycles";
+import { CycleLayoutRoot } from "components/issues/issue-layouts";
 // ui
-import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// images
+import { EmptyState } from "components/common";
+// assets
 import emptyCycle from "public/empty-state/cycle.svg";
-// helpers
-import { truncateText } from "helpers/string.helper";
-import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
-import { ISearchIssueResponse } from "types";
-// fetch-keys
-import { CYCLES_LIST, CYCLE_DETAILS } from "constants/fetch-keys";
-
-const SingleCycle: React.FC = () => {
-  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
-  const [cycleSidebar, setCycleSidebar] = useState(true);
-  const [analyticsModal, setAnalyticsModal] = useState(false);
-  const [transferIssuesModal, setTransferIssuesModal] = useState(false);
+import { NextPageWithLayout } from "types/app";
 
+const CycleDetailPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const { user } = useUserAuth();
+  const { cycle: cycleStore } = useMobxStore();
 
-  const { setToastAlert } = useToast();
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
-  const { data: cycles } = useSWR(
-    workspaceSlug && projectId ? CYCLES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
-      : null
-  );
-
-  const { data: cycleDetails, error } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
+  const { error } = useSWR(
+    workspaceSlug && projectId && cycleId ? `CURRENT_CYCLE_DETAILS_${cycleId.toString()}` : null,
     workspaceSlug && projectId && cycleId
-      ? () =>
-          cycleServices.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
+      ? () => cycleStore.fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
       : null
   );
 
-  const cycleStatus =
-    cycleDetails?.start_date && cycleDetails?.end_date
-      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
-      : "draft";
-
-  const openIssuesListModal = () => {
-    setCycleIssuesListModal(true);
-  };
-
-  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload = {
-      issues: data.map((i) => i.id),
-    };
-
-    await issuesService
-      .addIssueToCycle(
-        workspaceSlug as string,
-        projectId as string,
-        cycleId as string,
-        payload,
-        user
-      )
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Selected issues could not be added to the cycle. Please try again.",
-        });
-      });
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
   };
 
   return (
-    <IssueViewContextProvider>
-      <ExistingIssuesListModal
-        isOpen={cycleIssuesListModal}
-        handleClose={() => setCycleIssuesListModal(false)}
-        searchParams={{ cycle: true }}
-        handleOnSubmit={handleAddIssuesToCycle}
-      />
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
-              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
-              linkTruncate
-            />
-          </Breadcrumbs>
-        }
-        left={
-          <CustomMenu
-            label={
-              <>
-                <CyclesIcon className="h-3 w-3" />
-                {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
-              </>
-            }
-            className="ml-1.5 flex-shrink-0"
-            width="auto"
-          >
-            {cycles?.map((cycle) => (
-              <CustomMenu.MenuItem
-                key={cycle.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}
-              >
-                {truncateText(cycle.name, 40)}
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
-        }
-        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>
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
-                cycleSidebar ? "rotate-180" : ""
-              }`}
-              onClick={() => setCycleSidebar((prevData) => !prevData)}
-            >
-              <ArrowLeftIcon className="h-4 w-4" />
-            </button>
-          </div>
-        }
-      >
-        {error ? (
-          <EmptyState
-            image={emptyCycle}
-            title="Cycle does not exist"
-            description="The cycle you are looking for does not exist or has been deleted."
-            primaryButton={{
-              text: "View other cycles",
-              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
-            }}
-          />
-        ) : (
-          <>
-            <TransferIssuesModal
-              handleClose={() => setTransferIssuesModal(false)}
-              isOpen={transferIssuesModal}
-            />
-            <AnalyticsProjectModal
-              isOpen={analyticsModal}
-              onClose={() => setAnalyticsModal(false)}
-            />
-            <div
-              className={`h-full flex flex-col ${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>
+    <>
+      {error ? (
+        <EmptyState
+          image={emptyCycle}
+          title="Cycle does not exist"
+          description="The cycle you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other cycles",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
+          }}
+        />
+      ) : (
+        <>
+          <div className="flex h-full w-full">
+            <div className="h-full w-full overflow-hidden">
+              <CycleLayoutRoot />
             </div>
-            <CycleDetailsSidebar
-              cycleStatus={cycleStatus}
-              cycle={cycleDetails}
-              isOpen={cycleSidebar}
-              isCompleted={cycleStatus === "completed" ?? false}
-              user={user}
-            />
-          </>
-        )}
-      </ProjectAuthorizationWrapper>
-    </IssueViewContextProvider>
+            {cycleId && !isSidebarCollapsed && (
+              <div
+                className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+                style={{
+                  boxShadow:
+                    "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+                }}
+              >
+                <CycleDetailsSidebar cycleId={cycleId.toString()} handleClose={toggleSidebar} />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </>
   );
 };
 
-export default SingleCycle;
+CycleDetailPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default CycleDetailPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 7633d41bd..a4e1eb296 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -1,134 +1,99 @@
-import React, { useEffect, useState } from "react";
-
+import { Fragment, useCallback, useEffect, useState, ReactElement } from "react";
 import { useRouter } from "next/router";
-
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Tab } from "@headlessui/react";
+import { Plus } from "lucide-react";
 // hooks
-import useLocalStorage from "hooks/use-local-storage";
-import useUserAuth from "hooks/use-user-auth";
-import useProjectDetails from "hooks/use-project-details";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
-import {
-  ActiveCycleDetails,
-  AllCyclesList,
-  CompletedCyclesList,
-  CreateUpdateCycleModal,
-  DraftCyclesList,
-  UpcomingCyclesList,
-} from "components/cycles";
+import { CyclesHeader } from "components/headers";
+import { CyclesView, ActiveCycleDetails, CycleCreateUpdateModal } from "components/cycles";
 // ui
-import { EmptyState, Icon, PrimaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { EmptyState } from "components/common";
+import { Tooltip } from "@plane/ui";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
 // types
-import { SelectCycleType } from "types";
-import type { NextPage } from "next";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"];
-
-const cycleViews = [
-  {
-    key: "list",
-    icon: "list",
-  },
-  {
-    key: "board",
-    icon: "dataset",
-  },
-  {
-    key: "gantt",
-    icon: "view_timeline",
-  },
-];
-
-const ProjectCycles: NextPage = () => {
-  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;
-    }
-  };
+import { TCycleView, TCycleLayout } from "types";
+import { NextPageWithLayout } from "types/app";
+// constants
+import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+// lib cookie
+import { setLocalStorage, getLocalStorage } from "lib/local-storage";
 
+const ProjectCyclesPage: NextPageWithLayout = observer(() => {
+  const [createModal, setCreateModal] = useState(false);
+  // store
+  const { project: projectStore, cycle: cycleStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId, peekCycle } = router.query;
 
-  const { user } = useUserAuth();
-  const { projectDetails } = useProjectDetails();
+  const handleCurrentLayout = useCallback(
+    (_layout: TCycleLayout) => {
+      if (projectId) {
+        setLocalStorage(`cycle_layout:${projectId}`, _layout);
+        cycleStore.setCycleLayout(_layout);
+      }
+    },
+    [cycleStore, projectId]
+  );
+
+  const handleCurrentView = useCallback(
+    (_view: TCycleView) => {
+      if (projectId) {
+        setLocalStorage(`cycle_view:${projectId}`, _view);
+        cycleStore.setCycleView(_view);
+        if (_view === "draft" && cycleStore.cycleLayout === "gantt") {
+          handleCurrentLayout("list");
+        }
+      }
+    },
+    [cycleStore, projectId, handleCurrentLayout]
+  );
 
   useEffect(() => {
-    if (createUpdateCycleModal) return;
+    if (projectId) {
+      const _viewKey = `cycle_view:${projectId}`;
+      const _viewValue = getLocalStorage(_viewKey);
+      if (_viewValue && _viewValue !== cycleStore?.cycleView) cycleStore.setCycleView(_viewValue as TCycleView);
+      else handleCurrentView("all");
 
-    const timer = setTimeout(() => {
-      setSelectedCycle(undefined);
-      clearTimeout(timer);
-    }, 500);
-  }, [createUpdateCycleModal]);
+      const _layoutKey = `cycle_layout:${projectId}`;
+      const _layoutValue = getLocalStorage(_layoutKey);
+      if (_layoutValue && _layoutValue !== cycleStore?.cycleView)
+        cycleStore.setCycleLayout(_layoutValue as TCycleLayout);
+      else handleCurrentLayout("list");
+    }
+  }, [projectId, cycleStore, handleCurrentView, handleCurrentLayout]);
+
+  const cycleView = cycleStore?.cycleView;
+  const cycleLayout = cycleStore?.cycleLayout;
+
+  if (!workspaceSlug || !projectId) return null;
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Cycles`} />
-        </Breadcrumbs>
-      }
-      right={
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "q" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Cycle
-        </PrimaryButton>
-      }
-    >
-      <CreateUpdateCycleModal
-        isOpen={createUpdateCycleModal}
-        handleClose={() => setCreateUpdateCycleModal(false)}
-        data={selectedCycle}
-        user={user}
+    <>
+      <CycleCreateUpdateModal
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        isOpen={createModal}
+        handleClose={() => setCreateModal(false)}
       />
-      {projectDetails?.total_cycles === 0 ? (
+      {currentProjectDetails?.total_cycles === 0 ? (
         <div className="h-full grid place-items-center">
           <EmptyState
             title="Plan your project with cycles"
             description="Cycle is a custom time period in which a team works to complete items on their backlog."
             image={emptyCycle}
             primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
+              icon: <Plus className="h-4 w-4" />,
               text: "New Cycle",
               onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "q",
-                });
-                document.dispatchEvent(e);
+                setCreateModal(true);
               },
             }}
           />
@@ -137,94 +102,122 @@ 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 == cycleStore?.cycleView)}
+          selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleStore?.cycleView)}
           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");
-            }
+            handleCurrentView(CYCLE_TAB_LIST[i].key as TCycleView);
           }}
         >
-          <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">
+          <div className="flex flex-col sm:flex-row gap-4 justify-between items-end sm:items-center border-b border-custom-border-200 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;
+            {cycleStore?.cycleView != "active" && (
+              <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+                {CYCLE_VIEW_LAYOUTS.map((layout) => {
+                  if (layout.key === "gantt" && cycleStore?.cycleView === "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"
-                    }`}
-                    onClick={() => setCyclesView(view.key)}
-                  >
-                    <Icon iconName={view.icon} className="!text-base" />
-                  </button>
-                );
-              })}
-            </div>
+                  return (
+                    <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 ${
+                          cycleStore?.cycleLayout == layout.key
+                            ? "bg-custom-background-100 shadow-custom-shadow-2xs"
+                            : ""
+                        }`}
+                        onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
+                      >
+                        <layout.icon
+                          strokeWidth={2}
+                          className={`h-3.5 w-3.5 ${
+                            cycleStore?.cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                          }`}
+                        />
+                      </button>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+            )}
           </div>
-          <Tab.Panels as={React.Fragment}>
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
-              <AllCyclesList viewType={cyclesView} />
+
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && (
+                <CyclesView
+                  filter={"all"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  peekCycle={peekCycle?.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 workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
             </Tab.Panel>
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
-              <CompletedCyclesList viewType={cyclesView} />
+
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && (
+                <CyclesView
+                  filter={"upcoming"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  peekCycle={peekCycle?.toString()}
+                />
+              )}
+            </Tab.Panel>
+
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && workspaceSlug && projectId && (
+                <CyclesView
+                  filter={"completed"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  peekCycle={peekCycle?.toString()}
+                />
+              )}
+            </Tab.Panel>
+
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && workspaceSlug && projectId && (
+                <CyclesView
+                  filter={"draft"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  peekCycle={peekCycle?.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>
+    </>
+  );
+});
+
+ProjectCyclesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<CyclesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
-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..fcde49524 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -1,73 +1,46 @@
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
-// helper
-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";
+import { ProjectDraftIssueHeader } from "components/headers";
 // icons
 import { X, PenSquare } from "lucide-react";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
+import { NextPageWithLayout } from "types/app";
 
-const ProjectDraftIssues: NextPage = () => {
+const ProjectDraftIssuesPage: NextPageWithLayout = () => {
   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
-  );
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
+        <button
+          type="button"
+          onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
+          className="flex items-center gap-1.5 rounded border border-custom-border-200 px-3 py-1.5 text-xs"
+        >
+          <PenSquare className="h-3 w-3 text-custom-text-300" />
+          <span>Draft Issues</span>
 
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+ProjectDraftIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
     <IssueViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`}
-            />
-          </Breadcrumbs>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            <IssuesFilterView />
-          </div>
-        }
-      >
-        <div className="h-full w-full flex flex-col">
-          <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
-            <button
-              type="button"
-              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-              className="flex items-center gap-1.5 rounded border border-custom-border-200 px-3 py-1.5 text-xs"
-            >
-              <PenSquare className="h-3 w-3 text-custom-text-300" />
-              <span>Draft Issues</span>
-
-              <X className="h-3 w-3" />
-            </button>
-          </div>
-          <IssuesView />
-        </div>
-      </ProjectAuthorizationWrapper>
+      <AppLayout header={<ProjectDraftIssueHeader />} withProjectWrapper>
+        {page}
+      </AppLayout>
     </IssueViewContextProvider>
   );
 };
 
-export default ProjectDraftIssues;
+export default ProjectDraftIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 7a82ac61f..e10f76c48 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -1,67 +1,48 @@
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
+import useSWR from "swr";
 // hooks
-import useProjectDetails from "hooks/use-project-details";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { InboxViewContextProvider } from "contexts/inbox-view-context";
+import { AppLayout } from "layouts/app-layout";
 // components
-import { InboxActionHeader, InboxMainContent, IssuesListSidebar } from "components/inbox";
-// helper
-import { truncateText } from "helpers/string.helper";
-// ui
-import { PrimaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox";
+import { ProjectInboxHeader } from "components/headers";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 
-const ProjectInbox: NextPage = () => {
+const ProjectInboxPage: NextPageWithLayout = () => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId, inboxId } = router.query;
 
-  const { projectDetails } = useProjectDetails();
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null,
+    workspaceSlug && projectId && inboxId
+      ? () => inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
+      : null
+  );
 
   return (
-    <InboxViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`}
-            />
-          </Breadcrumbs>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            <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>
-        }
-      >
-        <div className="flex flex-col h-full">
-          <InboxActionHeader />
-          <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
-            <IssuesListSidebar />
-            <div className="col-span-3 h-full overflow-auto">
-              <InboxMainContent />
-            </div>
-          </div>
+    <div className="flex flex-col h-full">
+      <InboxActionsHeader />
+      <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
+        <InboxIssuesListSidebar />
+        <div className="col-span-3 h-full overflow-auto">
+          <InboxMainContent />
         </div>
-      </ProjectAuthorizationWrapper>
-    </InboxViewContextProvider>
+      </div>
+    </div>
   );
 };
 
-export default ProjectInbox;
+ProjectInboxPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectInboxHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectInboxPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index d686fc357..32c11345e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,40 +1,33 @@
-import React, { useCallback, useEffect } from "react";
-
+import React, { useCallback, useEffect, ReactElement } from "react";
 import { useRouter } from "next/router";
-
 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 { AppLayout } from "layouts/app-layout";
 // components
+import { ProjectIssueDetailsHeader } from "components/headers";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { EmptyState, Loader } from "components/ui";
-import { Breadcrumbs } from "components/breadcrumbs";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types
 import { IIssue } from "types";
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
 
 const defaultValues: Partial<IIssue> = {
-  assignees_list: [],
   description: "",
   description_html: "",
   estimate_point: null,
   issue_cycle: null,
   issue_module: null,
-  labels_list: [],
   name: "",
   priority: "low",
   start_date: null,
@@ -42,10 +35,13 @@ const defaultValues: Partial<IIssue> = {
   target_date: null,
 };
 
-const IssueDetailsPage: NextPage = () => {
+// services
+const issueService = new IssueService();
+
+const IssueDetailsPage: NextPageWithLayout = () => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
-  // console.log(workspaceSlug, "workspaceSlug")
 
   const { user } = useUserAuth();
 
@@ -56,8 +52,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 +84,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,31 +103,12 @@ const IssueDetailsPage: NextPage = () => {
     mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
     reset({
       ...issueDetails,
-      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,
     });
   }, [issueDetails, reset, issueId]);
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
-          />
-          <Breadcrumbs.BreadcrumbItem
-            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
-              issueDetails?.sequence_id ?? "..."
-            } Details`}
-            unshrinkTitle
-          />
-        </Breadcrumbs>
-      }
-    >
+    <>
+      {" "}
       {error ? (
         <EmptyState
           image={emptyIssue}
@@ -173,7 +149,15 @@ const IssueDetailsPage: NextPage = () => {
           </div>
         </Loader>
       )}
-    </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+IssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectIssueDetailsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index cb7b1fd33..ceb75b43c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -1,111 +1,24 @@
-import { useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-import inboxService from "services/inbox.service";
-// layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { ReactElement } from "react";
 // components
-import { IssuesFilterView, IssuesView } from "components/core";
-import { AnalyticsProjectModal } from "components/analytics";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { ProjectLayoutRoot } from "components/issues";
+import { ProjectIssuesHeader } from "components/headers";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS, INBOX_LIST } from "constants/fetch-keys";
+import { NextPageWithLayout } from "types/app";
+// layouts
+import { AppLayout } from "layouts/app-layout";
 
-const ProjectIssues: NextPage = () => {
-  const [analyticsModal, setAnalyticsModal] = useState(false);
-
-  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
-  );
-
-  const { data: inboxList } = useSWR(
-    workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
-      : null
-  );
+const ProjectIssuesPage: NextPageWithLayout = () => (
+  <div className="h-full w-full">
+    <ProjectLayoutRoot />
+  </div>
+);
 
+ProjectIssuesPage.getLayout = function getLayout(page: ReactElement) {
   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>
+    <AppLayout header={<ProjectIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
-export default ProjectIssues;
+export default ProjectIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index b72ea9d19..a960135b0 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -1,203 +1,84 @@
-import React, { useState } from "react";
-
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// icons
-import { ArrowLeftIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
-// services
-import modulesService from "services/modules.service";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
+import useLocalStorage from "hooks/use-local-storage";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
+import { AppLayout } from "layouts/app-layout";
 // components
-import { ExistingIssuesListModal, IssuesFilterView, IssuesView } 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 { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// images
+import { EmptyState } from "components/common";
+// assets
 import emptyModule from "public/empty-state/module.svg";
-// helpers
-import { truncateText } from "helpers/string.helper";
 // types
-import { ISearchIssueResponse } from "types";
-// fetch-keys
-import { MODULE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
-
-const SingleModule: React.FC = () => {
-  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
-  const [moduleSidebar, setModuleSidebar] = useState(true);
-  const [analyticsModal, setAnalyticsModal] = useState(false);
+import { NextPageWithLayout } from "types/app";
 
+const ModuleIssuesPage: NextPageWithLayout = () => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
+  // store
+  const { module: moduleStore } = useMobxStore();
+  // local storage
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
-  const { data: modules } = useSWR(
-    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: moduleIssues } = useSWR(
-    workspaceSlug && projectId && moduleId ? MODULE_ISSUES(moduleId as string) : null,
+  const { error } = useSWR(
+    workspaceSlug && projectId && moduleId ? `CURRENT_MODULE_DETAILS_${moduleId.toString()}` : null,
     workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssues(
-            workspaceSlug as string,
-            projectId as string,
-            moduleId as string
-          )
+      ? () => moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
       : 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
-          )
-      : null
-  );
-
-  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload = {
-      issues: data.map((i) => i.id),
-    };
-
-    await modulesService
-      .addIssuesToModule(
-        workspaceSlug as string,
-        projectId as string,
-        moduleId as string,
-        payload,
-        user
-      )
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Selected issues could not be added to the module. Please try again.",
-        })
-      );
-  };
-
-  const openIssuesListModal = () => {
-    setModuleIssuesListModal(true);
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
   };
 
   return (
-    <IssueViewContextProvider>
-      <ExistingIssuesListModal
-        isOpen={moduleIssuesListModal}
-        handleClose={() => setModuleIssuesListModal(false)}
-        searchParams={{ module: true }}
-        handleOnSubmit={handleAddIssuesToModule}
-      />
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${truncateText(moduleDetails?.project_detail.name ?? "Project", 32)} Modules`}
-              link={`/${workspaceSlug}/projects/${projectId}/modules`}
-              linkTruncate
-            />
-          </Breadcrumbs>
-        }
-        left={
-          <CustomMenu
-            label={
-              <>
-                <RectangleGroupIcon className="h-3 w-3" />
-                {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
-              </>
-            }
-            className="ml-1.5"
-            width="auto"
-          >
-            {modules?.map((module) => (
-              <CustomMenu.MenuItem
-                key={module.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`}
-              >
-                {truncateText(module.name, 40)}
-              </CustomMenu.MenuItem>
-            ))}
-          </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>
+    <>
+      {error ? (
+        <EmptyState
+          image={emptyModule}
+          title="Module does not exist"
+          description="The module you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other modules",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
+          }}
+        />
+      ) : (
+        <div className="flex h-full w-full">
+          <div className="h-full w-full overflow-hidden">
+            <ModuleLayoutRoot />
           </div>
-        }
-      >
-        {error ? (
-          <EmptyState
-            image={emptyModule}
-            title="Module does not exist"
-            description="The module you are looking for does not exist or has been deleted."
-            primaryButton={{
-              text: "View other modules",
-              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
-            }}
-          />
-        ) : (
-          <>
-            <AnalyticsProjectModal
-              isOpen={analyticsModal}
-              onClose={() => setAnalyticsModal(false)}
-            />
+          {moduleId && !isSidebarCollapsed && (
             <div
-              className={`relative overflow-y-auto h-full flex flex-col ${
-                moduleSidebar ? "mr-[24rem]" : ""
-              } ${analyticsModal ? "mr-[50%]" : ""} duration-300`}
+              className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+              style={{
+                boxShadow:
+                  "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+              }}
             >
-              <IssuesView openIssuesListModal={openIssuesListModal} />
+              <ModuleDetailsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
             </div>
-            <ModuleDetailsSidebar
-              module={moduleDetails}
-              isOpen={moduleSidebar}
-              moduleIssues={moduleIssues}
-              user={user}
-            />
-          </>
-        )}
-      </ProjectAuthorizationWrapper>
-    </IssueViewContextProvider>
+          )}
+        </div>
+      )}
+    </>
   );
 };
 
-export default SingleModule;
+ModuleIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ModuleIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 028e95540..3ec3bf7f6 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -1,190 +1,20 @@
-import React, { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
+import { ReactElement } from "react";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import projectService from "services/project.service";
-import modulesService from "services/modules.service";
+import { AppLayout } from "layouts/app-layout";
 // components
-import {
-  CreateUpdateModuleModal,
-  ModulesListGanttChartView,
-  SingleModuleCard,
-} from "components/modules";
-// ui
-import { EmptyState, Icon, Loader, PrimaryButton, Tooltip } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// images
-import emptyModule from "public/empty-state/module.svg";
+import { ModulesListView } from "components/modules";
+import { ModulesListHeader } from "components/headers";
 // types
-import { IModule, SelectModuleType } from "types/modules";
-import type { NextPage } from "next";
-// fetch-keys
-import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
-// helper
-import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
-  {
-    type: "gantt_chart",
-    icon: "view_timeline",
-  },
-  {
-    type: "grid",
-    icon: "table_rows",
-  },
-];
-
-const ProjectModules: NextPage = () => {
-  const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
-  const [createUpdateModule, setCreateUpdateModule] = useState(false);
-
-  const [modulesView, setModulesView] = useState<"grid" | "gantt_chart">("grid");
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(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
-  );
-
-  const handleEditModule = (module: IModule) => {
-    setSelectedModule({ ...module, actionType: "edit" });
-    setCreateUpdateModule(true);
-  };
-
-  useEffect(() => {
-    if (createUpdateModule) return;
-
-    const timer = setTimeout(() => {
-      setSelectedModule(undefined);
-      clearTimeout(timer);
-    }, 500);
-  }, [createUpdateModule]);
+const ProjectModulesPage: NextPageWithLayout = () => <ModulesListView />;
 
+ProjectModulesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${truncateText(activeProject?.name ?? "Project", 32)} Modules`} />
-        </Breadcrumbs>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          {moduleViewOptions.map((option) => (
-            <Tooltip
-              key={option.type}
-              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"
-                }`}
-                onClick={() => setModulesView(option.type)}
-              >
-                <Icon
-                  iconName={option.icon}
-                  className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`}
-                />
-              </button>
-            </Tooltip>
-          ))}
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "m" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Module
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateModuleModal
-        isOpen={createUpdateModule}
-        setIsOpen={setCreateUpdateModule}
-        data={selectedModule}
-        user={user}
-      />
-      {modules ? (
-        modules.length > 0 ? (
-          <>
-            {modulesView === "grid" && (
-              <div className="h-full overflow-y-auto p-8">
-                <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
-                  {modules.map((module) => (
-                    <SingleModuleCard
-                      key={module.id}
-                      module={module}
-                      handleEditModule={() => handleEditModule(module)}
-                      user={user}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-            {modulesView === "gantt_chart" && (
-              <ModulesListGanttChartView modules={modules} mutateModules={mutateModules} />
-            )}
-          </>
-        ) : (
-          <EmptyState
-            title="Manage your project with modules"
-            description="Modules are smaller, focused projects that help you group and organize issues."
-            image={emptyModule}
-            primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
-              text: "New Module",
-              onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "m",
-                });
-                document.dispatchEvent(e);
-              },
-            }}
-          />
-        )
-      ) : (
-        <Loader className="grid grid-cols-3 gap-4 p-8">
-          <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>
-      )}
-    </ProjectAuthorizationWrapper>
+    <AppLayout header={<ModulesListHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
-export default ProjectModules;
+export default ProjectModulesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index d79bfb613..40391234d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -1,61 +1,38 @@
-import React, { useEffect, useRef, useState } from "react";
-
+import React, { useEffect, useRef, useState, ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
+import { Controller, useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
-// react-color
 import { TwitterPicker } from "react-color";
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
 // services
-import projectService from "services/project.service";
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.service";
+import { ProjectService, ProjectMemberService } 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 { AppLayout } from "layouts/app-layout";
 // components
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
+import { PageDetailsHeader } from "components/headers/page-details";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import {
-  CustomSearchSelect,
-  EmptyState,
-  Loader,
-  TextArea,
-  ToggleSwitch,
-  Tooltip,
-} from "components/ui";
+import { EmptyState } from "components/common";
+import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
-import {
-  ArrowLeftIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PlusIcon,
-  StarIcon,
-  LinkIcon,
-  XMarkIcon,
-  ChevronDownIcon,
-} from "@heroicons/react/24/outline";
-import { ColorPalletteIcon } from "components/icons";
+import { ArrowLeft, Lock, LinkIcon, Palette, Plus, Star, Unlock, X, ChevronDown } from "lucide-react";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 import { IIssueLabels, IPage, IPageBlock, IProjectMember } from "types";
 // fetch-keys
 import {
@@ -66,7 +43,13 @@ import {
   USER_PROJECT_VIEW,
 } from "constants/fetch-keys";
 
-const SinglePage: NextPage = () => {
+// services
+const projectService = new ProjectService();
+const projectMemberService = new ProjectMemberService();
+const pageService = new PageService();
+const issueLabelService = new IssueLabelService();
+
+const PageDetailsPage: NextPageWithLayout = () => {
   const [createBlockForm, setCreateBlockForm] = useState(false);
   const [labelModal, setLabelModal] = useState(false);
   const [showBlock, setShowBlock] = useState(false);
@@ -80,52 +63,40 @@ 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
   );
 
   const { data: memberDetails } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      ? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
@@ -134,7 +105,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>(
@@ -156,12 +127,11 @@ const SinglePage: NextPage = () => {
       (prevData) => ({
         ...(prevData as IPage),
         ...formData,
-        labels: formData.labels_list ? formData.labels_list : (prevData as IPage).labels,
       }),
       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 +156,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 +179,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 +194,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 +209,7 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
@@ -262,18 +222,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 +245,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 +257,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) => ({
@@ -343,14 +296,7 @@ const SinglePage: NextPage = () => {
   }, [memberDetails]);
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
-        </Breadcrumbs>
-      }
-    >
+    <>
       {error ? (
         <EmptyState
           image={emptyPage}
@@ -372,20 +318,25 @@ const SinglePage: NextPage = () => {
                     className="flex items-center gap-2 text-sm text-custom-text-200"
                     onClick={() => router.back()}
                   >
-                    <ArrowLeftIcon className="h-4 w-4" />
+                    <ArrowLeft 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={() => (
+                      <TextArea
+                        id="name"
+                        name="name"
+                        value={watch("name")}
+                        placeholder="Page Title"
+                        onBlur={handleSubmit(updatePage)}
+                        onChange={(e) => setValue("name", e.target.value)}
+                        required
+                        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>
 
@@ -403,23 +354,20 @@ const SinglePage: NextPage = () => {
                             className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
                             onClick={() => {
                               const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
-                              partialUpdatePage({ labels_list: updatedLabels });
+                              partialUpdatePage({ labels: 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}
-                            <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
+                            <X className="h-2.5 w-2.5 group-hover:text-red-500" />
                           </div>
                         );
                       })}
@@ -427,13 +375,10 @@ const SinglePage: NextPage = () => {
                   )}
                   <CustomSearchSelect
                     customButton={
-                      <button
-                        type="button"
-                        className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs"
-                      >
-                        <PlusIcon className="h-3.5 w-3.5" />
+                      <div className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs">
+                        <Plus className="h-3.5 w-3.5" />
                         {pageDetails.labels.length <= 0 && <span>Add Label</span>}
-                      </button>
+                      </div>
                     }
                     value={pageDetails.labels}
                     footerOption={
@@ -445,12 +390,12 @@ const SinglePage: NextPage = () => {
                         }}
                       >
                         <span className="flex items-center justify-start gap-1 text-custom-text-200">
-                          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                          <Plus className="h-4 w-4" aria-hidden="true" />
                           <span>Create New Label</span>
                         </span>
                       </button>
                     }
-                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                    onChange={(val: string[]) => partialUpdatePage({ labels: val })}
                     options={options}
                     multiple
                     noChevron
@@ -477,7 +422,7 @@ const SinglePage: NextPage = () => {
                           }`}
                         >
                           Display
-                          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                          <ChevronDown className="h-3 w-3" aria-hidden="true" />
                         </Popover.Button>
 
                         <Transition
@@ -492,9 +437,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) => {
@@ -530,7 +473,7 @@ const SinglePage: NextPage = () => {
                                 }}
                               />
                             ) : (
-                              <ColorPalletteIcon height={16} width={16} />
+                              <Palette height={16} width={16} />
                             )}
                           </Popover.Button>
 
@@ -591,26 +534,22 @@ const SinglePage: NextPage = () => {
                     >
                       {pageDetails.access ? (
                         <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
-                          <LockClosedIcon className="h-4 w-4" />
+                          <Lock className="h-4 w-4" />
                         </button>
                       ) : (
-                        <button
-                          onClick={() => partialUpdatePage({ access: 1 })}
-                          type="button"
-                          className="z-10"
-                        >
-                          <LockOpenIcon className="h-4 w-4" />
+                        <button onClick={() => partialUpdatePage({ access: 1 })} type="button" className="z-10">
+                          <Unlock className="h-4 w-4" />
                         </button>
                       )}
                     </Tooltip>
                   )}
                   {pageDetails.is_favorite ? (
                     <button onClick={handleRemoveFromFavorites} className="z-10">
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button onClick={handleAddToFavorites} type="button" className="z-10">
-                      <StarIcon className="h-4 w-4" />
+                      <Star className="h-4 w-4" />
                     </button>
                   )}
                 </div>
@@ -649,11 +588,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" && (
@@ -661,10 +596,9 @@ const SinglePage: NextPage = () => {
                       isOpen={labelModal}
                       handleClose={() => setLabelModal(false)}
                       projectId={projectId}
-                      user={user}
                       onSuccess={(response) => {
                         partialUpdatePage({
-                          labels_list: [...(pageDetails.labels ?? []), response.id],
+                          labels: [...(pageDetails.labels ?? []), response.id],
                         });
                       }}
                     />
@@ -687,8 +621,16 @@ const SinglePage: NextPage = () => {
           <Loader.Item height="200px" />
         </Loader>
       )}
-    </ProjectAuthorizationWrapper>
+    </>
   );
 };
 
-export default SinglePage;
+PageDetailsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<PageDetailsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default PageDetailsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index f6f8d3d86..5ad969fde 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -1,85 +1,50 @@
-import { useState, Fragment } from "react";
-
+import { useState, Fragment, ReactElement } from "react";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-
-import useSWR from "swr";
-
-// headless ui
 import { Tab } from "@headlessui/react";
-// services
-import projectService from "services/project.service";
 // 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 { AppLayout } from "layouts/app-layout";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
+import { PagesHeader } from "components/headers";
 // ui
-import { PrimaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { Tooltip } from "@plane/ui";
 // types
 import { TPageViewProps } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
+// constants
+import { PAGE_TABS_LIST, PAGE_VIEW_LAYOUTS } from "constants/page";
 
-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 tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"];
-
-const ProjectPages: NextPage = () => {
-  const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
-
-  const [viewType, setViewType] = useState<TPageViewProps>("list");
+const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.OtherPagesList), {
+  ssr: false,
+});
 
+const ProjectPagesPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
+  // states
+  const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
+  const [viewType, setViewType] = useState<TPageViewProps>("list");
 
   const { user } = useUserAuth();
 
   const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
 
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
       case "Recent":
@@ -100,118 +65,107 @@ const ProjectPages: NextPage = () => {
 
   return (
     <>
-      <CreateUpdatePageModal
-        isOpen={createUpdatePageModal}
-        handleClose={() => setCreateUpdatePageModal(false)}
-        user={user}
-      />
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`}
-            />
-          </Breadcrumbs>
-        }
-        right={
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "d" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Create Page
-          </PrimaryButton>
-        }
-      >
-        <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
-          <div className="flex gap-4 justify-between">
-            <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
-            <div className="flex gap-x-1">
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                  viewType === "list" ? "bg-custom-background-80" : ""
-                }`}
-                onClick={() => setViewType("list")}
-              >
-                <ListBulletIcon className="h-4 w-4" />
-              </button>
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                  viewType === "detailed" ? "bg-custom-background-80" : ""
-                }`}
-                onClick={() => setViewType("detailed")}
-              >
-                <Squares2X2Icon className="h-4 w-4" />
-              </button>
-            </div>
+      {workspaceSlug && projectId && (
+        <CreateUpdatePageModal
+          isOpen={createUpdatePageModal}
+          handleClose={() => setCreateUpdatePageModal(false)}
+          user={user}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
+      <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
+        <div className="flex gap-4 justify-between">
+          <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+          <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+            {PAGE_VIEW_LAYOUTS.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 ${
+                    viewType == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                  }`}
+                  onClick={() => setViewType(layout.key as TPageViewProps)}
+                >
+                  <layout.icon
+                    strokeWidth={2}
+                    className={`h-3.5 w-3.5 ${
+                      viewType == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                    }`}
+                  />
+                </button>
+              </Tooltip>
+            ))}
           </div>
-          <Tab.Group
-            as={Fragment}
-            defaultIndex={currentTabValue(pageTab)}
-            onChange={(i) => {
-              switch (i) {
-                case 0:
-                  return setPageTab("Recent");
-                case 1:
-                  return setPageTab("All");
-                case 2:
-                  return setPageTab("Favorites");
-                case 3:
-                  return setPageTab("Created by me");
-                case 4:
-                  return setPageTab("Created by others");
-
-                default:
-                  return setPageTab("Recent");
-              }
-            }}
-          >
-            <Tab.List as="div" className="mb-6 flex items-center justify-between">
-              <div className="flex gap-4 items-center flex-wrap">
-                {tabsList.map((tab, index) => (
-                  <Tab
-                    key={`${tab}-${index}`}
-                    className={({ selected }) =>
-                      `rounded-full border px-5 py-1.5 text-sm outline-none ${
-                        selected
-                          ? "border-custom-primary bg-custom-primary text-white"
-                          : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
-                      }`
-                    }
-                  >
-                    {tab}
-                  </Tab>
-                ))}
-              </div>
-            </Tab.List>
-            <Tab.Panels as={Fragment}>
-              <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">
-                <RecentPagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <AllPagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <FavoritePagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <MyPagesList viewType={viewType} />
-              </Tab.Panel>
-              <Tab.Panel as="div" className="h-full overflow-hidden">
-                <OtherPagesList viewType={viewType} />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
         </div>
-      </ProjectAuthorizationWrapper>
+        <Tab.Group
+          as={Fragment}
+          defaultIndex={currentTabValue(pageTab)}
+          onChange={(i) => {
+            switch (i) {
+              case 0:
+                return setPageTab("Recent");
+              case 1:
+                return setPageTab("All");
+              case 2:
+                return setPageTab("Favorites");
+              case 3:
+                return setPageTab("Created by me");
+              case 4:
+                return setPageTab("Created by others");
+
+              default:
+                return setPageTab("Recent");
+            }
+          }}
+        >
+          <Tab.List as="div" className="mb-6 flex items-center justify-between">
+            <div className="flex gap-4 items-center flex-wrap">
+              {PAGE_TABS_LIST.map((tab) => (
+                <Tab
+                  key={tab.key}
+                  className={({ selected }) =>
+                    `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                      selected
+                        ? "border-custom-primary bg-custom-primary text-white"
+                        : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                    }`
+                  }
+                >
+                  {tab.title}
+                </Tab>
+              ))}
+            </div>
+          </Tab.List>
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">
+              <RecentPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <AllPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <FavoritePagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <MyPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <OtherPagesList viewType={viewType} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
     </>
   );
 };
 
-export default ProjectPages;
+ProjectPagesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<PagesHeader showButton />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectPagesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 1f74a74c3..db070d6c6 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -1,31 +1,29 @@
-import React from "react";
-
+import React, { ReactElement } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
+import useSWR from "swr";
 // services
-import projectService from "services/project.service";
+import { ProjectService, ProjectMemberService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useProjectDetails from "hooks/use-project-details";
 import useToast from "hooks/use-toast";
 // components
 import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
-import { SettingsSidebar } from "components/project";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { ProjectSettingHeader } from "components/headers";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 import { IProject } from "types";
 // constant
-import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 
-const AutomationsSettings: NextPage = () => {
+// services
+const projectService = new ProjectService();
+const projectMemberService = new ProjectMemberService();
+
+const AutomationSettingsPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -37,26 +35,13 @@ const AutomationsSettings: NextPage = () => {
   const { data: memberDetails } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      ? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
   const handleChange = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
-    mutate<IProject>(
-      PROJECT_DETAILS(projectId as string),
-      (prevData) => ({ ...(prevData as IProject), ...formData }),
-      false
-    );
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === projectDetails.id ? { ...p, ...formData } : p)),
-      false
-    );
-
     await projectService
       .updateProject(workspaceSlug as string, projectId as string, formData, user)
       .then(() => {})
@@ -72,40 +57,22 @@ const AutomationsSettings: NextPage = () => {
   const isAdmin = memberDetails?.role === 20;
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Automations Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-          <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}
-          />
-        </section>
+    <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Automations</h3>
       </div>
-    </ProjectAuthorizationWrapper>
+      <AutoArchiveAutomation handleChange={handleChange} />
+      <AutoCloseAutomation handleChange={handleChange} />
+    </section>
   );
 };
 
-export default AutomationsSettings;
+AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="Automations Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default AutomationSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 21e68563a..0afc3399b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -1,196 +1,25 @@
-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";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
+import { ReactElement } from "react";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
-import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
-import { SettingsSidebar } from "components/project";
-//hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-// ui
-import { EmptyState, Loader, PrimaryButton, SecondaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// images
-import emptyEstimate from "public/empty-state/estimate.svg";
+import { ProjectSettingHeader } from "components/headers";
+import { EstimatesList } from "components/estimates/estimate-list";
 // types
-import { IEstimate, IProject } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-const EstimatesSettings: NextPage = () => {
-  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
-
-  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
-  const { projectDetails } = useProjectDetails();
-
-  const { data: estimatesList } = useSWR<IEstimate[]>(
-    workspaceSlug && projectId ? ESTIMATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => estimatesService.getEstimatesList(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const editEstimate = (estimate: IEstimate) => {
-    setEstimateToUpdate(estimate);
-    setEstimateFormOpen(true);
-  };
-
-  const removeEstimate = (estimateId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<IEstimate[]>(
-      ESTIMATES_LIST(projectId as string),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== estimateId),
-      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",
-        });
-      });
-  };
-
-  const disableEstimates = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<IProject>(
-      PROJECT_DETAILS(projectId as string),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return { ...prevData, estimate: null };
-      },
-      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",
-        })
-      );
-  };
+const EstimatesSettingsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 w-full overflow-y-auto">
+    <EstimatesList />
+  </div>
+);
 
+EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <>
-      <CreateUpdateEstimateModal
-        isOpen={estimateFormOpen}
-        data={estimateToUpdate}
-        handleClose={() => {
-          setEstimateFormOpen(false);
-          setEstimateToUpdate(undefined);
-        }}
-        user={user}
-      />
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-              linkTruncate
-            />
-            <BreadcrumbItem title="Estimates Settings" unshrinkTitle />
-          </Breadcrumbs>
-        }
-      >
-        <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 flex flex-col w-full overflow-y-auto">
-            <section className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
-              <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
-                    onClick={() => {
-                      setEstimateToUpdate(undefined);
-                      setEstimateFormOpen(true);
-                    }}
-                  >
-                    Add Estimate
-                  </PrimaryButton>
-                  {projectDetails?.estimate && (
-                    <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
-                  )}
-                </div>
-              </div>
-            </section>
-            {estimatesList ? (
-              estimatesList.length > 0 ? (
-                <section className="h-full bg-custom-background-100 overflow-y-auto">
-                  {estimatesList.map((estimate) => (
-                    <SingleEstimate
-                      key={estimate.id}
-                      estimate={estimate}
-                      editEstimate={(estimate) => editEstimate(estimate)}
-                      handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
-                      user={user}
-                    />
-                  ))}
-                </section>
-              ) : (
-                <div className="h-full w-full overflow-y-auto">
-                  <EmptyState
-                    title="No estimates yet"
-                    description="Estimates help you communicate the complexity of an issue."
-                    image={emptyEstimate}
-                    primaryButton={{
-                      icon: <PlusIcon className="h-4 w-4" />,
-                      text: "Add Estimate",
-                      onClick: () => {
-                        setEstimateToUpdate(undefined);
-                        setEstimateFormOpen(true);
-                      },
-                    }}
-                  />
-                </div>
-              )
-            ) : (
-              <Loader className="mt-5 space-y-5">
-                <Loader.Item height="40px" />
-                <Loader.Item height="40px" />
-                <Loader.Item height="40px" />
-                <Loader.Item height="40px" />
-              </Loader>
-            )}
-          </div>
-        </div>
-      </ProjectAuthorizationWrapper>
-    </>
+    <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}; </ProjectSettingLayout>
+    </AppLayout>
   );
 };
 
-export default EstimatesSettings;
+export default EstimatesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index ba74cf2a5..2e9597b3d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -1,223 +1,48 @@
-import React from "react";
-
+import { ReactElement } 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 useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
-import { SettingsSidebar } from "components/project";
-// ui
-import { ToggleSwitch } from "components/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";
+import { ProjectSettingHeader } from "components/headers";
+import { ProjectFeaturesList } from "components/project";
 // types
-import { IProject } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-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" />
-    ),
-
-    property: "cycle_view",
-  },
-  {
-    title: "Modules",
-    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.",
-    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.",
-    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.",
-    icon: <Inbox className="h-4 w-4 text-fuchsia-500 flex-shrink-0" />,
-    property: "inbox_view",
-  },
-];
-
-const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType => {
-  switch (feature) {
-    case "Cycles":
-      return toggle ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF";
-    case "Modules":
-      return toggle ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF";
-    case "Views":
-      return toggle ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF";
-    case "Pages":
-      return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
-    case "Inbox":
-      return toggle ? "TOGGLE_INBOX_ON" : "TOGGLE_INBOX_OFF";
-    default:
-      throw new Error("Invalid feature");
-  }
-};
-
-const FeaturesSettings: NextPage = () => {
+const FeaturesSettingsPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
+  // store
+  const {
+    user: { fetchUserProjectInfo },
+  } = useMobxStore();
 
   const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
   );
 
-  const handleSubmit = async (formData: Partial<IProject>) => {
-    if (!workspaceSlug || !projectId || !projectDetails) return;
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug.toString(), {
-        is_favorite: "all",
-      }),
-      (prevData) => prevData?.map((p) => (p.id === projectId ? { ...p, ...formData } : p)),
-      false
-    );
-
-    mutate<IProject>(
-      PROJECT_DETAILS(projectId as string),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return { ...prevData, ...formData };
-      },
-      false
-    );
-
-    setToastAlert({
-      type: "success",
-      title: "Success!",
-      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.",
-        })
-      );
-  };
-
   const isAdmin = memberDetails?.role === 20;
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Features Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
-            <h3 className="text-xl font-medium">Features</h3>
-          </div>
-          <div>
-            {featuresList.map((feature) => (
-              <div
-                key={feature.property}
-                className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
-              >
-                <div className="flex items-start gap-3">
-                  <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
-                    {feature.icon}
-                  </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>
-                  </div>
-                </div>
-                <ToggleSwitch
-                  value={projectDetails?.[feature.property as keyof IProject]}
-                  onChange={() => {
-                    trackEventServices.trackMiscellaneousEvent(
-                      {
-                        workspaceId: (projectDetails?.workspace as any)?.id,
-                        workspaceSlug,
-                        projectId,
-                        projectIdentifier: projectDetails?.identifier,
-                        projectName: projectDetails?.name,
-                      },
-                      getEventType(
-                        feature.title,
-                        !projectDetails?.[feature.property as keyof IProject]
-                      ),
-                      user
-                    );
-                    handleSubmit({
-                      [feature.property]: !projectDetails?.[feature.property as keyof IProject],
-                    });
-                  }}
-                  disabled={!isAdmin}
-                  size="sm"
-                />
-              </div>
-            ))}
-          </div>
-        </section>
+    <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Features</h3>
       </div>
-    </ProjectAuthorizationWrapper>
+      <ProjectFeaturesList />
+    </section>
   );
 };
 
-export default FeaturesSettings;
+FeaturesSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default FeaturesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 6fc2f05d8..c93b258d0 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -1,452 +1,83 @@
-import { useEffect, useState } from "react";
-
+import { useState, ReactElement } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
+import useSWR from "swr";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// services
-import projectService from "services/project.service";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // 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 { ProjectSettingHeader } from "components/headers";
 import {
-  Input,
-  TextArea,
-  Loader,
-  CustomSelect,
-  DangerButton,
-  Icon,
-  PrimaryButton,
-} 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";
+  DeleteProjectModal,
+  DeleteProjectSection,
+  ProjectDetailsForm,
+  ProjectDetailsFormLoader,
+} from "components/project";
 // types
-import { IProject, IWorkspace } from "types";
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 // fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
-// constants
-import { NETWORK_CHOICES } from "constants/project";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 
-const defaultValues: Partial<IProject> = {
-  name: "",
-  description: "",
-  identifier: "",
-  network: 0,
-};
-
-const GeneralSettings: NextPage = () => {
+const GeneralSettingsPage: NextPageWithLayout = observer(() => {
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // 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,
+  // 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
   );
 
-  const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
+  // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
+  // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
-  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 isAdmin = memberDetails?.role === 20;
+  const isAdmin = currentProjectDetails?.member_role === 20;
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
+    <>
+      {currentProjectDetails && (
+        <DeleteProjectModal
+          project={currentProjectDetails}
+          isOpen={Boolean(selectProject)}
+          onClose={() => setSelectedProject(null)}
+        />
+      )}
+
+      <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+        {currentProjectDetails && workspaceSlug ? (
+          <ProjectDetailsForm
+            project={currentProjectDetails}
+            workspaceSlug={workspaceSlug.toString()}
+            isAdmin={isAdmin}
           />
-          <BreadcrumbItem title="General Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <DeleteProjectModal
-        data={projectDetails ?? null}
-        isOpen={Boolean(selectProject)}
-        onClose={() => setSelectedProject(null)}
-        user={user}
-      />
-      <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}
-                            />
-                          )}
-                        />
-                      </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>
+        ) : (
+          <ProjectDetailsFormLoader />
+        )}
 
-                <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>
+        {isAdmin && (
+          <DeleteProjectSection
+            projectDetails={currentProjectDetails}
+            handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
+          />
+        )}
       </div>
-    </ProjectAuthorizationWrapper>
+    </>
+  );
+});
+
+GeneralSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
   );
 };
 
-export default GeneralSettings;
+export default GeneralSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 181c9f8ec..08bce4c4c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -1,114 +1,88 @@
-import React from "react";
-
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // 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";
+import { IntegrationCard } from "components/project";
+import { ProjectSettingHeader } from "components/headers";
 // ui
-import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
 // images
 import emptyIntegration from "public/empty-state/integration.svg";
 // types
 import { IProject } from "types";
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 // fetch-keys
-import { PROJECT_DETAILS, USER_PROJECT_VIEW, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
 
-const ProjectIntegrations: NextPage = () => {
+// services
+const integrationService = new IntegrationService();
+const projectService = new ProjectService();
+
+const ProjectIntegrationsPage: NextPageWithLayout = () => {
   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(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const isAdmin = memberDetails?.role === 20;
+  const isAdmin = projectDetails?.member_role === 20;
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectId}/issues`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Integrations Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <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 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
-            <h3 className="text-xl font-medium">Integrations</h3>
-          </div>
-          {workspaceIntegrations ? (
-            workspaceIntegrations.length > 0 ? (
-              <div>
-                {workspaceIntegrations.map((integration) => (
-                  <SingleIntegration
-                    key={integration.integration_detail.id}
-                    integration={integration}
-                  />
-                ))}
-              </div>
-            ) : (
-              <EmptyState
-                title="You haven't configured integrations"
-                description="Configure GitHub and other integrations to sync your project issues."
-                image={emptyIntegration}
-                primaryButton={{
-                  text: "Configure now",
-                  onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
-                }}
-                disabled={!isAdmin}
-              />
-            )
-          ) : (
-            <Loader className="space-y-5">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
-          )}
-        </div>
+    <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Integrations</h3>
       </div>
-    </ProjectAuthorizationWrapper>
+      {workspaceIntegrations ? (
+        workspaceIntegrations.length > 0 ? (
+          <div>
+            {workspaceIntegrations.map((integration) => (
+              <IntegrationCard key={integration.integration_detail.id} integration={integration} />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            title="You haven't configured integrations"
+            description="Configure GitHub and other integrations to sync your project issues."
+            image={emptyIntegration}
+            primaryButton={{
+              text: "Configure now",
+              onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
+            }}
+            disabled={!isAdmin}
+          />
+        )
+      ) : (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </div>
   );
 };
 
-export default ProjectIntegrations;
+ProjectIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Integrations Settings" />}>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProjectIntegrationsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 13b290152..6adbdb69e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -1,216 +1,25 @@
-import React, { useState, useRef } from "react";
-
-import { useRouter } from "next/router";
-
-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 { ReactElement } from "react";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
-import {
-  CreateUpdateLabelInline,
-  DeleteLabelModal,
-  LabelsListModal,
-  SingleLabel,
-  SingleLabelGroup,
-} from "components/labels";
-import { SettingsSidebar } from "components/project";
-// ui
-import { EmptyState, Loader, PrimaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// images
-import emptyLabel from "public/empty-state/label.svg";
+import { ProjectSettingsLabelList } from "components/labels";
+import { ProjectSettingHeader } from "components/headers";
 // types
-import { IIssueLabels } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-const LabelsSettings: NextPage = () => {
-  // create/edit label form
-  const [labelForm, setLabelForm] = useState(false);
-
-  // edit label
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
-
-  // labels list modal
-  const [labelsListModal, setLabelsListModal] = useState(false);
-  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
-
-  // delete label
-  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const scrollToRef = useRef<HTMLDivElement>(null);
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(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)
-      : null
-  );
-
-  const newLabel = () => {
-    setIsUpdating(false);
-    setLabelForm(true);
-  };
-
-  const addLabelToGroup = (parentLabel: IIssueLabels) => {
-    setLabelsListModal(true);
-    setParentLabel(parentLabel);
-  };
-
-  const editLabel = (label: IIssueLabels) => {
-    setLabelForm(true);
-    setIsUpdating(true);
-    setLabelToUpdate(label);
-  };
+const LabelsSettingsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+    <ProjectSettingsLabelList />
+  </div>
+);
 
+LabelsSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <>
-      <LabelsListModal
-        isOpen={labelsListModal}
-        handleClose={() => setLabelsListModal(false)}
-        parent={parentLabel}
-        user={user}
-      />
-      <DeleteLabelModal
-        isOpen={!!selectDeleteLabel}
-        data={selectDeleteLabel ?? null}
-        onClose={() => setSelectDeleteLabel(null)}
-        user={user}
-      />
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-              linkTruncate
-            />
-            <BreadcrumbItem title="Labels Settings" unshrinkTitle />
-          </Breadcrumbs>
-        }
-      >
-        <div className="flex flex-row gap-2 h-full">
-          <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-            <SettingsSidebar />
-          </div>
-          <section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
-            <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"
-              >
-                Add label
-              </PrimaryButton>
-            </div>
-            <div className="space-y-3 py-6 h-full w-full">
-              {labelForm && (
-                <CreateUpdateLabelInline
-                  labelForm={labelForm}
-                  setLabelForm={setLabelForm}
-                  isUpdating={isUpdating}
-                  labelToUpdate={labelToUpdate}
-                  onClose={() => {
-                    setLabelForm(false);
-                    setIsUpdating(false);
-                    setLabelToUpdate(null);
-                  }}
-                  ref={scrollToRef}
-                />
-              )}
-              <>
-                {issueLabels ? (
-                  issueLabels.length > 0 ? (
-                    issueLabels.map((label) => {
-                      const children = issueLabels?.filter((l) => l.parent === label.id);
-
-                      if (children && children.length === 0) {
-                        if (!label.parent)
-                          return (
-                            <SingleLabel
-                              key={label.id}
-                              label={label}
-                              addLabelToGroup={() => addLabelToGroup(label)}
-                              editLabel={(label) => {
-                                editLabel(label);
-                                scrollToRef.current?.scrollIntoView({
-                                  behavior: "smooth",
-                                });
-                              }}
-                              handleLabelDelete={() => setSelectDeleteLabel(label)}
-                            />
-                          );
-                      } else
-                        return (
-                          <SingleLabelGroup
-                            key={label.id}
-                            label={label}
-                            labelChildren={children}
-                            addLabelToGroup={addLabelToGroup}
-                            editLabel={(label) => {
-                              editLabel(label);
-                              scrollToRef.current?.scrollIntoView({
-                                behavior: "smooth",
-                              });
-                            }}
-                            handleLabelDelete={() => setSelectDeleteLabel(label)}
-                            user={user}
-                          />
-                        );
-                    })
-                  ) : (
-                    <EmptyState
-                      title="No labels yet"
-                      description="Create labels to help organize and filter issues in you project"
-                      image={emptyLabel}
-                      primaryButton={{
-                        text: "Add label",
-                        onClick: () => newLabel(),
-                      }}
-                      isFullScreen={false}
-                    />
-                  )
-                ) : (
-                  <Loader className="space-y-5">
-                    <Loader.Item height="40px" />
-                    <Loader.Item height="40px" />
-                    <Loader.Item height="40px" />
-                    <Loader.Item height="40px" />
-                  </Loader>
-                )}
-              </>
-            </div>
-          </section>
-        </div>
-      </ProjectAuthorizationWrapper>
-    </>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Labels Settings" />}>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
   );
 };
 
-export default LabelsSettings;
+export default LabelsSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 51143d868..f7903fb55 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -1,511 +1,26 @@
-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";
-// hooks
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-import useProjectMembers from "hooks/use-project-members";
-import useProjectDetails from "hooks/use-project-details";
-import { Controller, useForm } from "react-hook-form";
+import { ReactElement } from "react";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // 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 { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { ProjectSettingHeader } from "components/headers";
+import { ProjectMemberList, ProjectSettingsMemberDefaults } from "components/project";
 // types
-import type { NextPage } from "next";
-import { IProject, IUserLite, IWorkspace } from "types";
-// fetch-keys
-import {
-  PROJECTS_LIST,
-  PROJECT_DETAILS,
-  PROJECT_INVITATIONS_WITH_EMAIL,
-  PROJECT_MEMBERS,
-  PROJECT_MEMBERS_WITH_EMAIL,
-  USER_PROJECT_VIEW,
-  WORKSPACE_DETAILS,
-} from "constants/fetch-keys";
-// constants
-import { ROLE } from "constants/workspace";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-const defaultValues: Partial<IProject> = {
-  project_lead: null,
-  default_assignee: null,
-};
-
-const MembersSettings: NextPage = () => {
-  const [inviteModal, setInviteModal] = useState(false);
-  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
-  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
-
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
-  const { isOwner } = useProjectMembers(
-    workspaceSlug?.toString(),
-    projectId?.toString(),
-    Boolean(workspaceSlug && projectId)
-  );
-
-  const {
-    handleSubmit,
-    reset,
-    control,
-    formState: { isSubmitting },
-  } = 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: projectMembers, mutate: mutateMembers } = useSWR(
-    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
-      ? () =>
-          projectService.projectInvitationsWithEmail(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const members = [
-    ...(projectMembers?.map((item) => ({
-      id: item.id,
-      memberId: item.member?.id,
-      avatar: item.member?.avatar,
-      first_name: item.member?.first_name,
-      last_name: item.member?.last_name,
-      email: item.member?.email,
-      display_name: item.member?.display_name,
-      role: item.role,
-      status: true,
-      member: true,
-    })) || []),
-    ...(projectInvitations?.map((item: any) => ({
-      id: item.id,
-      memberId: item.id,
-      avatar: item.avatar ?? "",
-      first_name: item.first_name ?? item.email,
-      last_name: item.last_name ?? "",
-      email: item.email,
-      display_name: item.email,
-      role: item.role,
-      status: item.accepted,
-      member: false,
-    })) || []),
-  ];
-
-  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
-
-  const handleProjectInvitationSuccess = () => {};
-
-  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,
-    };
-
-    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",
-          })
-        );
-
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  useEffect(() => {
-    if (projectDetails)
-      reset({
-        ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
-        project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  const submitChanges = async (formData: Partial<IProject>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload: Partial<IProject> = {
-      default_assignee: formData.default_assignee === "none" ? null : 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));
-
-        mutate(
-          PROJECTS_LIST(workspaceSlug as string, {
-            is_favorite: "all",
-          })
-        );
-
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const isAdmin = memberDetails?.role === 20;
+const MembersSettingsPage: NextPageWithLayout = () => (
+  <section className={`pr-9 py-8 w-full overflow-y-auto`}>
+    <ProjectSettingsMemberDefaults />
+    <ProjectMemberList />
+  </section>
+);
 
+MembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Members Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <ConfirmProjectMemberRemove
-        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
-        onClose={() => {
-          setSelectedRemoveMember(null);
-          setSelectedInviteRemoveMember(null);
-        }}
-        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
-            );
-          }
-          if (selectedInviteRemoveMember) {
-            await projectService.deleteProjectInvitation(
-              activeWorkspace.slug,
-              projectDetails.id,
-              selectedInviteRemoveMember
-            );
-            mutateInvitations(
-              (prevData: any) =>
-                prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
-              false
-            );
-          }
-          setToastAlert({
-            type: "success",
-            message: "Member removed successfully",
-            title: "Success",
-          });
-        }}
-      />
-      <SendProjectInvitationModal
-        isOpen={inviteModal}
-        setIsOpen={setInviteModal}
-        members={members}
-        user={user}
-        onSuccess={() => mutateMembers()}
-      />
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <section className={`pr-9 py-8 w-full overflow-y-auto`}>
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
-            <h3 className="text-xl font-medium">Defaults</h3>
-          </div>
-          <div className="flex flex-col gap-2 pb-4 w-full">
-            <div className="flex items-center py-8 gap-4 w-full">
-              <div className="flex flex-col gap-2 w-1/2">
-                <h4 className="text-sm">Project Lead</h4>
-                <div className="">
-                  {projectDetails ? (
-                    <Controller
-                      control={control}
-                      name="project_lead"
-                      render={({ field: { value } }) => (
-                        <MemberSelect
-                          value={value}
-                          onChange={(val: string) => {
-                            submitChanges({ project_lead: val });
-                          }}
-                          isDisabled={!isAdmin}
-                        />
-                      )}
-                    />
-                  ) : (
-                    <Loader className="h-9 w-full">
-                      <Loader.Item width="100%" height="100%" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-2 w-1/2">
-                <h4 className="text-sm">Default Assignee</h4>
-                <div className="">
-                  {projectDetails ? (
-                    <Controller
-                      control={control}
-                      name="default_assignee"
-                      render={({ field: { value } }) => (
-                        <MemberSelect
-                          value={value}
-                          onChange={(val: string) => {
-                            submitChanges({ default_assignee: val });
-                          }}
-                          isDisabled={!isAdmin}
-                        />
-                      )}
-                    />
-                  ) : (
-                    <Loader className="h-9 w-full">
-                      <Loader.Item width="100%" height="100%" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <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>
-          </div>
-          {!projectMembers || !projectInvitations ? (
-            <Loader className="space-y-5">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
-          ) : (
-            <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 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">
-                            <img
-                              src={member.avatar}
-                              alt={member.display_name}
-                              className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
-                            />
-                          </div>
-                        ) : member.display_name || member.email ? (
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                            {(member.display_name || member.email)?.charAt(0)}
-                          </div>
-                        ) : (
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                            ?
-                          </div>
-                        )}
-                        <div>
-                          {member.member ? (
-                            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                              <a className="text-sm">
-                                <span>
-                                  {member.first_name} {member.last_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>
-                          )}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-3 text-xs">
-                        {!member.member && (
-                          <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
-                            Pending
-                          </div>
-                        )}
-                        <CustomSelect
-                          customButton={
-                            <button className="flex item-center gap-1">
-                              <span
-                                className={`flex items-center text-sm font-medium ${
-                                  member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
-                                }`}
-                              >
-                                {ROLE[member.role as keyof typeof ROLE]}
-                              </span>
-                              {member.memberId !== user?.id && (
-                                <Icon iconName="expand_more" className="text-lg font-medium" />
-                              )}
-                            </button>
-                          }
-                          value={member.role}
-                          onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
-                            if (!activeWorkspace || !projectDetails) return;
-
-                            mutateMembers(
-                              (prevData: any) =>
-                                prevData.map((m: any) =>
-                                  m.id === member.id ? { ...m, role: value } : m
-                                ),
-                              false
-                            );
-
-                            projectService
-                              .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.",
-                                });
-                              });
-                          }}
-                          position="right"
-                          disabled={
-                            member.memberId === user?.id ||
-                            !member.member ||
-                            (currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < member.role)
-                          }
-                        >
-                          {Object.keys(ROLE).map((key) => {
-                            if (
-                              currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < parseInt(key)
-                            )
-                              return null;
-
-                            return (
-                              <CustomSelect.Option key={key} value={key}>
-                                <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                              </CustomSelect.Option>
-                            );
-                          })}
-                        </CustomSelect>
-                        <CustomMenu ellipsis disabled={!isAdmin}>
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (member.member) setSelectedRemoveMember(member.id);
-                              else setSelectedInviteRemoveMember(member.id);
-                            }}
-                          >
-                            <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>
-                          </CustomMenu.MenuItem>
-                        </CustomMenu>
-                      </div>
-                    </div>
-                  ))
-                : null}
-            </div>
-          )}
-        </section>
-      </div>
-    </ProjectAuthorizationWrapper>
+    <AppLayout header={<ProjectSettingHeader title="Members Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
   );
 };
 
-export default MembersSettings;
+export default MembersSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 88be296c4..6895a53ae 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -1,166 +1,28 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import stateService from "services/state.service";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-import useUserAuth from "hooks/use-user-auth";
-// layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ReactElement } from "react";
+// layout
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
-import {
-  CreateUpdateStateInline,
-  DeleteStateModal,
-  SingleState,
-  StateGroup,
-} from "components/states";
-import { SettingsSidebar } from "components/project";
-// ui
-import { Loader } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { getStatesList, orderStateGroups } from "helpers/state.helper";
-import { truncateText } from "helpers/string.helper";
+import { ProjectSettingStateList } from "components/states";
+import { ProjectSettingHeader } from "components/headers";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
+import { NextPageWithLayout } from "types/app";
 
-const StatesSettings: NextPage = () => {
-  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
-  const [selectedState, setSelectedState] = useState<string | null>(null);
-  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { projectDetails } = useProjectDetails();
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const orderedStateGroups = orderStateGroups(states);
-  const statesList = getStatesList(orderedStateGroups);
+const StatesSettingsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
+      <h3 className="text-xl font-medium">States</h3>
+    </div>
+    <ProjectSettingStateList />
+  </div>
+);
 
+StatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <>
-      <DeleteStateModal
-        isOpen={!!selectDeleteState}
-        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
-        onClose={() => setSelectDeleteState(null)}
-        user={user}
-      />
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-              linkTruncate
-            />
-            <BreadcrumbItem title="States Settings" unshrinkTitle />
-          </Breadcrumbs>
-        }
-      >
-        <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 gap-10 w-full overflow-y-auto">
-            <div className="flex items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">States</h3>
-            </div>
-            <div className="space-y-8 py-6">
-              {states && projectDetails && orderedStateGroups ? (
-                Object.keys(orderedStateGroups).map((key) => {
-                  if (orderedStateGroups[key].length !== 0)
-                    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>
-                          <button
-                            type="button"
-                            className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
-                            onClick={() => setActiveGroup(key as keyof StateGroup)}
-                          >
-                            <PlusIcon className="h-4 w-4" />
-                          </button>
-                        </div>
-                        <div className="flex flex-col gap-2 rounded">
-                          {key === activeGroup && (
-                            <CreateUpdateStateInline
-                              groupLength={orderedStateGroups[key].length}
-                              onClose={() => {
-                                setActiveGroup(null);
-                                setSelectedState(null);
-                              }}
-                              data={null}
-                              selectedGroup={key as keyof StateGroup}
-                              user={user}
-                            />
-                          )}
-                          {orderedStateGroups[key].map((state, index) =>
-                            state.id !== selectedState ? (
-                              <SingleState
-                                key={state.id}
-                                index={index}
-                                state={state}
-                                statesList={statesList ?? []}
-                                handleEditState={() => setSelectedState(state.id)}
-                                handleDeleteState={() => setSelectDeleteState(state.id)}
-                                user={user}
-                              />
-                            ) : (
-                              <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
-                                  }
-                                  selectedGroup={key as keyof StateGroup}
-                                  user={user}
-                                />
-                              </div>
-                            )
-                          )}
-                        </div>
-                      </div>
-                    );
-                })
-              ) : (
-                <Loader className="space-y-5 md:w-2/3">
-                  <Loader.Item height="40px" />
-                  <Loader.Item height="40px" />
-                  <Loader.Item height="40px" />
-                  <Loader.Item height="40px" />
-                </Loader>
-              )}
-            </div>
-          </div>
-        </div>
-      </ProjectAuthorizationWrapper>
-    </>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="States Settings" />}>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
   );
 };
 
-export default StatesSettings;
+export default StatesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 3597f113f..f704f0e89 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -1,126 +1,58 @@
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-import viewsService from "services/views.service";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
+import { AppLayout } from "layouts/app-layout";
 // components
-import { IssuesFilterView, IssuesView } from "components/core";
+import { ProjectViewLayoutRoot } from "components/issues";
+import { ProjectViewIssuesHeader } from "components/headers";
 // ui
-import { CustomMenu, EmptyState, PrimaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { StackedLayersIcon } from "components/icons";
-// images
+import { EmptyState } from "components/common";
+// assets
 import emptyView from "public/empty-state/view.svg";
-// helpers
-import { truncateText } from "helpers/string.helper";
-// fetch-keys
-import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
+// types
+import { NextPageWithLayout } from "types/app";
 
-const SingleView: React.FC = () => {
+const ProjectViewIssuesPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
 
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { projectViews: projectViewsStore } = useMobxStore();
 
-  const { data: views } = useSWR(
-    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => viewsService.getViews(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
+  const { error } = useSWR(
+    workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
     workspaceSlug && projectId && viewId
-      ? () =>
-          viewsService.getViewDetails(
-            workspaceSlug as string,
-            projectId as string,
-            viewId as string
-          )
+      ? () => projectViewsStore.fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())
       : 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`),
-            }}
-          />
-        ) : (
-          <div className="h-full w-full flex flex-col">
-            <IssuesView />
-          </div>
-        )}
-      </ProjectAuthorizationWrapper>
-    </IssueViewContextProvider>
+    <>
+      {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 />
+      )}
+    </>
   );
 };
 
-export default SingleView;
+ProjectViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectViewIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectViewIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 9a5511037..b7bb7fd9d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -1,144 +1,38 @@
-import React, { useState } from "react";
-
+import { ReactElement } 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";
-// layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// 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";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { PrimaryButton, Loader, EmptyState } from "components/ui";
-import { DeleteViewModal, CreateUpdateViewModal, SingleViewItem } from "components/views";
+import { ProjectViewsHeader } from "components/headers";
+import { ProjectViewsList } from "components/views";
+// layouts
+import { AppLayout } from "layouts/app-layout";
 // 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);
+import { NextPageWithLayout } from "types/app";
 
+const ProjectViewsPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
+  // store
+  const {
+    projectViews: { fetchAllViews },
+  } = useMobxStore();
 
-  const { user } = useUserAuth();
-
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_LIST_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId ? () => fetchAllViews(workspaceSlug.toString(), projectId.toString()) : null
   );
 
-  const { data: views } = useSWR(
-    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => viewsService.getViews(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const handleEditView = (view: IView) => {
-    setSelectedViewToUpdate(view);
-    setCreateUpdateViewModal(true);
-  };
-
-  const handleDeleteView = (view: IView) => {
-    setSelectedViewToDelete(view);
-    setDeleteViewModal(true);
-  };
+  return <ProjectViewsList />;
+};
 
+ProjectViewsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${activeProject?.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>
-      }
-    >
-      <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>
-      )}
-    </ProjectAuthorizationWrapper>
+    <AppLayout header={<ProjectViewsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
-export default ProjectViews;
+export default ProjectViewsPage;
diff --git a/web/pages/[workspaceSlug]/projects/index.tsx b/web/pages/[workspaceSlug]/projects/index.tsx
index 5c671e32a..bb720e1ef 100644
--- a/web/pages/[workspaceSlug]/projects/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/index.tsx
@@ -1,174 +1,23 @@
-import React, { useState } from "react";
-
+import { ReactElement } 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";
+import { ProjectCardList } from "components/project";
+import { ProjectsHeader } from "components/headers";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// type
+import { NextPageWithLayout } from "types/app";
 
-const ProjectsPage: NextPage = () => {
+const ProjectsPage: NextPageWithLayout = () => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const [query, setQuery] = useState("");
+  return <>{workspaceSlug && <ProjectCardList workspaceSlug={workspaceSlug.toString()} />}</>;
+};
 
-  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>
-  );
+ProjectsPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<ProjectsHeader />}>{page}</AppLayout>;
 };
 
 export default ProjectsPage;
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index eeb95a5a3..bd7fe3f2f 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -1,73 +1,39 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
+import { ReactElement } from "react";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // component
-import { SettingsSidebar } from "components/project";
+import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { SecondaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Button } from "@plane/ui";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-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)
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Billing & Plans Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <section className="pr-9 py-8 w-full overflow-y-auto">
-          <div>
-            <div className="flex  items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">Billing & Plans</h3>
-            </div>
-          </div>
-          <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>
-              <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
-                <SecondaryButton outline>View Plans</SecondaryButton>
-              </a>
-            </div>
-          </div>
-        </section>
+const BillingSettingsPage: NextPageWithLayout = () => (
+  <section className="pr-9 py-8 w-full overflow-y-auto">
+    <div>
+      <div className="flex  items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Billing & Plans</h3>
       </div>
-    </WorkspaceAuthorizationLayout>
+    </div>
+    <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>
+        <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
+          <Button variant="neutral-primary">View Plans</Button>
+        </a>
+      </div>
+    </div>
+  </section>
+);
+
+BillingSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
   );
 };
 
-export default BillingSettings;
+export default BillingSettingsPage;
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index f600f82f7..07e76c86f 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -1,58 +1,28 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { ReactElement } from "react";
+// layout
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
+import { WorkspaceSettingHeader } from "components/headers";
 import ExportGuide from "components/exporter/guide";
-import { SettingsSidebar } from "components/project";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-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 ExportsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 w-full overflow-y-auto">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
+      <h3 className="text-xl font-medium">Exports</h3>
+    </div>
+    <ExportGuide />
+  </div>
+);
 
+ExportsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Export Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <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">
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
-            <h3 className="text-xl font-medium">Exports</h3>
-          </div>
-          <ExportGuide />
-        </div>
-      </div>
-    </WorkspaceAuthorizationLayout>
+    <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
   );
 };
 
-export default ImportExport;
+export default ExportsPage;
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index a8a5c8dc0..932c939f6 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -1,58 +1,28 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
+import { ReactElement } from "react";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
 import IntegrationGuide from "components/integration/guide";
-import { SettingsSidebar } from "components/project";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { WorkspaceSettingHeader } from "components/headers";
 // types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { NextPageWithLayout } from "types/app";
 
-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 ImportsPage: NextPageWithLayout = () => (
+  <section className="pr-9 py-8 w-full overflow-y-auto">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
+      <h3 className="text-xl font-medium">Imports</h3>
+    </div>
+    <IntegrationGuide />
+  </section>
+);
 
+ImportsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <section className="pr-9 py-8 w-full overflow-y-auto">
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
-            <h3 className="text-xl font-medium">Imports</h3>
-          </div>
-          <IntegrationGuide />
-        </section>
-      </div>
-    </WorkspaceAuthorizationLayout>
+    <AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
   );
 };
 
-export default ImportExport;
+export default ImportsPage;
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 4a2986dfa..49dd85e2a 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -1,372 +1,21 @@
-import React, { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-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";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
+import { ReactElement } from "react";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // 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 { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { Pencil } from "lucide-react";
-// helpers
-import { truncateText } from "helpers/string.helper";
+import { WorkspaceSettingHeader } from "components/headers";
+import { WorkspaceDetails } from "components/workspace";
 // types
-import type { IWorkspace } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS, USER_WORKSPACES, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
-// constants
-import { ORGANIZATION_SIZE } from "constants/workspace";
+import { NextPageWithLayout } from "types/app";
 
-const defaultValues: Partial<IWorkspace> = {
-  name: "",
-  url: "",
-  organization_size: "2-10",
-  logo: null,
-};
-
-const WorkspaceSettings: NextPage = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isImageUploading, setIsImageUploading] = useState(false);
-  const [isImageRemoving, setIsImageRemoving] = useState(false);
-  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: memberDetails } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
-  );
-
-  const { setToastAlert } = useToast();
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    reset,
-    watch,
-    setValue,
-    formState: { errors, isSubmitting },
-  } = useForm<IWorkspace>({
-    defaultValues: { ...defaultValues, ...activeWorkspace },
-  });
-
-  useEffect(() => {
-    if (activeWorkspace) reset({ ...activeWorkspace });
-  }, [activeWorkspace, reset]);
-
-  const onSubmit = async (formData: IWorkspace) => {
-    if (!activeWorkspace) return;
-
-    const payload: Partial<IWorkspace> = {
-      logo: formData.logo,
-      name: formData.name,
-      organization_size: formData.organization_size,
-    };
-
-    await workspaceService
-      .updateWorkspace(activeWorkspace.slug, payload, user)
-      .then((res) => {
-        mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
-          prevData?.map((workspace) => (workspace.id === res.id ? res : workspace))
-        );
-        mutate<IWorkspace>(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            logo: formData.logo,
-          };
-        });
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Workspace updated successfully",
-        });
-      })
-      .catch((err) => console.error(err));
-  };
-
-  const handleDelete = (url: string | null | undefined) => {
-    if (!activeWorkspace || !url) return;
-
-    setIsImageRemoving(true);
-
-    fileService.deleteFile(activeWorkspace.id, url).then(() => {
-      workspaceService
-        .updateWorkspace(activeWorkspace.slug, { logo: "" }, user)
-        .then((res) => {
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "Workspace picture removed successfully.",
-          });
-          mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
-            prevData?.map((workspace) => (workspace.id === res.id ? res : workspace))
-          );
-          mutate<IWorkspace>(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              logo: "",
-            };
-          });
-          setIsImageUploadModalOpen(false);
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "There was some error in deleting your profile picture. Please try again.",
-          });
-        })
-        .finally(() => setIsImageRemoving(false));
-    });
-  };
-
-  const isAdmin = memberDetails?.role === 20;
+const WorkspaceSettingsPage: NextPageWithLayout = () => <WorkspaceDetails />;
 
+WorkspaceSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`}
-          />
-        </Breadcrumbs>
-      }
-    >
-      <ImageUploadModal
-        isOpen={isImageUploadModalOpen}
-        onClose={() => setIsImageUploadModalOpen(false)}
-        isRemoving={isImageRemoving}
-        handleDelete={() => handleDelete(activeWorkspace?.logo)}
-        onSuccess={(imageUrl) => {
-          setIsImageUploading(true);
-          setValue("logo", imageUrl);
-          setIsImageUploadModalOpen(false);
-          handleSubmit(onSubmit)().then(() => setIsImageUploading(false));
-        }}
-        value={watch("logo")}
-      />
-      <DeleteWorkspaceModal
-        isOpen={isOpen}
-        onClose={() => {
-          setIsOpen(false);
-        }}
-        data={activeWorkspace ?? null}
-        user={user}
-      />
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        {activeWorkspace ? (
-          <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}
-                >
-                  {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
-                    <div className="relative mx-auto flex h-14 w-14">
-                      <img
-                        src={watch("logo")!}
-                        className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
-                        alt="Workspace Logo"
-                      />
-                    </div>
-                  ) : (
-                    <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
-                      {activeWorkspace?.name?.charAt(0) ?? "N"}
-                    </div>
-                  )}
-                </button>
-              </div>
-              <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://", "")
-                }/${activeWorkspace.slug}`}</span>
-                <div className="flex item-center gap-2.5">
-                  <button
-                    className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium"
-                    onClick={() => setIsImageUploadModalOpen(true)}
-                    disabled={!isAdmin}
-                  >
-                    {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
-                      <>
-                        <Pencil className="h-3 w-3" />
-                        Edit logo
-                      </>
-                    ) : (
-                      "Upload logo"
-                    )}
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-8 my-10">
-              <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"
-                    name="name"
-                    placeholder="Name"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.name}
-                    validations={{
-                      required: "Name is required",
-                      maxLength: {
-                        value: 80,
-                        message: "Workspace name should not exceed 80 characters",
-                      },
-                    }}
-                    disabled={!isAdmin}
-                  />
-                </div>
-
-                <div className="flex flex-col gap-1 ">
-                  <h4 className="text-sm">Company Size</h4>
-                  <Controller
-                    name="organization_size"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        value={value}
-                        onChange={onChange}
-                        label={
-                          ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"
-                        }
-                        width="w-full"
-                        input
-                        disabled={!isAdmin}
-                      >
-                        {ORGANIZATION_SIZE?.map((item) => (
-                          <CustomSelect.Option key={item} value={item}>
-                            {item}
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                </div>
-
-                <div className="flex flex-col gap-1 ">
-                  <h4 className="text-sm">Workspace URL</h4>
-                  <Input
-                    id="url"
-                    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
-                  />
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between py-2">
-                <PrimaryButton
-                  onClick={handleSubmit(onSubmit)}
-                  loading={isSubmitting}
-                  disabled={!isAdmin}
-                >
-                  {isSubmitting ? "Updating..." : "Update Workspace"}
-                </PrimaryButton>
-              </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 Workspace</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 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
-                            >
-                              Delete my workspace
-                            </DangerButton>
-                          </div>
-                        </div>
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            )}
-          </div>
-        ) : (
-          <div className="flex items-center justify-center h-full w-full px-4 sm:px-0">
-            <Spinner />
-          </div>
-        )}
-      </div>
-    </WorkspaceAuthorizationLayout>
+    <AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
   );
 };
 
-export default WorkspaceSettings;
+export default WorkspaceSettingsPage;
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 822860d03..c16330e29 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -1,75 +1,56 @@
-import React from "react";
-
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import workspaceService from "services/workspace.service";
-import IntegrationService from "services/integration";
+import { IntegrationService } from "services/integrations";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
 import { SingleIntegrationCard } from "components/integration";
-import { SettingsSidebar } from "components/project";
+import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { IntegrationAndImportExportBanner, Loader } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { IntegrationAndImportExportBanner } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 // fetch-keys
-import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { APP_INTEGRATIONS } from "constants/fetch-keys";
 
-const WorkspaceIntegrations: NextPage = () => {
+// services
+const integrationService = new IntegrationService();
+
+const WorkspaceIntegrationsPage: NextPageWithLayout = () => {
   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: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug ? IntegrationService.getAppIntegrationsList() : null
+    workspaceSlug ? integrationService.getAppIntegrationsList() : null
   );
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Integrations Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <section className="pr-9 py-8 w-full overflow-y-auto">
-          <IntegrationAndImportExportBanner bannerName="Integrations" />
-          <div>
-            {appIntegrations ? (
-              appIntegrations.map((integration) => (
-                <SingleIntegrationCard key={integration.id} integration={integration} />
-              ))
-            ) : (
-              <Loader className="space-y-2.5 mt-4">
-                <Loader.Item height="89px" />
-                <Loader.Item height="89px" />
-              </Loader>
-            )}
-          </div>
-        </section>
+    <section className="pr-9 py-8 w-full overflow-y-auto">
+      <IntegrationAndImportExportBanner bannerName="Integrations" />
+      <div>
+        {appIntegrations ? (
+          appIntegrations.map((integration) => <SingleIntegrationCard key={integration.id} integration={integration} />)
+        ) : (
+          <Loader className="space-y-2.5 mt-4">
+            <Loader.Item height="89px" />
+            <Loader.Item height="89px" />
+          </Loader>
+        )}
       </div>
-    </WorkspaceAuthorizationLayout>
+    </section>
   );
 };
 
-export default WorkspaceIntegrations;
+WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default WorkspaceIntegrationsPage;
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 0f0bc32ae..303c0a9d1 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -1,366 +1,95 @@
-import { useState } from "react";
-
-import Link from "next/link";
+import { useState, ReactElement } from "react";
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
+import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-import useWorkspaceMembers from "hooks/use-workspace-members";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
-import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
-import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
-import { SettingsSidebar } from "components/project";
+import { WorkspaceSettingHeader } from "components/headers";
+import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace";
 // ui
-import { CustomMenu, CustomSelect, Icon, Loader, PrimaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Button } from "@plane/ui";
 // icons
-import { XMarkIcon } from "components/icons";
+import { Search } from "lucide-react";
 // types
-import type { NextPage } from "next";
-// 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";
-
-const MembersSettings: NextPage = () => {
-  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
-  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
-  const [inviteModal, setInviteModal] = useState(false);
+import { NextPageWithLayout } from "types/app";
+import { IWorkspaceBulkInviteFormData } from "types";
 
+const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // store
+  const {
+    workspaceMember: { inviteMembersToWorkspace },
+  } = useMobxStore();
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  // hooks
   const { setToastAlert } = useToast();
 
-  const { user } = useUser();
+  const handleWorkspaceInvite = (data: IWorkspaceBulkInviteFormData) => {
+    if (!workspaceSlug) return;
 
-  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: workspaceMembers, mutate: mutateMembers } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(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
-  );
-
-  const members = [
-    ...(workspaceInvitations?.map((item) => ({
-      id: item.id,
-      memberId: item.id,
-      avatar: "",
-      first_name: item.email,
-      last_name: "",
-      email: item.email,
-      display_name: item.email,
-      role: item.role,
-      status: item.accepted,
-      member: false,
-      accountCreated: item?.accepted ? false : true,
-    })) || []),
-    ...(workspaceMembers?.map((item) => ({
-      id: item.id,
-      memberId: item.member?.id,
-      avatar: item.member?.avatar,
-      first_name: item.member?.first_name,
-      last_name: item.member?.last_name,
-      email: item.member?.email,
-      display_name: item.member?.display_name,
-      role: item.role,
-      status: true,
-      member: true,
-      accountCreated: true,
-    })) || []),
-  ];
-
-  const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id);
-
-  const handleInviteModalSuccess = () => {
-    mutateInvitations();
+    return inviteMembersToWorkspace(workspaceSlug.toString(), data)
+      .then(async () => {
+        setInviteModal(false);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: `${err.error ?? "Something went wrong. Please try again."}`,
+        })
+      );
   };
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Members Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <ConfirmWorkspaceMemberRemove
-        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
-        onClose={() => {
-          setSelectedRemoveMember(null);
-          setSelectedInviteRemoveMember(null);
-        }}
-        data={
-          selectedRemoveMember
-            ? members.find((item) => item.id === selectedRemoveMember)
-            : selectedInviteRemoveMember
-            ? members.find((item) => item.id === selectedInviteRemoveMember)
-            : null
-        }
-        handleDelete={async () => {
-          if (!workspaceSlug) return;
-          if (selectedRemoveMember) {
-            workspaceService
-              .deleteWorkspaceMember(workspaceSlug as string, selectedRemoveMember)
-              .catch((err) => {
-                const error = err?.error;
-                setToastAlert({
-                  type: "error",
-                  title: "Error",
-                  message: error || "Something went wrong",
-                });
-              })
-              .finally(() => {
-                mutateMembers((prevData: any) =>
-                  prevData?.filter((item: any) => item.id !== selectedRemoveMember)
-                );
-              });
-          }
-          if (selectedInviteRemoveMember) {
-            mutateInvitations(
-              (prevData: any) =>
-                prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
-              false
-            );
-            workspaceService
-              .deleteWorkspaceInvitations(workspaceSlug as string, selectedInviteRemoveMember)
-              .then(() => {
-                setToastAlert({
-                  type: "success",
-                  title: "Success",
-                  message: "Member removed successfully",
-                });
-              })
-              .catch((err) => {
-                const error = err?.error;
-                setToastAlert({
-                  type: "error",
-                  title: "Error",
-                  message: error || "Something went wrong",
-                });
-              })
-              .finally(() => {
-                mutateInvitations();
-              });
-          }
-          setSelectedRemoveMember(null);
-          setSelectedInviteRemoveMember(null);
-        }}
-      />
-      <SendWorkspaceInvitationModal
-        isOpen={inviteModal}
-        setIsOpen={setInviteModal}
-        workspace_slug={workspaceSlug as string}
-        user={user}
-        onSuccess={handleInviteModalSuccess}
-      />
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <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>
+    <>
+      {workspaceSlug && (
+        <SendWorkspaceInvitationModal
+          isOpen={inviteModal}
+          onClose={() => setInviteModal(false)}
+          onSubmit={handleWorkspaceInvite}
+        />
+      )}
+      <section className="pr-9 py-8 w-full overflow-y-auto">
+        <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
+          <h4 className="text-xl font-medium">Members</h4>
+          <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+            <Search className="h-3.5 w-3.5" />
+            <input
+              className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              autoFocus={true}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
           </div>
-          {!workspaceMembers || !workspaceInvitations ? (
-            <Loader className="space-y-5">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
-          ) : (
-            <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 className="flex items-center gap-x-8 gap-y-2">
-                        {member.avatar && member.avatar !== "" ? (
-                          <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                            <a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
-                              <img
-                                src={member.avatar}
-                                className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
-                                alt={member.display_name || member.email}
-                              />
-                            </a>
-                          </Link>
-                        ) : member.display_name || member.email ? (
-                          <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                            <a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
-                              {(member.display_name || member.email)?.charAt(0)}
-                            </a>
-                          </Link>
-                        ) : (
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
-                            ?
-                          </div>
-                        )}
-                        <div>
-                          {member.member ? (
-                            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                              <a className="text-sm">
-                                <span>
-                                  {member.first_name} {member.last_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>
-                          )}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-3 text-xs">
-                        {!member?.status && (
-                          <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
-                            <p>Pending</p>
-                          </div>
-                        )}
-                        {member?.status && !member?.accountCreated && (
-                          <div className="mr-2 flex items-center justify-center rounded-full bg-blue-500/20 px-2 py-1 text-center text-xs text-blue-500">
-                            <p>Account not created</p>
-                          </div>
-                        )}
-                        <CustomSelect
-                          customButton={
-                            <button className="flex item-center gap-1">
-                              <span
-                                className={`flex items-center text-sm font-medium ${
-                                  member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
-                                }`}
-                              >
-                                {ROLE[member.role as keyof typeof ROLE]}
-                              </span>
-                              {member.memberId !== user?.id && (
-                                <Icon iconName="expand_more" className="text-lg font-medium" />
-                              )}
-                            </button>
-                          }
-                          value={member.role}
-                          onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
-                            if (!workspaceSlug) return;
+          <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
+            Add Member
+          </Button>
+        </div>
+        <WorkspaceMembersList searchQuery={searchQuery} />
+      </section>
+    </>
+  );
+});
 
-                            mutateMembers(
-                              (prevData: any) =>
-                                prevData?.map((m: any) =>
-                                  m.id === member.id ? { ...m, role: value } : m
-                                ),
-                              false
-                            );
-
-                            workspaceService
-                              .updateWorkspaceMember(workspaceSlug?.toString(), member.id, {
-                                role: value,
-                              })
-                              .catch(() => {
-                                setToastAlert({
-                                  type: "error",
-                                  title: "Error!",
-                                  message:
-                                    "An error occurred while updating member role. Please try again.",
-                                });
-                              });
-                          }}
-                          position="right"
-                          disabled={
-                            member.memberId === currentUser?.member.id ||
-                            !member.status ||
-                            (currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < member.role)
-                          }
-                        >
-                          {Object.keys(ROLE).map((key) => {
-                            if (
-                              currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < parseInt(key)
-                            )
-                              return null;
-
-                            return (
-                              <CustomSelect.Option key={key} value={key}>
-                                <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                              </CustomSelect.Option>
-                            );
-                          })}
-                        </CustomSelect>
-                        <CustomMenu ellipsis>
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (member.member) {
-                                setSelectedRemoveMember(member.id);
-                              } else {
-                                setSelectedInviteRemoveMember(member.id);
-                              }
-                            }}
-                          >
-                            <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>
-                          </CustomMenu.MenuItem>
-                        </CustomMenu>
-                      </div>
-                    </div>
-                  ))
-                : null}
-            </div>
-          )}
-        </section>
-      </div>
-    </WorkspaceAuthorizationLayout>
+WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
   );
 };
 
-export default MembersSettings;
+export default WorkspaceMembersSettingsPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
new file mode 100644
index 000000000..a7ccc4c3b
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@@ -0,0 +1,44 @@
+import { ReactElement } from "react";
+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 { NextPageWithLayout } from "types/app";
+
+const GlobalViewIssuesPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: { fetchGlobalViewDetails },
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && globalViewId ? `GLOBAL_VIEW_DETAILS_${globalViewId.toString()}` : null,
+    workspaceSlug && globalViewId
+      ? () => fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
+      : null
+  );
+
+  return (
+    <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>
+  );
+};
+
+GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
index e41b50a4a..3539beb47 100644
--- a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -1,40 +1,24 @@
+import { ReactElement } from "react";
+// 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 { NextPageWithLayout } from "types/app";
 
-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>
-      </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>
+const GlobalViewAllIssuesPage: NextPageWithLayout = () => (
+  <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>
+  </div>
 );
 
-export default WorkspaceViewAllIssue;
+GlobalViewAllIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewAllIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
index 0edef4d81..7c1f56bb0 100644
--- a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
@@ -1,40 +1,24 @@
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { ReactElement } from "react";
 // 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 { NextPageWithLayout } from "types/app";
 
-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>
-      </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>
+const GlobalViewAssignedIssuesPage: NextPageWithLayout = () => (
+  <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>
+  </div>
 );
 
-export default WorkspaceViewAssignedIssue;
+GlobalViewAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewAssignedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/created.tsx b/web/pages/[workspaceSlug]/workspace-views/created.tsx
index 07ddbbae9..e8a33cf39 100644
--- a/web/pages/[workspaceSlug]/workspace-views/created.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/created.tsx
@@ -1,40 +1,24 @@
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { ReactElement } from "react";
 // 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 { NextPageWithLayout } from "types/app";
 
-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>
-      </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>
+const GlobalViewCreatedIssuesPage: NextPageWithLayout = () => (
+  <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>
+  </div>
 );
 
-export default WorkspaceViewCreatedIssue;
+GlobalViewCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewCreatedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 5e1ef61a8..f42a0815d 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -1,206 +1,45 @@
-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";
+import React, { useState, ReactElement } from "react";
 // 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";
+import { NextPageWithLayout } from "types/app";
 // 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 WorkspaceViewsPage: NextPageWithLayout = () => {
   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 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">
+          <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="true-transparent"
+          />
         </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}
-      />
-      <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" />
-            <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>
-        {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>
-        )}
       </div>
-    </WorkspaceAuthorizationLayout>
+      {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map((option) => (
+        <GlobalDefaultViewListItem key={option.key} view={option} />
+      ))}
+      <GlobalViewsList searchQuery={query} />
+    </div>
   );
 };
 
-export default WorkspaceViews;
+WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="list" />}>{page}</AppLayout>;
+};
+
+export default WorkspaceViewsPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/issues.tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
deleted file mode 100644
index 1f94604c7..000000000
--- a/web/pages/[workspaceSlug]/workspace-views/issues.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// components
-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
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
-
-const WorkspaceView = () => (
-  <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>
-      </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>
-    }
-  >
-    <WorkspaceViewIssues />
-  </WorkspaceAuthorizationLayout>
-);
-
-export default WorkspaceView;
diff --git a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
index 50da24a82..02d980074 100644
--- a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
@@ -1,40 +1,24 @@
+import { ReactElement } from "react";
 // 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 { NextPageWithLayout } from "types/app";
 
-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>
-      </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>
+const GlobalViewSubscribedIssuesPage: NextPageWithLayout = () => (
+  <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>
+  </div>
 );
 
-export default WorkspaceViewSubscribedIssue;
+GlobalViewSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewSubscribedIssuesPage;
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index b94e52d6b..d4dca452a 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -1,25 +1,27 @@
+import { ReactElement } from "react";
 import Head from "next/head";
 import dynamic from "next/dynamic";
 import Router from "next/router";
+import { AppProps } from "next/app";
 import { ThemeProvider } from "next-themes";
 import NProgress from "nprogress";
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
+import "styles/table.css";
 import "styles/command-pallette.css";
 import "styles/nprogress.css";
 import "styles/react-datepicker.css";
 // contexts
 import { ToastContextProvider } from "contexts/toast.context";
-// types
-import type { AppProps } from "next/app";
 // constants
 import { THEMES } from "constants/themes";
-// constants
 import { SITE_TITLE } from "constants/seo-variables";
 // mobx store provider
 import { MobxStoreProvider } from "lib/mobx/store-provider";
 import MobxStoreInit from "lib/mobx/store-init";
+// types
+import { NextPageWithLayout } from "types/app";
 
 const CrispWithNoSSR = dynamic(() => import("constants/crisp"), { ssr: false });
 
@@ -29,7 +31,14 @@ Router.events.on("routeChangeStart", NProgress.start);
 Router.events.on("routeChangeError", NProgress.done);
 Router.events.on("routeChangeComplete", NProgress.done);
 
-function MyApp({ Component, pageProps }: AppProps) {
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page: ReactElement) => page);
+
   return (
     <>
       <Head>
@@ -40,7 +49,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <ToastContextProvider>
             <CrispWithNoSSR />
             <MobxStoreInit />
-            <Component {...pageProps} />
+            {getLayout(<Component {...pageProps} />)}
           </ToastContextProvider>
         </ThemeProvider>
       </MobxStoreProvider>
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 7a84cfd9f..425862839 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -12,9 +12,7 @@ import Script from "next/script";
 
 class MyDocument extends Document {
   render() {
-    const isSessionRecorderEnabled = parseInt(
-      process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0"
-    );
+    const isSessionRecorderEnabled = parseInt(process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0");
 
     return (
       <Html>
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..c18694393
--- /dev/null
+++ b/web/pages/accounts/forgot-password.tsx
@@ -0,0 +1,75 @@
+import { ReactElement } from "react";
+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";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const userService = new UserService();
+
+const ForgotPasswordPage: NextPageWithLayout = () => {
+  // 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 (
+    <>
+      <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>
+    </>
+  );
+};
+
+ForgotPasswordPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default ForgotPasswordPage;
diff --git a/web/pages/accounts/magic-sign-in.tsx b/web/pages/accounts/magic-sign-in.tsx
new file mode 100644
index 000000000..fc698fef1
--- /dev/null
+++ b/web/pages/accounts/magic-sign-in.tsx
@@ -0,0 +1,105 @@
+import { useState, useEffect, ReactElement } from "react";
+import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const authService = new AuthService();
+
+const MagicSignInPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { password, key } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { setTheme } = useTheme();
+
+  const { mutateUser } = useUserAuth("sign-in");
+
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  useEffect(() => {
+    setIsSigningIn(() => false);
+    setErrorSignIn(() => undefined);
+    if (!password || !key) {
+      setErrorSignIn("URL is invalid");
+      return;
+    } else {
+      setIsSigningIn(() => true);
+      authService
+        .magicSignIn({ token: password, key })
+        .then(async () => {
+          setIsSigningIn(false);
+          await mutateUser();
+        })
+        .catch((err) => {
+          setErrorSignIn(err.response.data.error);
+          setIsSigningIn(false);
+        });
+    }
+  }, [password, key, mutateUser, router]);
+
+  return (
+    <div className="h-screen w-full overflow-auto bg-custom-background-90">
+      {isSigningIn ? (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+          <h2 className="text-4xl font-medium">Signing you in...</h2>
+          <p className="text-sm font-medium text-custom-text-200">Please wait while we are preparing your take off.</p>
+        </div>
+      ) : errorSigningIn ? (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+          <h2 className="text-4xl font-medium">Error</h2>
+          <div className="text-sm font-medium text-custom-text-200 flex gap-2">
+            <div>{errorSigningIn}.</div>
+            <span
+              className="cursor-pointer underline"
+              onClick={() => {
+                authService
+                  .emailCode({ email: (key as string).split("_")[1] })
+                  .then(() => {
+                    setToastAlert({
+                      type: "success",
+                      title: "Email sent",
+                      message: "A new link/code has been send to you.",
+                    });
+                  })
+                  .catch(() => {
+                    setToastAlert({
+                      type: "error",
+                      title: "Error",
+                      message: "Unable to send email.",
+                    });
+                  });
+              }}
+            >
+              Send link again?
+            </span>
+          </div>
+        </div>
+      ) : (
+        <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>
+        </div>
+      )}
+    </div>
+  );
+};
+
+MagicSignInPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default MagicSignInPage;
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
new file mode 100644
index 000000000..a817509d1
--- /dev/null
+++ b/web/pages/accounts/reset-password.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect, useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { UserService } from "services/user.service";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Button, Input, Spinner } from "@plane/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// types
+import { NextPageWithLayout } from "types/app";
+
+type FormData = {
+  password: string;
+  confirmPassword: string;
+};
+
+// services
+const userService = new UserService();
+
+const ResetPasswordPage: NextPageWithLayout = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const router = useRouter();
+  const { uidb64, token } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { setTheme } = useTheme();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>();
+
+  const onSubmit = async (formData: FormData) => {
+    if (!uidb64 || !token) return;
+
+    if (formData.password !== formData.confirmPassword) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Passwords do not match.",
+      });
+
+      return;
+    }
+
+    const payload = {
+      new_password: formData.password,
+      confirm_password: formData.confirmPassword,
+    };
+
+    await userService
+      .resetPassword(uidb64.toString(), token.toString(), payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Password reset successfully. You can now login with your new password.",
+        });
+        router.push("/");
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+        })
+      );
+  };
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  useEffect(() => {
+    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
+    else setIsLoading(false);
+  }, [router]);
+
+  if (isLoading)
+    return (
+      <div className="grid place-items-center h-screen w-full">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <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 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>
+          <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="password"
+                rules={{
+                  required: "Password is required",
+                }}
+                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">
+              <Controller
+                control={control}
+                name="confirmPassword"
+                rules={{
+                  required: "Password is required",
+                }}
+                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>
+            <Button variant="primary" type="submit" className="w-full" loading={isSubmitting}>
+              {isSubmitting ? "Resetting..." : "Reset"}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+};
+
+ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default ResetPasswordPage;
diff --git a/web/pages/sign-up.tsx b/web/pages/accounts/sign-up.tsx
similarity index 58%
rename from web/pages/sign-up.tsx
rename to web/pages/accounts/sign-up.tsx
index d2d33032d..dac86c22b 100644
--- a/web/pages/sign-up.tsx
+++ b/web/pages/accounts/sign-up.tsx
@@ -1,28 +1,32 @@
-import React, { useEffect } from "react";
+import React, { useEffect, ReactElement } from "react";
 import Image from "next/image";
 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
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
+
 type EmailPasswordFormValues = {
   email: string;
   password?: string;
   medium?: string;
 };
 
-const SignUp: NextPage = () => {
+// services
+const authService = new AuthService();
+
+const SignUpPage: NextPageWithLayout = () => {
   const router = useRouter();
 
   const { setToastAlert } = useToast();
@@ -37,7 +41,7 @@ const SignUp: NextPage = () => {
       password: formData.password ?? "",
     };
 
-    await authenticationService
+    await authService
       .emailSignUp(payload)
       .then(async (response) => {
         setToastAlert({
@@ -47,15 +51,13 @@ const SignUp: NextPage = () => {
         });
 
         if (response) await mutateUser();
-        router.push("/");
+        router.push("/onboarding");
       })
       .catch((err) =>
         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.",
         })
       );
   };
@@ -65,25 +67,27 @@ const SignUp: NextPage = () => {
   }, [setTheme]);
 
   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 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 w-full overflow-y-auto py-5 px-7">
         <div>
           <h1 className="text-2xl text-center font-">SignUp on Plane</h1>
           <EmailSignUpForm onSubmit={handleSignUp} />
         </div>
       </div>
-    </DefaultLayout>
+    </>
   );
 };
 
-export default SignUp;
+SignUpPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default SignUpPage;
diff --git a/web/pages/api/slack-redirect.ts b/web/pages/api/slack-redirect.ts
deleted file mode 100644
index a6b8dbf4b..000000000
--- a/web/pages/api/slack-redirect.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import axios from "axios";
-import { NextApiRequest, NextApiResponse } from "next";
-
-export default async function handleSlackAuthorize(req: NextApiRequest, res: NextApiResponse) {
-  try {
-    const { code } = req.body;
-
-    if (!code || code === "") return res.status(400).json({ message: "Code is required" });
-
-    const response = await axios({
-      method: "post",
-      url: process.env.SLACK_OAUTH_URL || "",
-      params: {
-        client_id: process.env.SLACK_CLIENT_ID,
-        client_secret: process.env.SLACK_CLIENT_SECRET,
-        code,
-      },
-    });
-    res.status(200).json(response?.data);
-  } catch (error) {
-    res.status(200).json({ message: "Internal Server Error" });
-  }
-}
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
index b6aa41728..7d3a45610 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace.tsx
@@ -1,105 +1,84 @@
-import React, { useState } from "react";
-
+import React, { useState, ReactElement } 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";
-// hooks
-import useUser from "hooks/use-user";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+import { UserAuthWrapper } from "layouts/auth-layout";
 // 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 type { NextPage } from "next";
-// fetch-keys
-import { CURRENT_USER } from "constants/fetch-keys";
+import { IWorkspace } from "types";
+import { NextPageWithLayout } from "types/app";
 
-const CreateWorkspace: NextPage = () => {
+const CreateWorkspacePage: NextPageWithLayout = observer(() => {
+  // router
+  const router = useRouter();
+  // store
+  const {
+    user: { currentUser, updateCurrentUser },
+  } = useMobxStore();
+  // states
   const [defaultValues, setDefaultValues] = useState({
     name: "",
     slug: "",
     organization_size: "",
   });
-
-  const router = useRouter();
-
+  // hooks
   const { theme } = useTheme();
 
-  const { user } = useUser();
-
   const onSubmit = async (workspace: IWorkspace) => {
-    mutate<ICurrentUserResponse>(
-      CURRENT_USER,
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        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,
-          },
-        };
-      },
-      false
-    );
-
-    await userService
-      .updateUser({ last_workspace_id: workspace.id })
-      .then(() => router.push(`/${workspace.slug}`));
+    await updateCurrentUser({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
   };
 
   return (
-    <UserAuthorizationLayout>
-      <DefaultLayout>
-        <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
-          <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-            <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
-            <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12">
-              <div className="h-[30px] w-[133px]">
-                {theme === "light" ? (
-                  <Image src={BlackHorizontalLogo} alt="Plane black logo" />
-                ) : (
-                  <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
-                )}
-              </div>
-            </div>
-            <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
-              {user?.email}
-            </div>
+    <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+      <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+        <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
+        <button
+          className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12"
+          onClick={() => router.push("/")}
+        >
+          <div className="h-[30px] w-[133px]">
+            {theme === "light" ? (
+              <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+            ) : (
+              <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+            )}
           </div>
-          <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
-            <div className="w-full space-y-7 sm:space-y-10">
-              <h4 className="text-2xl font-semibold">Create your workspace</h4>
-              <div className="sm:w-3/4 md:w-2/5">
-                <CreateWorkspaceForm
-                  onSubmit={onSubmit}
-                  defaultValues={defaultValues}
-                  setDefaultValues={setDefaultValues}
-                  user={user}
-                />
-              </div>
-            </div>
+        </button>
+        <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+          {currentUser?.email}
+        </div>
+      </div>
+      <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
+        <div className="w-full space-y-7 sm:space-y-10">
+          <h4 className="text-2xl font-semibold">Create your workspace</h4>
+          <div className="sm:w-3/4 md:w-2/5">
+            <CreateWorkspaceForm
+              onSubmit={onSubmit}
+              defaultValues={defaultValues}
+              setDefaultValues={setDefaultValues}
+            />
           </div>
         </div>
-      </DefaultLayout>
-    </UserAuthorizationLayout>
+      </div>
+    </div>
+  );
+});
+
+CreateWorkspacePage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <UserAuthWrapper>
+      <DefaultLayout>{page} </DefaultLayout>
+    </UserAuthWrapper>
   );
 };
 
-export default CreateWorkspace;
+export default CreateWorkspacePage;
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..c6842a921 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,234 +1,15 @@
-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";
+import { ReactElement } from "react";
 // 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";
+// type
+import { NextPageWithLayout } from "types/app";
 
-const appConfig = new AppConfigService();
+const HomePage: NextPageWithLayout = () => <SignInView />;
 
-// types
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  medium?: string;
+HomePage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
 };
 
-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>
-  );
-});
-
 export default HomePage;
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
index ad5b5a284..243065a7c 100644
--- a/web/pages/installations/[provider]/index.tsx
+++ b/web/pages/installations/[provider]/index.tsx
@@ -1,19 +1,22 @@
-import React, { useEffect } from "react";
-
+import React, { useEffect, ReactElement } from "react";
 import { useRouter } from "next/router";
+// services
+import { AppInstallationService } from "services/app_installation.service";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "types/app";
 
 // services
-import appInstallationsService from "services/app-installations.service";
-// ui
-import { Spinner } from "components/ui";
+const appInstallationService = new AppInstallationService();
 
-const AppPostInstallation = () => {
+const AppPostInstallation: NextPageWithLayout = () => {
   const router = useRouter();
-  const { installation_id, setup_action, state, provider, code } = router.query;
+  const { installation_id, state, provider, code } = router.query;
 
   useEffect(() => {
     if (provider === "github" && state && installation_id) {
-      appInstallationsService
+      appInstallationService
         .addInstallationApp(state.toString(), provider, { installation_id })
         .then(() => {
           window.opener = null;
@@ -24,53 +27,37 @@ const AppPostInstallation = () => {
           console.log(err);
         });
     } else if (provider === "slack" && state && code) {
-      appInstallationsService
-        .getSlackAuthDetails(code.toString())
-        .then((res) => {
-          const [workspaceSlug, projectId, integrationId] = state.toString().split(",");
+      const [workspaceSlug, projectId, integrationId] = state.toString().split(",");
 
-          if (!projectId) {
-            const payload = {
-              metadata: {
-                ...res,
-              },
-            };
-
-            appInstallationsService
-              .addInstallationApp(state.toString(), provider, payload)
-              .then((r) => {
-                window.opener = null;
-                window.open("", "_self");
-                window.close();
-              })
-              .catch((err) => {
-                throw err?.response;
-              });
-          } else {
-            const payload = {
-              access_token: res.access_token,
-              bot_user_id: res.bot_user_id,
-              webhook_url: res.incoming_webhook.url,
-              data: res,
-              team_id: res.team.id,
-              team_name: res.team.name,
-              scopes: res.scope,
-            };
-            appInstallationsService
-              .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
-              .then((r) => {
-                window.opener = null;
-                window.open("", "_self");
-                window.close();
-              })
-              .catch((err) => {
-                throw err.response;
-              });
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      if (!projectId) {
+        const payload = {
+          code,
+        };
+        appInstallationService
+          .addInstallationApp(state.toString(), provider, payload)
+          .then(() => {
+            window.opener = null;
+            window.open("", "_self");
+            window.close();
+          })
+          .catch((err) => {
+            throw err?.response;
+          });
+      } else {
+        const payload = {
+          code,
+        };
+        appInstallationService
+          .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
+          .then(() => {
+            window.opener = null;
+            window.open("", "_self");
+            window.close();
+          })
+          .catch((err) => {
+            throw err.response;
+          });
+      }
     }
   }, [state, installation_id, provider, code]);
 
@@ -82,4 +69,8 @@ const AppPostInstallation = () => {
   );
 };
 
+AppPostInstallation.getLayout = function getLayout(page: ReactElement) {
+  return <div>{page}</div>;
+};
+
 export default AppPostInstallation;
diff --git a/web/pages/invitations.tsx b/web/pages/invitations.tsx
deleted file mode 100644
index 8e823b450..000000000
--- a/web/pages/invitations.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-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";
-// 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";
-// ui
-import { SecondaryButton, PrimaryButton, EmptyState } from "components/ui";
-// icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
-// 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";
-import emptyInvitation from "public/empty-state/invitation.svg";
-// helpers
-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";
-
-const OnBoard: NextPage = () => {
-  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
-  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
-
-  const router = useRouter();
-
-  const { theme } = useTheme();
-
-  const { user } = useUser();
-
-  const { setToastAlert } = useToast();
-
-  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
-    workspaceService.userWorkspaceInvitations()
-  );
-
-  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)
-      );
-    }
-  };
-
-  const submitInvitations = () => {
-    if (invitationsRespond.length === 0) {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Please select at least one invitation.",
-      });
-      return;
-    }
-
-    setIsJoiningWorkspaces(true);
-
-    workspaceService
-      .joinWorkspaces({ invitations: invitationsRespond })
-      .then(() => {
-        mutate("USER_WORKSPACES");
-        const firstInviteId = invitationsRespond[0];
-        const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
-        userService
-          .updateUser({ last_workspace_id: redirectWorkspace?.id })
-          .then(() => {
-            setIsJoiningWorkspaces(false);
-            router.push(`/${redirectWorkspace?.slug}`);
-          })
-          .catch(() => {
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "Something went wrong, Please try again.",
-            });
-            setIsJoiningWorkspaces(false);
-          });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Something went wrong, Please try again.",
-        });
-        setIsJoiningWorkspaces(false);
-      });
-  };
-
-  return (
-    <UserAuthorizationLayout>
-      <DefaultLayout>
-        <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
-          <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-            <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
-            <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12">
-              <div className="h-[30px] w-[133px]">
-                {theme === "light" ? (
-                  <Image src={BlackHorizontalLogo} alt="Plane black logo" />
-                ) : (
-                  <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
-                )}
-              </div>
-            </div>
-            <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
-              {user?.email}
-            </div>
-          </div>
-          {invitations ? (
-            invitations.length > 0 ? (
-              <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
-                <div className="w-full space-y-10">
-                  <h5 className="text-lg">We see that someone has invited you to</h5>
-                  <h4 className="text-2xl font-semibold">Join a workspace</h4>
-                  <div className="max-h-[37vh] md:w-3/5 space-y-4 overflow-y-auto">
-                    {invitations.map((invitation) => {
-                      const isSelected = invitationsRespond.includes(invitation.id);
-
-                      return (
-                        <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"
-                          }`}
-                          onClick={() =>
-                            handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
-                          }
-                        >
-                          <div className="flex-shrink-0">
-                            <div className="grid place-items-center h-9 w-9 rounded">
-                              {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
-                                <img
-                                  src={invitation.workspace.logo}
-                                  height="100%"
-                                  width="100%"
-                                  className="rounded"
-                                  alt={invitation.workspace.name}
-                                />
-                              ) : (
-                                <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
-                                  {invitation.workspace.name[0]}
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                          <div className="min-w-0 flex-1">
-                            <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"
-                            }`}
-                          >
-                            <CheckCircleIcon className="h-5 w-5" />
-                          </span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <PrimaryButton
-                      type="submit"
-                      size="md"
-                      onClick={submitInvitations}
-                      disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
-                      loading={isJoiningWorkspaces}
-                    >
-                      Accept & Join
-                    </PrimaryButton>
-                    <Link href="/">
-                      <a>
-                        <SecondaryButton size="md" outline>
-                          Go Home
-                        </SecondaryButton>
-                      </a>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
-                <EmptyState
-                  title="No pending invites"
-                  description="You can see here if someone invites you to a workspace."
-                  image={emptyInvitation}
-                  primaryButton={{
-                    text: "Back to Dashboard",
-                    onClick: () => router.push("/"),
-                  }}
-                />
-              </div>
-            )
-          ) : null}
-        </div>
-      </DefaultLayout>
-    </UserAuthorizationLayout>
-  );
-};
-
-export default OnBoard;
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
new file mode 100644
index 000000000..d950b13db
--- /dev/null
+++ b/web/pages/invitations/index.tsx
@@ -0,0 +1,219 @@
+import React, { useState, ReactElement } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { useTheme } from "next-themes";
+// services
+import { WorkspaceService } from "services/workspace.service";
+import { UserService } from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthWrapper } from "layouts/auth-layout";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { CheckCircle2 } from "lucide-react";
+// 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";
+import emptyInvitation from "public/empty-state/invitation.svg";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { NextPageWithLayout } from "types/app";
+import type { IWorkspaceMemberInvitation } from "types";
+// constants
+import { ROLE } from "constants/workspace";
+// components
+import { EmptyState } from "components/common";
+
+// services
+const workspaceService = new WorkspaceService();
+const userService = new UserService();
+
+const UserInvitationsPage: NextPageWithLayout = () => {
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+
+  const router = useRouter();
+
+  const { theme } = useTheme();
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: invitations } = useSWR<IWorkspaceMemberInvitation[]>("USER_WORKSPACE_INVITATIONS", () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  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));
+    }
+  };
+
+  const submitInvitations = () => {
+    if (invitationsRespond.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one invitation.",
+      });
+      return;
+    }
+
+    setIsJoiningWorkspaces(true);
+
+    workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(() => {
+        mutate("USER_WORKSPACES");
+        const firstInviteId = invitationsRespond[0];
+        const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
+        userService
+          .updateUser({ last_workspace_id: redirectWorkspace?.id })
+          .then(() => {
+            setIsJoiningWorkspaces(false);
+            router.push(`/${redirectWorkspace?.slug}`);
+          })
+          .catch(() => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "Something went wrong, Please try again.",
+            });
+            setIsJoiningWorkspaces(false);
+          });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong, Please try again.",
+        });
+        setIsJoiningWorkspaces(false);
+      });
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+      <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+        <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
+        <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12">
+          <div className="h-[30px] w-[133px]">
+            {theme === "light" ? (
+              <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+            ) : (
+              <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+            )}
+          </div>
+        </div>
+        <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+          {user?.email}
+        </div>
+      </div>
+      {invitations ? (
+        invitations.length > 0 ? (
+          <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
+            <div className="w-full space-y-10">
+              <h5 className="text-lg">We see that someone has invited you to</h5>
+              <h4 className="text-2xl font-semibold">Join a workspace</h4>
+              <div className="max-h-[37vh] md:w-3/5 space-y-4 overflow-y-auto">
+                {invitations.map((invitation) => {
+                  const isSelected = invitationsRespond.includes(invitation.id);
+
+                  return (
+                    <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"
+                      }`}
+                      onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+                    >
+                      <div className="flex-shrink-0">
+                        <div className="grid place-items-center h-9 w-9 rounded">
+                          {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                            <img
+                              src={invitation.workspace.logo}
+                              height="100%"
+                              width="100%"
+                              className="rounded"
+                              alt={invitation.workspace.name}
+                            />
+                          ) : (
+                            <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
+                              {invitation.workspace.name[0]}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <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"}`}
+                      >
+                        <CheckCircle2 className="h-5 w-5" />
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="primary"
+                  type="submit"
+                  size="md"
+                  onClick={submitInvitations}
+                  disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
+                  loading={isJoiningWorkspaces}
+                >
+                  Accept & Join
+                </Button>
+                <Link href="/">
+                  <a>
+                    <Button variant="neutral-primary" size="md">
+                      Go Home
+                    </Button>
+                  </a>
+                </Link>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
+            <EmptyState
+              title="No pending invites"
+              description="You can see here if someone invites you to a workspace."
+              image={emptyInvitation}
+              primaryButton={{
+                text: "Back to Dashboard",
+                onClick: () => router.push("/"),
+              }}
+            />
+          </div>
+        )
+      ) : null}
+    </div>
+  );
+};
+
+UserInvitationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <UserAuthWrapper>
+      <DefaultLayout>{page}</DefaultLayout>
+    </UserAuthWrapper>
+  );
+};
+
+export default UserInvitationsPage;
diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx
deleted file mode 100644
index 2bfac63b8..000000000
--- a/web/pages/m/[workspaceSlug]/editor.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react";
-
-// next
-import type { NextPage } from "next";
-import { useRouter } from "next/router";
-
-// cookies
-import Cookies from "js-cookie";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-
-// layouts
-import WebViewLayout from "layouts/web-view-layout";
-
-// components
-import { TipTapEditor } from "components/tiptap";
-import { PrimaryButton, Spinner } from "components/ui";
-
-const Editor: NextPage = () => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, editable } = router.query;
-
-  const isEditable = editable === "true";
-
-  const { watch, setValue, control } = useForm({
-    defaultValues: {
-      data: "",
-      data_html: "",
-    },
-  });
-
-  useEffect(() => {
-    setIsLoading(true);
-    if (!router?.query?.["editable"]) return;
-    setIsLoading(false);
-    const data_html = Cookies.get("data_html");
-    setValue("data_html", data_html ?? "");
-  }, [isEditable, setValue, router]);
-
-  return (
-    <WebViewLayout fullScreen={isLoading}>
-      {isLoading ? (
-        <div className="w-full h-full flex items-center justify-center">
-          <Spinner />
-        </div>
-      ) : (
-        <>
-          <Controller
-            name="data_html"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <TipTapEditor
-                borderOnFocus={false}
-                value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("data_html")
-                    : value
-                }
-                editable={isEditable}
-                noBorder={true}
-                workspaceSlug={workspaceSlug?.toString() ?? ""}
-                debouncedUpdatesEnabled={true}
-                customClassName="min-h-[150px] shadow-sm"
-                editorContentCustomClassNames="pb-9"
-                onChange={(description: Object, description_html: string) => {
-                  onChange(description_html);
-                  setValue("data_html", description_html);
-                  setValue("data", JSON.stringify(description));
-                }}
-              />
-            )}
-          />
-          {isEditable && (
-            <PrimaryButton
-              className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px]"
-              onClick={() => {
-                console.log(
-                  "submitted",
-                  JSON.stringify({
-                    data_html: watch("data_html"),
-                  })
-                );
-              }}
-            >
-              Submit
-            </PrimaryButton>
-          )}
-        </>
-      )}
-    </WebViewLayout>
-  );
-};
-
-export default Editor;
diff --git a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
deleted file mode 100644
index 6ac0eda76..000000000
--- a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-// react
-import React, { useCallback, useEffect } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// swr
-import useSWR, { mutate } from "swr";
-
-// react hook forms
-import { useForm } from "react-hook-form";
-
-// services
-import issuesService from "services/issues.service";
-
-// 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 "components/ui";
-
-// components
-import {
-  IssueWebViewForm,
-  SubIssueList,
-  IssueAttachments,
-  IssuePropertiesDetail,
-  IssueLinks,
-  IssueActivity,
-} from "components/web-view";
-
-// types
-import type { IIssue } from "types";
-
-const MobileWebViewIssueDetail = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const memberRole = useProjectMembers(
-    workspaceSlug as string,
-    projectId as string,
-    !!workspaceSlug && !!projectId
-  );
-
-  const isAllowed = Boolean(memberRole.isMember || memberRole.isOwner);
-
-  const { user } = useUser();
-
-  const { register, control, reset, handleSubmit, watch } = useForm<IIssue>({
-    defaultValues: {
-      name: "",
-      description: "",
-      description_html: "",
-      state: "",
-    },
-  });
-
-  const {
-    data: issueDetails,
-    mutate: mutateIssueDetails,
-    error,
-  } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
-      : null
-  );
-
-  useEffect(() => {
-    if (!issueDetails) return;
-    reset({
-      ...issueDetails,
-      name: issueDetails.name,
-      description: issueDetails.description,
-      description_html: issueDetails.description_html,
-      state: issueDetails.state,
-      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,
-    });
-  }, [issueDetails, reset]);
-
-  const submitChanges = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId.toString()),
-        (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      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)
-        .then(() => {
-          mutateIssueDetails();
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
-  );
-
-  if (!error && !issueDetails)
-    return (
-      <WebViewLayout>
-        <div className="px-4 py-2 h-full">
-          <div className="h-full flex justify-center items-center">
-            <Spinner />
-            Loading...
-          </div>
-        </div>
-      </WebViewLayout>
-    );
-
-  if (error)
-    return (
-      <WebViewLayout>
-        <div className="px-4 py-2">{error?.response?.data || "Something went wrong"}</div>
-      </WebViewLayout>
-    );
-
-  return (
-    <WebViewLayout>
-      <div className="px-6 py-2 h-full overflow-auto space-y-3">
-        <IssueWebViewForm
-          isAllowed={isAllowed}
-          issueDetails={issueDetails!}
-          submitChanges={submitChanges}
-          register={register}
-          control={control}
-          watch={watch}
-          handleSubmit={handleSubmit}
-        />
-
-        <SubIssueList issueDetails={issueDetails!} />
-
-        <IssuePropertiesDetail control={control} submitChanges={submitChanges} />
-
-        <IssueAttachments allowed={isAllowed} />
-
-        <IssueLinks allowed={isAllowed} issueDetails={issueDetails!} />
-
-        <IssueActivity allowed={isAllowed} issueDetails={issueDetails!} />
-      </div>
-    </WebViewLayout>
-  );
-};
-
-export default MobileWebViewIssueDetail;
diff --git a/web/pages/magic-sign-in.tsx b/web/pages/magic-sign-in.tsx
deleted file mode 100644
index 7de298d39..000000000
--- a/web/pages/magic-sign-in.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-// next-themes
-import { useTheme } from "next-themes";
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// services
-import authenticationService from "services/authentication.service";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
-// types
-import type { NextPage } from "next";
-
-const MagicSignIn: NextPage = () => {
-  const router = useRouter();
-  const { password, key } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { setTheme } = useTheme();
-
-  const { mutateUser } = useUserAuth("sign-in");
-
-  const [isSigningIn, setIsSigningIn] = useState(false);
-  const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
-
-  useEffect(() => {
-    setTheme("system");
-  }, [setTheme]);
-
-  useEffect(() => {
-    setIsSigningIn(() => false);
-    setErrorSignIn(() => undefined);
-    if (!password || !key) {
-      setErrorSignIn("URL is invalid");
-      return;
-    } else {
-      setIsSigningIn(() => true);
-      authenticationService
-        .magicSignIn({ token: password, key })
-        .then(async (res) => {
-          setIsSigningIn(false);
-          await mutateUser();
-        })
-        .catch((err) => {
-          setErrorSignIn(err.response.data.error);
-          setIsSigningIn(false);
-        });
-    }
-  }, [password, key, mutateUser, router]);
-
-  return (
-    <DefaultLayout>
-      <div className="h-screen w-full overflow-auto bg-custom-background-90">
-        {isSigningIn ? (
-          <div className="flex h-full w-full flex-col items-center justify-center gap-3">
-            <h2 className="text-4xl font-medium">Signing you in...</h2>
-            <p className="text-sm font-medium text-custom-text-200">
-              Please wait while we are preparing your take off.
-            </p>
-          </div>
-        ) : errorSigningIn ? (
-          <div className="flex h-full w-full flex-col items-center justify-center gap-3">
-            <h2 className="text-4xl font-medium">Error</h2>
-            <div className="text-sm font-medium text-custom-text-200 flex gap-2">
-              <div>{errorSigningIn}.</div>
-              <span
-                className="cursor-pointer underline"
-                onClick={() => {
-                  authenticationService
-                    .emailCode({ email: (key as string).split("_")[1] })
-                    .then(() => {
-                      setToastAlert({
-                        type: "success",
-                        title: "Email sent",
-                        message: "A new link/code has been send to you.",
-                      });
-                    })
-                    .catch(() => {
-                      setToastAlert({
-                        type: "error",
-                        title: "Error",
-                        message: "Unable to send email.",
-                      });
-                    });
-                }}
-              >
-                Send link again?
-              </span>
-            </div>
-          </div>
-        ) : (
-          <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>
-          </div>
-        )}
-      </div>
-    </DefaultLayout>
-  );
-};
-
-export default MagicSignIn;
diff --git a/web/pages/onboarding.tsx b/web/pages/onboarding.tsx
deleted file mode 100644
index 51148b19e..000000000
--- a/web/pages/onboarding.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import { useEffect, useState } from "react";
-
-import Image from "next/image";
-
-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";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useWorkspaces from "hooks/use-workspaces";
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// components
-import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
-// ui
-import { Spinner } from "components/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 type { NextPage } from "next";
-// fetch-keys
-import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
-
-const Onboarding: NextPage = () => {
-  const [step, setStep] = useState<number | null>(null);
-
-  const { theme, setTheme } = useTheme();
-
-  const { user, isLoading: userLoading } = useUserAuth("onboarding");
-
-  const { workspaces } = useWorkspaces();
-  const userWorkspaces = workspaces?.filter((w) => w.created_by === user?.id);
-
-  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
-    workspaceService.userWorkspaceInvitations()
-  );
-
-  // update last active workspace details
-  const updateLastWorkspace = async () => {
-    if (!workspaces) return;
-
-    await mutate<ICurrentUserResponse>(
-      CURRENT_USER,
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        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,
-          },
-        };
-      },
-      false
-    );
-
-    await userService.updateUser({ last_workspace_id: workspaces?.[0]?.id });
-  };
-
-  // handle step change
-  const stepChange = async (steps: Partial<TOnboardingSteps>) => {
-    if (!user) return;
-
-    const payload: Partial<IUser> = {
-      onboarding_step: {
-        ...user.onboarding_step,
-        ...steps,
-      },
-    };
-
-    mutate<ICurrentUserResponse>(
-      CURRENT_USER,
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          ...payload,
-        };
-      },
-      false
-    );
-
-    await userService.updateUser(payload);
-  };
-
-  // complete onboarding
-  const finishOnboarding = async () => {
-    if (!user) return;
-
-    mutate<ICurrentUserResponse>(
-      CURRENT_USER,
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          is_onboarded: true,
-        };
-      },
-      false
-    );
-
-    await userService.updateUserOnBoard({ userRole: user.role }, user);
-  };
-
-  useEffect(() => {
-    setTheme("system");
-  }, [setTheme]);
-
-  useEffect(() => {
-    const handleStepChange = async () => {
-      if (!user || !invitations) return;
-
-      const onboardingStep = user.onboarding_step;
-
-      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
-        )
-          setStep(2);
-      }
-
-      if (
-        onboardingStep.profile_complete &&
-        onboardingStep.workspace_create &&
-        !onboardingStep.workspace_invite &&
-        step !== 3
-      )
-        setStep(3);
-    };
-
-    handleStepChange();
-  }, [user, invitations, step]);
-
-  if (userLoading || step === null)
-    return (
-      <div className="grid h-screen place-items-center">
-        <Spinner />
-      </div>
-    );
-
-  return (
-    <DefaultLayout>
-      <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
-        <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
-          {step === 1 ? (
-            <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
-              <div className="h-[30px] w-[30px]">
-                <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
-              </div>
-            </div>
-          ) : (
-            <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
-              <div className="h-[30px] w-[133px]">
-                {theme === "light" ? (
-                  <Image src={BlackHorizontalLogo} alt="Plane black logo" />
-                ) : (
-                  <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
-                )}
-              </div>
-            </div>
-          )}
-          <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
-            {user?.email}
-          </div>
-        </div>
-        <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
-          {step === 1 ? (
-            <UserDetails user={user} />
-          ) : step === 2 ? (
-            <Workspace
-              finishOnboarding={finishOnboarding}
-              stepChange={stepChange}
-              updateLastWorkspace={updateLastWorkspace}
-              user={user}
-              workspaces={workspaces}
-            />
-          ) : step === 3 ? (
-            <InviteMembers
-              finishOnboarding={finishOnboarding}
-              stepChange={stepChange}
-              user={user}
-              workspace={userWorkspaces?.[0]}
-            />
-          ) : (
-            step === 4 && (
-              <JoinWorkspaces
-                finishOnboarding={finishOnboarding}
-                stepChange={stepChange}
-                updateLastWorkspace={updateLastWorkspace}
-              />
-            )
-          )}
-        </div>
-        {step !== 4 && (
-          <div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
-            <div className="w-3/4 md:w-1/5 space-y-1">
-              <p className="text-xs text-custom-text-200">{step} of 3 steps</p>
-              <div className="relative h-1 w-full rounded bg-custom-background-80">
-                <div
-                  className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
-                  style={{
-                    width: `${((step / 3) * 100).toFixed(0)}%`,
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </DefaultLayout>
-  );
-};
-
-export default Onboarding;
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
new file mode 100644
index 000000000..cd64290c7
--- /dev/null
+++ b/web/pages/onboarding/index.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState, ReactElement } from "react";
+import Image from "next/image";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useTheme } from "next-themes";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthWrapper } from "layouts/auth-layout";
+// components
+import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
+// 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 { IUser, TOnboardingSteps } from "types";
+import { NextPageWithLayout } from "types/app";
+
+// services
+const workspaceService = new WorkspaceService();
+
+const OnboardingPage: NextPageWithLayout = observer(() => {
+  const [step, setStep] = useState<number | null>(null);
+
+  const {
+    user: { currentUser, updateCurrentUser, updateUserOnBoard },
+    workspace: workspaceStore,
+  } = useMobxStore();
+
+  const user = currentUser ?? undefined;
+  const workspaces = workspaceStore.workspaces;
+  const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
+
+  const { theme, setTheme } = useTheme();
+
+  const {} = useUserAuth("onboarding");
+
+  const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  // update last active workspace details
+  const updateLastWorkspace = async () => {
+    if (!workspaces) return;
+
+    await updateCurrentUser({
+      last_workspace_id: workspaces[0]?.id,
+    });
+  };
+
+  // handle step change
+  const stepChange = async (steps: Partial<TOnboardingSteps>) => {
+    if (!user) return;
+
+    const payload: Partial<IUser> = {
+      onboarding_step: {
+        ...user.onboarding_step,
+        ...steps,
+      },
+    };
+
+    await updateCurrentUser(payload);
+  };
+
+  // complete onboarding
+  const finishOnboarding = async () => {
+    if (!user) return;
+
+    await updateUserOnBoard();
+  };
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  useEffect(() => {
+    const handleStepChange = async () => {
+      if (!user || !invitations) return;
+
+      const onboardingStep = user.onboarding_step;
+
+      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)
+          setStep(2);
+      }
+
+      if (
+        onboardingStep.profile_complete &&
+        onboardingStep.workspace_create &&
+        !onboardingStep.workspace_invite &&
+        step !== 3
+      )
+        setStep(3);
+    };
+
+    handleStepChange();
+  }, [user, invitations, step]);
+
+  return (
+    <>
+      {user && step !== null ? (
+        <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+          <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+            <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
+            {step === 1 ? (
+              <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+                <div className="h-[30px] w-[30px]">
+                  <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
+                </div>
+              </div>
+            ) : (
+              <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+                <div className="h-[30px] w-[133px]">
+                  {theme === "light" ? (
+                    <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+                  ) : (
+                    <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+                  )}
+                </div>
+              </div>
+            )}
+            <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+              {user?.email}
+            </div>
+          </div>
+          <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
+            {step === 1 ? (
+              <UserDetails user={user} />
+            ) : step === 2 ? (
+              <Workspace
+                finishOnboarding={finishOnboarding}
+                stepChange={stepChange}
+                updateLastWorkspace={updateLastWorkspace}
+                user={user}
+                workspaces={workspaces}
+              />
+            ) : step === 3 ? (
+              <InviteMembers
+                finishOnboarding={finishOnboarding}
+                stepChange={stepChange}
+                user={user}
+                workspace={userWorkspaces?.[0]}
+              />
+            ) : (
+              step === 4 && (
+                <JoinWorkspaces
+                  finishOnboarding={finishOnboarding}
+                  stepChange={stepChange}
+                  updateLastWorkspace={updateLastWorkspace}
+                />
+              )
+            )}
+          </div>
+          {step !== 4 && (
+            <div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
+              <div className="w-3/4 md:w-1/5 space-y-1">
+                <p className="text-xs text-custom-text-200">{step} of 3 steps</p>
+                <div className="relative h-1 w-full rounded bg-custom-background-80">
+                  <div
+                    className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
+                    style={{
+                      width: `${((step / 3) * 100).toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="h-screen w-full grid place-items-center">
+          <Spinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+OnboardingPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <UserAuthWrapper>
+      <DefaultLayout>{page}</DefaultLayout>
+    </UserAuthWrapper>
+  );
+};
+
+export default OnboardingPage;
diff --git a/web/pages/reset-password.tsx b/web/pages/reset-password.tsx
deleted file mode 100644
index fa17d2333..000000000
--- a/web/pages/reset-password.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-import Image from "next/image";
-
-// next-themes
-import { useTheme } from "next-themes";
-// react-hook-form
-import { useForm } from "react-hook-form";
-// hooks
-import useToast from "hooks/use-toast";
-// services
-import userService from "services/user.service";
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// ui
-import { Input, PrimaryButton, Spinner } from "components/ui";
-// images
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-// types
-import type { NextPage } from "next";
-
-type FormData = {
-  password: string;
-  confirmPassword: string;
-};
-
-const ResetPasswordPage: NextPage = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  const router = useRouter();
-  const { uidb64, token } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { setTheme } = useTheme();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<FormData>();
-
-  const onSubmit = async (formData: FormData) => {
-    if (!uidb64 || !token) return;
-
-    if (formData.password !== formData.confirmPassword) {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Passwords do not match.",
-      });
-
-      return;
-    }
-
-    const payload = {
-      new_password: formData.password,
-      confirm_password: formData.confirmPassword,
-    };
-
-    await userService
-      .resetPassword(uidb64.toString(), token.toString(), payload)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Password reset successfully. You can now login with your new password.",
-        });
-        router.push("/");
-      })
-      .catch((err) =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message:
-            err?.error ||
-            "Something went wrong. Please try again later or contact the support team.",
-        })
-      );
-  };
-
-  useEffect(() => {
-    setTheme("system");
-  }, [setTheme]);
-
-  useEffect(() => {
-    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
-    else setIsLoading(false);
-  }, [router]);
-
-  if (isLoading)
-    return (
-      <div className="grid place-items-center h-screen w-full">
-        <Spinner />
-      </div>
-    );
-
-  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 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>
-
-          <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"
-                name="password"
-                register={register}
-                validations={{
-                  required: "Password is required",
-                }}
-                error={errors.password}
-                placeholder="Enter new password..."
-                className="border-custom-border-300 h-[46px]"
-              />
-            </div>
-            <div className="space-y-1">
-              <Input
-                id="confirmPassword"
-                type="password"
-                name="confirmPassword"
-                register={register}
-                validations={{
-                  required: "Password confirmation is required",
-                }}
-                error={errors.confirmPassword}
-                placeholder="Confirm new password..."
-                className="border-custom-border-300 h-[46px]"
-              />
-            </div>
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center h-[46px]"
-              loading={isSubmitting}
-            >
-              {isSubmitting ? "Resetting..." : "Reset"}
-            </PrimaryButton>
-          </form>
-        </div>
-      </div>
-    </DefaultLayout>
-  );
-};
-
-export default ResetPasswordPage;
diff --git a/web/pages/workspace-invitations/index.tsx b/web/pages/workspace-invitations/index.tsx
new file mode 100644
index 000000000..c2d3bd9e2
--- /dev/null
+++ b/web/pages/workspace-invitations/index.tsx
@@ -0,0 +1,146 @@
+import React, { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// swr
+import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useUser from "hooks/use-user";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Spinner } from "@plane/ui";
+// icons
+import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
+// types
+import { NextPageWithLayout } from "types/app";
+// constants
+import { WORKSPACE_INVITATION } from "constants/fetch-keys";
+
+// services
+const workspaceService = new WorkspaceService();
+
+const WorkspaceInvitationPage: NextPageWithLayout = () => {
+  const router = useRouter();
+
+  const { invitation_id, email } = router.query;
+
+  const { user } = useUser();
+
+  const { data: invitationDetail, error } = useSWR(
+    invitation_id && WORKSPACE_INVITATION(invitation_id.toString()),
+    () => (invitation_id ? workspaceService.getWorkspaceInvitation(invitation_id as string) : null)
+  );
+
+  const handleAccept = () => {
+    if (!invitationDetail) return;
+    workspaceService
+      .joinWorkspace(
+        invitationDetail.workspace.slug,
+        invitationDetail.id,
+        {
+          accepted: true,
+          email: invitationDetail.email,
+        },
+        user
+      )
+      .then(() => {
+        if (email === user?.email) {
+          router.push("/invitations");
+        } else {
+          router.push("/");
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center px-3">
+      {invitationDetail ? (
+        <>
+          {error ? (
+            <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
+              <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
+            </div>
+          ) : (
+            <>
+              {invitationDetail.accepted ? (
+                <>
+                  <EmptySpace
+                    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={Boxes} title="Continue to Dashboard" action={() => router.push("/")} />
+                  </EmptySpace>
+                </>
+              ) : (
+                <EmptySpace
+                  title={`You have been invited to ${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={Check} title="Accept" action={handleAccept} />
+                  <EmptySpaceItem
+                    Icon={X}
+                    title="Ignore"
+                    action={() => {
+                      router.push("/");
+                    }}
+                  />
+                </EmptySpace>
+              )}
+            </>
+          )}
+        </>
+      ) : error ? (
+        <EmptySpace
+          title="This invitation link is not active anymore."
+          description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+          link={{ text: "Or start from an empty project", href: "/" }}
+        >
+          {!user ? (
+            <EmptySpaceItem
+              Icon={User2}
+              title="Sign in to continue"
+              action={() => {
+                router.push("/");
+              }}
+            />
+          ) : (
+            <EmptySpaceItem
+              Icon={Boxes}
+              title="Continue to Dashboard"
+              action={() => {
+                router.push("/");
+              }}
+            />
+          )}
+          <EmptySpaceItem
+            Icon={Star}
+            title="Star us on GitHub"
+            action={() => {
+              router.push("https://github.com/makeplane");
+            }}
+          />
+          <EmptySpaceItem
+            Icon={Share2}
+            title="Join our community of active creators"
+            action={() => {
+              router.push("https://discord.com/invite/8SR2N9PAcJ");
+            }}
+          />
+        </EmptySpace>
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </div>
+  );
+};
+
+WorkspaceInvitationPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default WorkspaceInvitationPage;
diff --git a/web/pages/workspace-member-invitation.tsx b/web/pages/workspace-member-invitation.tsx
deleted file mode 100644
index e351310a4..000000000
--- a/web/pages/workspace-member-invitation.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-// next
-
-import { useRouter } from "next/router";
-import useSWR from "swr";
-import {
-  CheckIcon,
-  CubeIcon,
-  ShareIcon,
-  StarIcon,
-  UserIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
-// swr
-// services
-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";
-// icons
-import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
-// types
-import type { NextPage } from "next";
-// constants
-import { WORKSPACE_INVITATION } from "constants/fetch-keys";
-
-const WorkspaceInvitation: NextPage = () => {
-  const router = useRouter();
-
-  const { invitation_id, email } = router.query;
-
-  const { user } = useUser();
-
-  const { data: invitationDetail, error } = useSWR(invitation_id && WORKSPACE_INVITATION, () =>
-    invitation_id ? workspaceService.getWorkspaceInvitation(invitation_id as string) : null
-  );
-
-  const handleAccept = () => {
-    if (!invitationDetail) return;
-    workspaceService
-      .joinWorkspace(
-        invitationDetail.workspace.slug,
-        invitationDetail.id,
-        {
-          accepted: true,
-          email: invitationDetail.email,
-        },
-        user
-      )
-      .then(() => {
-        if (email === user?.email) {
-          router.push("/invitations");
-        } else {
-          router.push("/");
-        }
-      })
-      .catch((err) => console.error(err));
-  };
-
-  return (
-    <DefaultLayout>
-      <div className="flex h-full w-full flex-col items-center justify-center px-3">
-        {invitationDetail ? (
-          <>
-            {error ? (
-              <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
-                <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
-              </div>
-            ) : (
-              <>
-                {invitationDetail.accepted ? (
-                  <>
-                    <EmptySpace
-                      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("/")}
-                      />
-                    </EmptySpace>
-                  </>
-                ) : (
-                  <EmptySpace
-                    title={`You have been invited to ${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={CheckIcon} title="Accept" action={handleAccept} />
-                    <EmptySpaceItem
-                      Icon={XMarkIcon}
-                      title="Ignore"
-                      action={() => {
-                        router.push("/");
-                      }}
-                    />
-                  </EmptySpace>
-                )}
-              </>
-            )}
-          </>
-        ) : error ? (
-          <EmptySpace
-            title="This invitation link is not active anymore."
-            description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
-            link={{ text: "Or start from an empty project", href: "/" }}
-          >
-            {!user ? (
-              <EmptySpaceItem
-                Icon={UserIcon}
-                title="Sign in to continue"
-                action={() => {
-                  router.push("/");
-                }}
-              />
-            ) : (
-              <EmptySpaceItem
-                Icon={CubeIcon}
-                title="Continue to Dashboard"
-                action={() => {
-                  router.push("/");
-                }}
-              />
-            )}
-            <EmptySpaceItem
-              Icon={StarIcon}
-              title="Star us on GitHub"
-              action={() => {
-                router.push("https://github.com/makeplane");
-              }}
-            />
-            <EmptySpaceItem
-              Icon={ShareIcon}
-              title="Join our community of active creators"
-              action={() => {
-                router.push("https://discord.com/invite/8SR2N9PAcJ");
-              }}
-            />
-          </EmptySpace>
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
-      </div>
-    </DefaultLayout>
-  );
-};
-
-export default WorkspaceInvitation;
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 129aa7f59..6887c8262 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -1 +1,8 @@
-module.exports = require("tailwind-config-custom/postcss.config");
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/web/public/empty-state/empty_label.svg b/web/public/empty-state/empty_label.svg
new file mode 100644
index 000000000..c664da6f4
--- /dev/null
+++ b/web/public/empty-state/empty_label.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 3.33203H3.33331V19.9987L18.8166 35.482C20.3833 37.0487 22.95 37.0487 24.5166 35.482L35.4833 24.5154C37.05 22.9487 37.05 20.382 35.4833 18.8154L20 3.33203Z" fill="#CED4DA" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6667 11.668H11.6834" stroke="#E9ECEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/public/empty-state/empty_members.svg b/web/public/empty-state/empty_members.svg
new file mode 100644
index 000000000..6672c587b
--- /dev/null
+++ b/web/public/empty-state/empty_members.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_656_27784)">
+<path d="M24.8113 22.6226C30.23 22.6226 34.6226 18.23 34.6226 12.8113C34.6226 7.39268 30.23 3 24.8113 3C19.3927 3 15 7.39268 15 12.8113C15 18.23 19.3927 22.6226 24.8113 22.6226Z" fill="#E9ECEF"/>
+<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833" fill="#CED4DA"/>
+<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833C10.5708 47.729 38.3358 49.5686 41.6604 39.4833Z" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.4427 37.888C41.9639 39.9507 39.7091 42.6049 36.6233 44.3074C33.5374 46.0099 29.8569 46.6995 25.4928 46.6995C21.1288 46.6995 16.9435 45.743 13.8576 44.0405C10.6678 42.8396 7.44345 39.8189 9.03816 37.6211L25.4928 37.6211L41.4427 37.888Z" fill="#CED4DA"/>
+</g>
+<defs>
+<clipPath id="clip0_656_27784">
+<rect width="47.0943" height="47.0943" fill="white" transform="translate(0.452881 0.820312)"/>
+</clipPath>
+</defs>
+</svg>
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/jira.png b/web/public/services/jira.png
deleted file mode 100644
index ca9db1926..000000000
Binary files a/web/public/services/jira.png and /dev/null differ
diff --git a/web/public/services/jira.svg b/web/public/services/jira.svg
new file mode 100644
index 000000000..5e5cebc84
--- /dev/null
+++ b/web/public/services/jira.svg
@@ -0,0 +1,15 @@
+<svg width="132" height="140" viewBox="0 0 132 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M129.99 66.3078L73.235 9.55259L67.7344 4.05612L5.48285 66.3078C3.44786 68.3483 3.44786 71.6517 5.48285 73.6881L44.515 112.719L67.7344 135.944L129.99 73.6881C132.027 71.6517 132.027 68.3483 129.99 66.3078ZM67.7344 89.4939L48.2399 70.0007L67.7344 50.5005L87.2332 70.0007L67.7344 89.4939Z" fill="#2684FF"/>
+<path d="M67.7344 50.5005C54.9714 37.732 54.9062 17.0521 67.5986 4.20861L24.929 46.8617L48.1539 70.0867L67.7344 50.5005Z" fill="url(#paint0_linear_7_1732)"/>
+<path d="M87.2873 69.9453L67.7344 89.4939C73.8963 95.6502 77.3619 104.006 77.3619 112.719C77.3619 121.431 73.8963 129.782 67.7344 135.944L110.507 93.1702L87.2873 69.9453Z" fill="url(#paint1_linear_7_1732)"/>
+<defs>
+<linearGradient id="paint0_linear_7_1732" x1="59.3547" y1="35.6787" x2="37.0275" y2="58.0003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0052CC"/>
+<stop offset="1" stop-color="#2684FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7_1732" x1="76.3553" y1="104.104" x2="98.6379" y2="81.8216" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0052CC"/>
+<stop offset="1" stop-color="#2684FF"/>
+</linearGradient>
+</defs>
+</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/public/web-view-spinner.png b/web/public/web-view-spinner.png
new file mode 100644
index 000000000..527f307c2
Binary files /dev/null and b/web/public/web-view-spinner.png differ
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 55%
rename from web/services/app-config.service.ts
rename to web/services/app_config.service.ts
index 713cda3da..8f8bcd423 100644
--- a/web/services/app-config.service.ts
+++ b/web/services/app_config.service.ts
@@ -1,28 +1,22 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
 // helper
 import { API_BASE_URL } from "helpers/common.helper";
-
-export interface IEnvConfig {
-  github: string;
-  google: string;
-  github_app_name: string | null;
-  email_password_login: boolean;
-  magic_login: boolean;
-}
+// types
+import { IAppConfig } from "types/app";
 
 export class AppConfigService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async envConfig(): Promise<IEnvConfig> {
+  async envConfig(): Promise<IAppConfig> {
     return this.get("/api/configs/", {
       headers: {
         "Content-Type": "application/json",
       },
     })
-      .then((response) => response?.data)
+      .then((response) => response.data)
       .catch((error) => {
         throw error?.response?.data;
       });
diff --git a/web/services/app-installations.service.ts b/web/services/app_installation.service.ts
similarity index 81%
rename from web/services/app-installations.service.ts
rename to web/services/app_installation.service.ts
index 8b18cddfc..179721036 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);
   }
@@ -60,18 +60,4 @@ class AppInstallationsService extends APIService {
         throw error?.response;
       });
   }
-
-  async getSlackAuthDetails(code: string): Promise<any> {
-    const response = await axios({
-      method: "post",
-      url: "/api/slack-redirect",
-      data: {
-        code,
-      },
-    });
-
-    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/cycle.service.ts b/web/services/cycle.service.ts
new file mode 100644
index 000000000..2e8b0b998
--- /dev/null
+++ b/web/services/cycle.service.ts
@@ -0,0 +1,146 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type { CycleDateCheckData, IUser, ICycle, IIssue } from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class CycleService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createCycle(workspaceSlug: string, projectId: string, data: any, user: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
+      .then((response) => {
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCyclesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    cycleType: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
+      params: {
+        cycle_view: cycleType,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  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) => {
+        throw err?.response?.data;
+      });
+  }
+
+  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;
+      });
+  }
+
+  async getCycleIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    queries?: any
+  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: Partial<ICycle>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
+      .then((response) => {
+        if (user) trackEventService.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  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) => {
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.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;
+      });
+  }
+
+  async addCycleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      cycle: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async transferIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      new_cycle_id: string;
+    }
+  ): Promise<any> {
+    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}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/cycles.service.ts b/web/services/cycles.service.ts
deleted file mode 100644
index b83b1fb6a..000000000
--- a/web/services/cycles.service.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-// types
-import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IIssue } from "types";
-import { API_BASE_URL } from "helpers/common.helper";
-
-class ProjectCycleServices extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async createCycle(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
-      .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getCyclesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    cycleType: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
-  ): Promise<ICycle[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
-      params: {
-        cycle_view: cycleType,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  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) => {
-        throw err?.response?.data;
-      });
-  }
-
-  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;
-      });
-  }
-
-  async getCycleIssuesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    queries?: any
-  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
-      { params: queries }
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: Partial<ICycle>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
-      .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.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;
-      });
-  }
-
-  async addCycleToFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      cycle: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async transferIssues(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: {
-      new_cycle_id: string;
-    }
-  ): Promise<any> {
-    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}/`
-    )
-      .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 15cdc1786..84907161e 100644
--- a/web/services/file.service.ts
+++ b/web/services/file.service.ts
@@ -1,8 +1,10 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
+import axios from "axios";
 
-interface UnSplashImage {
+export interface UnSplashImage {
   id: string;
   created_at: Date;
   updated_at: Date;
@@ -17,7 +19,7 @@ interface UnSplashImage {
   [key: string]: any;
 }
 
-interface UnSplashImageUrls {
+export interface UnSplashImageUrls {
   raw: string;
   full: string;
   regular: string;
@@ -26,19 +28,50 @@ interface UnSplashImageUrls {
   small_s3: string;
 }
 
-class FileServices extends APIService {
+export class FileService extends APIService {
+  private cancelSource: any;
+
   constructor() {
     super(API_BASE_URL);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.deleteImage = this.deleteImage.bind(this);
+    this.cancelUpload = this.cancelUpload.bind(this);
   }
 
   async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
-    return this.mediaUpload(`/api/workspaces/${workspaceSlug}/file-assets/`, file)
+    this.cancelSource = axios.CancelToken.source();
+    return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "multipart/form-data",
+      },
+      cancelToken: this.cancelSource.token,
+    })
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response?.data;
+        if (axios.isCancel(error)) {
+          console.log(error.message);
+        } else {
+          throw error?.response?.data;
+        }
       });
   }
 
+  cancelUpload() {
+    this.cancelSource.cancel("Upload cancelled");
+  }
+
+  getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
+    return async (file: File) => {
+      const formData = new FormData();
+      formData.append("asset", file);
+      formData.append("attributes", JSON.stringify({}));
+
+      const data = await this.uploadFile(workspaceSlug, formData);
+      return data.asset;
+    };
+  }
+
   async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
     return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
       .then((response) => response?.status)
@@ -57,8 +90,14 @@ class FileServices extends APIService {
         throw error?.response?.data;
       });
   }
+
   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;
@@ -96,5 +135,3 @@ class FileServices extends APIService {
       });
   }
 }
-
-export default new FileServices();
diff --git a/web/services/inbox.service.ts b/web/services/inbox.service.ts
index 9df693e99..05b19aa41 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, 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;
@@ -69,7 +56,7 @@ class InboxServices extends APIService {
     projectId: string,
     inboxId: string,
     inboxIssueId: string
-  ): Promise<IInboxIssueDetail> {
+  ): Promise<IInboxIssue> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
     )
@@ -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);
+        if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user);
         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
-  ): Promise<IInboxIssue> {
+    user: IUser | undefined
+  ): Promise<any> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
       data
     )
       .then((response) => {
-        trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
+        if (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
-  ): Promise<IInboxIssueDetail> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`,
-      data
-    )
+    user: IUser | undefined
+  ): Promise<IInboxIssue> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, data)
       .then((response) => {
-        trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
+        if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
         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..5f2844896
--- /dev/null
+++ b/web/services/issue/issue.service.ts
@@ -0,0 +1,277 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// type
+import type { IUser, IIssue, IIssueActivity, ISubIssueResponse, IIssueDisplayProperties } 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 createIssue(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 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 getIssueDisplayProperties(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateIssueDisplayProperties(
+    workspaceSlug: string,
+    projectId: string,
+    data: IIssueDisplayProperties
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`, {
+      properties: 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..dec4b2d8f 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
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
-      data
-    )
+    user: IUser | undefined
+  ): Promise<IModule> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
       .then((response) => {
-        trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
+        if (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.service.ts b/web/services/project.service.ts
deleted file mode 100644
index 8f2508b74..000000000
--- a/web/services/project.service.ts
+++ /dev/null
@@ -1,385 +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 type {
-  GithubRepositoriesResponse,
-  ICurrentUserResponse,
-  IProject,
-  IProjectBulkInviteFormData,
-  IProjectMember,
-  IProjectMemberInvitation,
-  ISearchIssueResponse,
-  ProjectPreferences,
-  IProjectViewProps,
-  TProjectIssuesSearchParams,
-} from "types";
-
-export class ProjectServices extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async createProject(
-    workspaceSlug: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
-      .then((response) => {
-        trackEventServices.trackProjectEvent(response.data, "CREATE_PROJECT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async checkProjectIdentifierAvailability(workspaceSlug: string, data: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/project-identifiers`, {
-      params: {
-        name: data,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProjects(
-    workspaceSlug: string,
-    params: {
-      is_favorite: "all" | boolean;
-    }
-  ): Promise<IProject[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProject(workspaceSlug: string, projectId: string): Promise<IProject> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProject(
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
-      .then((response) => {
-        trackEventServices.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteProject(
-    workspaceSlug: string,
-    projectId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
-      .then((response) => {
-        trackEventServices.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async inviteProject(
-    workspaceSlug: string,
-    projectId: string,
-    data: IProjectBulkInviteFormData,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)
-      .then((response) => {
-        trackEventServices.trackProjectEvent(
-          {
-            workspaceId: response?.data?.workspace?.id,
-            workspaceSlug,
-            projectId,
-            projectName: response?.data?.project?.name,
-            memberEmail: response?.data?.member?.email,
-          },
-          "PROJECT_MEMBER_INVITE",
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async joinProject(workspaceSlug: string, data: any): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async leaveProject(
-    workspaceSlug: string,
-    projectId: string,
-    user: ICurrentUserResponse
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
-      .then((response) => {
-        trackEventServices.trackProjectEvent(
-          "PROJECT_MEMBER_LEAVE",
-          {
-            workspaceSlug,
-            projectId,
-            ...response?.data,
-          },
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async joinProjects(data: any): Promise<any> {
-    return this.post("/api/users/me/invitations/projects/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectMembers(workspaceSlug: string, projectId: string): Promise<IProjectMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectMembersWithEmail(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectMemberMe(workspaceSlug: string, projectId: string): Promise<IProjectMember> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  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) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProjectMember(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string,
-    data: Partial<IProjectMember>
-  ): Promise<IProjectMember> {
-    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}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async setProjectView(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      view_props?: IProjectViewProps;
-      default_props?: IProjectViewProps;
-      preferences?: ProjectPreferences;
-      sort_order?: number;
-    }
-  ): Promise<any> {
-    await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
-    return this.getWithoutBase(url)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async syncGithubRepository(
-    workspaceSlug: string,
-    projectId: string,
-    workspaceIntegrationId: string,
-    data: {
-      name: string;
-      owner: string;
-      repository_id: string;
-      url: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProjectGithubRepository(
-    workspaceSlug: string,
-    projectId: string,
-    integrationId: string
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addProjectToFavorites(
-    workspaceSlug: string,
-    data: {
-      project: string;
-    }
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeProjectFromFavorites(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorite-projects/${projectId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectIssuesSearch(
-    workspaceSlug: string,
-    projectId: string,
-    params: TProjectIssuesSearchParams
-  ): Promise<ISearchIssueResponse[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/search-issues/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ProjectServices();
diff --git a/web/services/project/index.ts b/web/services/project/index.ts
new file mode 100644
index 000000000..18cf1200a
--- /dev/null
+++ b/web/services/project/index.ts
@@ -0,0 +1,6 @@
+export * from "./project.service";
+export * from "./project-estimate.service";
+export * from "./project-export.service";
+export * from "./project-member.service";
+export * from "./project-state.service";
+export * from "./project-publish.service";
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-member.service.ts b/web/services/project/project-member.service.ts
new file mode 100644
index 000000000..35c7a620a
--- /dev/null
+++ b/web/services/project/project-member.service.ts
@@ -0,0 +1,109 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type { IUser, IProjectBulkAddFormData, IProjectMember, IProjectMemberInvitation } from "types";
+
+const trackEventService = new TrackEventService();
+
+export class ProjectMemberService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchProjectMembers(workspaceSlug: string, projectId: string): Promise<IProjectMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkAddMembersToProject(
+    workspaceSlug: string,
+    projectId: string,
+    data: IProjectBulkAddFormData,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`, data)
+      .then((response) => {
+        trackEventService.trackProjectEvent(
+          {
+            workspaceId: response?.data?.workspace?.id,
+            workspaceSlug,
+            projectId,
+            projectName: response?.data?.project?.name,
+            memberEmail: response?.data?.member?.email,
+          },
+          "PROJECT_MEMBER_INVITE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectMemberMe(workspaceSlug: string, projectId: string): Promise<IProjectMember> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  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) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectMember(
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<IProjectMember>
+  ): Promise<IProjectMember> {
+    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 fetchProjectInvitations(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 55%
rename from web/services/state.service.ts
rename to web/services/project/project-state.service.ts
index aa784855e..44b649327 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 } 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<IState> {
     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) => {
@@ -27,17 +24,16 @@ class ProjectStateServices extends APIService {
       });
   }
 
-  async getStates(workspaceSlug: string, projectId: string): Promise<IStateResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
+  async markDefault(workspaceSlug: string, projectId: string, stateId: string): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/mark-default/`, {})
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response?.data;
+        throw error?.response;
       });
   }
 
-  async getIssuesByState(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?group_by=state`)
-
+  async getStates(workspaceSlug: string, projectId: string): Promise<IState[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -57,14 +53,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 +70,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 +82,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 +93,3 @@ class ProjectStateServices extends APIService {
       });
   }
 }
-
-export default new ProjectStateServices();
diff --git a/web/services/project/project.service.ts b/web/services/project/project.service.ts
new file mode 100644
index 000000000..74d678d23
--- /dev/null
+++ b/web/services/project/project.service.ts
@@ -0,0 +1,203 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type {
+  GithubRepositoriesResponse,
+  IProject,
+  ISearchIssueResponse,
+  ProjectPreferences,
+  IProjectViewProps,
+  TProjectIssuesSearchParams,
+} from "types";
+
+const trackEventService = new TrackEventService();
+
+export class ProjectService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createProject(workspaceSlug: string, data: Partial<IProject>, user: any): Promise<IProject> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
+      .then((response) => {
+        trackEventService.trackProjectEvent(response.data, "CREATE_PROJECT", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async checkProjectIdentifierAvailability(workspaceSlug: string, data: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/project-identifiers`, {
+      params: {
+        name: data,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjects(workspaceSlug: string): Promise<IProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProject(workspaceSlug: string, projectId: string): Promise<IProject> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProject(workspaceSlug: string, projectId: string, data: Partial<IProject>, user: any): Promise<IProject> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
+      .then((response) => {
+        trackEventService.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProject(workspaceSlug: string, projectId: string, user: any | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => {
+        trackEventService.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.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: any): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
+      .then((response) => {
+        trackEventService.trackProjectEvent(
+          "PROJECT_MEMBER_LEAVE",
+          {
+            workspaceSlug,
+            projectId,
+            ...response?.data,
+          },
+          user
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async setProjectView(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view_props?: IProjectViewProps;
+      default_props?: IProjectViewProps;
+      preferences?: ProjectPreferences;
+      sort_order?: number;
+    }
+  ): Promise<any> {
+    await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
+    return this.request(url)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async syncGithubRepository(
+    workspaceSlug: string,
+    projectId: string,
+    workspaceIntegrationId: string,
+    data: {
+      name: string;
+      owner: string;
+      repository_id: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectGithubRepository(workspaceSlug: string, projectId: string, integrationId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.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;
+      });
+  }
+
+  async removeProjectFromFavorites(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorite-projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectIssuesSearch(
+    workspaceSlug: string,
+    projectId: string,
+    params: TProjectIssuesSearchParams
+  ): Promise<ISearchIssueResponse[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/search-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
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..d3a2bd743 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,23 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackMiscellaneousEvent(
-    data: any,
-    eventName: MiscellaneousEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackMiscellaneousEvent(data: any, eventName: MiscellaneousEventType, user: IUser | undefined): Promise<any> {
+    if (!trackEvent || !user) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackAppIntegrationEvent(data: any, eventName: IntegrationEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -719,31 +664,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackAppIntegrationEvent(
-    data: any,
-    eventName: IntegrationEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    if (!trackEvent) return;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  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..30126c2ee 100644
--- a/web/services/workspace.service.ts
+++ b/web/services/workspace.service.ts
@@ -1,24 +1,28 @@
 // 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 {
   IWorkspace,
+  IWorkspaceMemberMe,
   IWorkspaceMember,
   IWorkspaceMemberInvitation,
   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 +43,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 +57,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 +69,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 +83,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 +95,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) => {
@@ -143,23 +132,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceMembersWithEmail(workspaceSlug: string): Promise<IWorkspaceMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceMemberMe(workspaceSlug: string): Promise<IWorkspaceMember> {
+  async workspaceMemberMe(workspaceSlug: string): Promise<IWorkspaceMemberMe> {
     return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -167,10 +140,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) => {
@@ -178,6 +148,14 @@ class WorkspaceService extends APIService {
       });
   }
 
+  async fetchWorkspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async updateWorkspaceMember(
     workspaceSlug: string,
     memberId: string,
@@ -206,16 +184,6 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceInvitationsWithEmail(
-    workspaceSlug: string
-  ): Promise<IWorkspaceMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
   async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
     return this.get(`/api/users/me/invitations/${invitationId}/`, { headers: {} })
       .then((response) => response?.data)
@@ -264,7 +232,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 +240,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 +272,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 +285,3 @@ class WorkspaceService extends APIService {
       });
   }
 }
-
-export default new WorkspaceService();
diff --git a/web/store/app-config.store.ts b/web/store/app-config.store.ts
new file mode 100644
index 000000000..3a4d9efc0
--- /dev/null
+++ b/web/store/app-config.store.ts
@@ -0,0 +1,47 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "./root";
+import { IAppConfig } from "types/app";
+// services
+import { AppConfigService } from "services/app_config.service";
+
+export interface IAppConfigStore {
+  envConfig: IAppConfig | null;
+  // action
+  fetchAppConfig: () => Promise<any>;
+}
+
+class AppConfigStore implements IAppConfigStore {
+  // observables
+  envConfig: IAppConfig | null = null;
+
+  // root store
+  rootStore;
+  // service
+  appConfigService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      envConfig: observable.ref,
+      // actions
+      fetchAppConfig: action,
+    });
+    this.appConfigService = new AppConfigService();
+
+    this.rootStore = _rootStore;
+  }
+  fetchAppConfig = async () => {
+    try {
+      const config = await this.appConfigService.envConfig();
+      runInAction(() => {
+        this.envConfig = config;
+      });
+      return config;
+    } catch (error) {
+      throw error;
+    }
+  };
+}
+
+export default AppConfigStore;
diff --git a/web/store/archived-issues/index.ts b/web/store/archived-issues/index.ts
new file mode 100644
index 000000000..b1230f1c9
--- /dev/null
+++ b/web/store/archived-issues/index.ts
@@ -0,0 +1,3 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";
+export * from "./issue_detail.store";
diff --git a/web/store/archived-issues/issue.store.ts b/web/store/archived-issues/issue.store.ts
new file mode 100644
index 000000000..624f4714a
--- /dev/null
+++ b/web/store/archived-issues/issue.store.ts
@@ -0,0 +1,230 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueArchiveService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+export interface IArchivedIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  issueDetail: {
+    [project_id: string]: {
+      [issue_id: string]: IIssue;
+    };
+  };
+
+  // services
+  archivedIssueService: IssueArchiveService;
+
+  // 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;
+  deleteArchivedIssue: (group: string | null, sub_group: string | null, issue: IIssue) => Promise<any>;
+}
+
+export class ArchivedIssueStore implements IArchivedIssueStore {
+  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[];
+    };
+  } = {};
+  issueDetail: IArchivedIssueStore["issueDetail"] = {};
+
+  // service
+  archivedIssueService;
+  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,
+      deleteArchivedIssue: action,
+    });
+    this.rootStore = _rootStore;
+    this.archivedIssueService = new IssueArchiveService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        this.rootStore.archivedIssueFilters.userDisplayFilters &&
+        this.rootStore.archivedIssueFilters.userFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId);
+    });
+  }
+
+  get getIssueType() {
+    const issueSubGroup = this.rootStore.archivedIssueFilters.userDisplayFilters?.sub_group_by || null;
+    return issueSubGroup ? "groupWithSubGroups" : "grouped";
+  }
+
+  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)),
+        },
+      };
+    }
+
+    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.archivedIssueFilters.appliedFilters;
+      const issueResponse = await this.archivedIssueService.getArchivedIssues(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;
+      throw error;
+    }
+  };
+
+  /**
+   * @description Function to delete issue from the store. NOTE: This function is not deleting issue from the backend.
+   */
+  deleteArchivedIssue = 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]?.filter((i) => i?.id !== issue?.id),
+      };
+    }
+    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]?.filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+}
diff --git a/web/store/archived-issues/issue_detail.store.ts b/web/store/archived-issues/issue_detail.store.ts
new file mode 100644
index 000000000..ef3468f19
--- /dev/null
+++ b/web/store/archived-issues/issue_detail.store.ts
@@ -0,0 +1,198 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueArchiveService } from "services/issue";
+
+export interface IArchivedIssueDetailStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issueDetail: {
+    [issue_id: string]: IIssue;
+  };
+  peekId: string | null;
+
+  // services
+  archivedIssueService: IssueArchiveService;
+
+  // computed
+  getIssue: IIssue | null;
+
+  // action
+  deleteArchivedIssue: (workspaceSlug: string, projectId: string, issuesId: string) => Promise<any>;
+  unarchiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
+  fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
+  fetchPeekIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
+}
+
+export class ArchivedIssueDetailStore implements IArchivedIssueDetailStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issueDetail: IArchivedIssueDetailStore["issueDetail"] = {};
+  peekId: string | null = null;
+
+  // service
+  archivedIssueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issueDetail: observable.ref,
+      peekId: observable.ref,
+
+      // computed
+      getIssue: computed,
+
+      // actions
+      deleteArchivedIssue: action,
+      unarchiveIssue: action,
+      fetchIssueDetails: action,
+      fetchPeekIssueDetails: action,
+    });
+    this.rootStore = _rootStore;
+    this.archivedIssueService = new IssueArchiveService();
+  }
+
+  get getIssue() {
+    if (!this.peekId) return null;
+    const _issue = this.issueDetail[this.peekId];
+    return _issue || null;
+  }
+
+  /**
+   * @description Function to delete archived issue from the detail store and backend.
+   */
+  deleteArchivedIssue = async (workspaceSlug: string, projectId: string, issuesId: string) => {
+    const originalIssues = { ...this.issueDetail };
+
+    const _issues = { ...this.issueDetail };
+    delete _issues[issuesId];
+
+    // optimistically deleting item from store
+    runInAction(() => {
+      this.issueDetail = _issues;
+    });
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      // deleting using api
+      const issueResponse = await this.archivedIssueService.deleteArchivedIssue(workspaceSlug, projectId, issuesId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        // reverting back to original issues
+        this.issueDetail = originalIssues;
+      });
+      throw error;
+    }
+  };
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issueDetail = {
+          ...this.issueDetail,
+          [issueId]: issueResponse,
+        };
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+      throw error;
+    }
+  };
+
+  unarchiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const issueResponse = await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
+      this.rootStore.archivedIssues.fetchIssues(workspaceSlug, projectId);
+
+      // deleting from issue detail store
+      const _issues = { ...this.issueDetail };
+      delete _issues[issueId];
+      runInAction(() => {
+        this.issueDetail = _issues;
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+      throw error;
+    }
+  };
+
+  fetchPeekIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.peekId = issueId;
+    });
+
+    try {
+      const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
+      await this.rootStore.issueDetail.fetchIssueReactions(workspaceSlug, projectId, issueId);
+      await this.rootStore.issueDetail.fetchIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issueDetail = {
+          ...this.issueDetail,
+          [issueId]: issueResponse,
+        };
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.peekId = null;
+      });
+      throw error;
+    }
+  };
+}
diff --git a/web/store/archived-issues/issue_filters.store.ts b/web/store/archived-issues/issue_filters.store.ts
new file mode 100644
index 000000000..9a555212b
--- /dev/null
+++ b/web/store/archived-issues/issue_filters.store.ts
@@ -0,0 +1,247 @@
+import { observable, computed, makeObservable, action, runInAction } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// services
+import { IssueService } from "services/issue";
+import { ProjectService, ProjectMemberService } from "services/project";
+// types
+import { RootStore } from "../root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssueParams,
+  IProjectViewProps,
+} from "types";
+
+export interface IArchivedIssueFilterStore {
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+
+  // services
+  projectService: ProjectService;
+  projectMemberService: ProjectMemberService;
+  issueService: IssueService;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+
+  // actions
+  fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
+  updateUserFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IProjectViewProps>
+  ) => Promise<void>;
+  updateDisplayProperties: (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => Promise<void>;
+}
+
+export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+    assignees: null,
+    created_by: null,
+    subscriber: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    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: ProjectService;
+  projectMemberService: ProjectMemberService;
+  issueService: IssueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+
+      // computed
+      appliedFilters: computed,
+
+      // actions
+      fetchUserProjectFilters: action,
+      updateUserFilters: action,
+      updateDisplayProperties: action,
+      computedFilter: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.issueService = new IssueService();
+    this.projectService = new ProjectService();
+    this.projectMemberService = new ProjectMemberService();
+  }
+
+  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,
+      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("list", "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+
+  updateUserFilters = async (workspaceSlug: string, projectId: string, properties: Partial<IProjectViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.userDisplayFilters,
+        ...properties.display_filters,
+      },
+      filters: {
+        ...this.userFilters,
+        ...properties.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,
+          layout: "list",
+        };
+      });
+
+      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: IIssueDisplayProperties = {
+      ...this.userDisplayProperties,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.userDisplayProperties = newProperties;
+      });
+
+      await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user display properties in issue filter store", error);
+    }
+  };
+
+  fetchUserProjectFilters = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const memberResponse = await this.projectMemberService.projectMemberMe(workspaceSlug, projectId);
+      const issueProperties = await this.issueService.getIssueDisplayProperties(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.userFilters = memberResponse?.view_props?.filters;
+        this.userDisplayFilters = {
+          ...(memberResponse?.view_props?.display_filters ?? {}),
+          layout: "list",
+        };
+        this.userDisplayProperties = issueProperties?.properties;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to fetch user filters in issue filter store", error);
+    }
+  };
+}
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/command-palette.store.ts b/web/store/command-palette.store.ts
new file mode 100644
index 000000000..7bed73bfe
--- /dev/null
+++ b/web/store/command-palette.store.ts
@@ -0,0 +1,163 @@
+import { observable, action, makeObservable } from "mobx";
+// types
+import { RootStore } from "./root";
+// services
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+
+export interface ICommandPaletteStore {
+  isCommandPaletteOpen: boolean;
+  isShortcutModalOpen: boolean;
+  isCreateProjectModalOpen: boolean;
+  isCreateCycleModalOpen: boolean;
+  isCreateModuleModalOpen: boolean;
+  isCreateViewModalOpen: boolean;
+  isCreatePageModalOpen: boolean;
+  isCreateIssueModalOpen: boolean;
+  isDeleteIssueModalOpen: boolean;
+  isBulkDeleteIssueModalOpen: boolean;
+
+  toggleCommandPaletteModal: (value?: boolean) => void;
+  toggleShortcutModal: (value?: boolean) => void;
+  toggleCreateProjectModal: (value?: boolean) => void;
+  toggleCreateCycleModal: (value?: boolean) => void;
+  toggleCreateViewModal: (value?: boolean) => void;
+  toggleCreatePageModal: (value?: boolean) => void;
+  toggleCreateIssueModal: (value?: boolean) => void;
+  toggleCreateModuleModal: (value?: boolean) => void;
+  toggleDeleteIssueModal: (value?: boolean) => void;
+  toggleBulkDeleteIssueModal: (value?: boolean) => void;
+}
+
+class CommandPaletteStore implements ICommandPaletteStore {
+  isCommandPaletteOpen: boolean = false;
+  isShortcutModalOpen: boolean = false;
+  isCreateProjectModalOpen: boolean = false;
+  isCreateCycleModalOpen: boolean = false;
+  isCreateModuleModalOpen: boolean = false;
+  isCreateViewModalOpen: boolean = false;
+  isCreatePageModalOpen: boolean = false;
+  isCreateIssueModalOpen: boolean = false;
+  isDeleteIssueModalOpen: boolean = false;
+  isBulkDeleteIssueModalOpen: boolean = false;
+  // root store
+  rootStore;
+  // service
+  projectService;
+  pageService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      isCommandPaletteOpen: observable.ref,
+      isShortcutModalOpen: observable.ref,
+      isCreateProjectModalOpen: observable.ref,
+      isCreateCycleModalOpen: observable.ref,
+      isCreateModuleModalOpen: observable.ref,
+      isCreateViewModalOpen: observable.ref,
+      isCreatePageModalOpen: observable.ref,
+      isCreateIssueModalOpen: observable.ref,
+      isDeleteIssueModalOpen: observable.ref,
+      isBulkDeleteIssueModalOpen: observable.ref,
+      // computed
+      // projectPages: computed,
+      // action
+      toggleCommandPaletteModal: action,
+      toggleShortcutModal: action,
+      toggleCreateProjectModal: action,
+      toggleCreateCycleModal: action,
+      toggleCreateViewModal: action,
+      toggleCreatePageModal: action,
+      toggleCreateIssueModal: action,
+      toggleCreateModuleModal: action,
+      toggleDeleteIssueModal: action,
+      toggleBulkDeleteIssueModal: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.pageService = new PageService();
+  }
+
+  toggleCommandPaletteModal = (value?: boolean) => {
+    if (value) {
+      this.isCommandPaletteOpen = value;
+    } else {
+      this.isCommandPaletteOpen = !this.isCommandPaletteOpen;
+    }
+  };
+
+  toggleShortcutModal = (value?: boolean) => {
+    if (value) {
+      this.isShortcutModalOpen = value;
+    } else {
+      this.isShortcutModalOpen = !this.isShortcutModalOpen;
+    }
+  };
+
+  toggleCreateProjectModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateProjectModalOpen = value;
+    } else {
+      this.isCreateProjectModalOpen = !this.isCreateProjectModalOpen;
+    }
+  };
+
+  toggleCreateCycleModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateCycleModalOpen = value;
+    } else {
+      this.isCreateCycleModalOpen = !this.isCreateCycleModalOpen;
+    }
+  };
+
+  toggleCreateViewModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateViewModalOpen = value;
+    } else {
+      this.isCreateViewModalOpen = !this.isCreateViewModalOpen;
+    }
+  };
+
+  toggleCreatePageModal = (value?: boolean) => {
+    if (value) {
+      this.isCreatePageModalOpen = value;
+    } else {
+      this.isCreatePageModalOpen = !this.isCreatePageModalOpen;
+    }
+  };
+
+  toggleCreateIssueModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateIssueModalOpen = value;
+    } else {
+      this.isCreateIssueModalOpen = !this.isCreateIssueModalOpen;
+    }
+  };
+
+  toggleDeleteIssueModal = (value?: boolean) => {
+    if (value) {
+      this.isDeleteIssueModalOpen = value;
+    } else {
+      this.isDeleteIssueModalOpen = !this.isDeleteIssueModalOpen;
+    }
+  };
+
+  toggleCreateModuleModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateModuleModalOpen = value;
+    } else {
+      this.isCreateModuleModalOpen = !this.isCreateModuleModalOpen;
+    }
+  };
+
+  toggleBulkDeleteIssueModal = (value?: boolean) => {
+    if (value) {
+      this.isBulkDeleteIssueModalOpen = value;
+    } else {
+      this.isBulkDeleteIssueModalOpen = !this.isBulkDeleteIssueModalOpen;
+    }
+  };
+}
+
+export default CommandPaletteStore;
diff --git a/web/store/cycle/cycle_issue.store.ts b/web/store/cycle/cycle_issue.store.ts
new file mode 100644
index 000000000..17d8f351c
--- /dev/null
+++ b/web/store/cycle/cycle_issue.store.ts
@@ -0,0 +1,364 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// services
+import { CycleService } from "services/cycle.service";
+import { IssueService } from "services/issue";
+// constants
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+// types
+import { IIssue } from "types";
+import { IBlockUpdateData } from "components/gantt-chart";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+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;
+  getIssuesCount: number;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => 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[];
+    };
+  } = {};
+
+  // services
+  rootStore;
+  cycleService;
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      updateGanttIssueStructure: action,
+      deleteIssue: action,
+      addIssueToCycle: action,
+      removeIssueFromCycle: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.cycleService = new CycleService();
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const cycleId = this.rootStore.cycle.cycleId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        cycleId &&
+        this.rootStore.cycleIssueFilter.cycleFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId, cycleId);
+    });
+  }
+
+  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;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  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) => (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) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i) => (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 } };
+    });
+  };
+
+  updateGanttIssueStructure = async (
+    workspaceSlug: string,
+    cycleId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date,
+            target_date: payload.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [cycleId]: {
+          ...this.issues[cycleId],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const cycleId: string | null = this.rootStore.cycle.cycleId;
+    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].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    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].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    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;
+
+      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;
+    }
+  };
+
+  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
+    try {
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.issueService.addIssueToCycle(
+        workspaceSlug,
+        projectId,
+        cycleId,
+        {
+          issues: issueIds,
+        },
+        user
+      );
+
+      this.fetchIssues(workspaceSlug, projectId, cycleId);
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  removeIssueFromCycle = async (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => {
+    try {
+      await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, bridgeId);
+    } catch (error) {
+      this.fetchIssues(workspaceSlug, projectId, cycleId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/cycle/cycle_issue_calendar_view.store.ts b/web/store/cycle/cycle_issue_calendar_view.store.ts
new file mode 100644
index 000000000..3b695d697
--- /dev/null
+++ b/web/store/cycle/cycle_issue_calendar_view.store.ts
@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+
+export interface ICycleIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class CycleIssueCalendarViewStore implements ICycleIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const cycleId = this.rootStore?.cycle?.cycleId;
+    const issueType: IIssueType | null = this.rootStore?.cycleIssue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.cycleIssue.getIssues;
+
+    if (workspaceSlug && projectId && cycleId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.cycleIssue.issues,
+        [cycleId]: {
+          ...this.rootStore?.cycleIssue.issues?.[cycleId],
+          [issueType]: {
+            ...this.rootStore?.cycleIssue.issues?.[cycleId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.cycleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
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..95fad6d98
--- /dev/null
+++ b/web/store/cycle/cycle_issue_filters.store.ts
@@ -0,0 +1,149 @@
+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,
+        },
+      };
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.cycleService.patchCycle(workspaceSlug, projectId, cycleId, payload, user);
+    } 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..0ecc96e60
--- /dev/null
+++ b/web/store/cycle/cycle_issue_kanban_view.store.ts
@@ -0,0 +1,448 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+
+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.issueDetail.peekId) return false;
+    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 || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      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
+      );
+    }
+  };
+
+  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 || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      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
+      );
+    }
+  };
+}
diff --git a/web/store/cycle/cycles.store.ts b/web/store/cycle/cycles.store.ts
new file mode 100644
index 000000000..67e3fc2ca
--- /dev/null
+++ b/web/store/cycle/cycles.store.ts
@@ -0,0 +1,432 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+// types
+import { ICycle, TCycleView, TCycleLayout, CycleDateCheckData, IIssue } from "types";
+// mobx
+import { RootStore } from "../root";
+// services
+import { ProjectService } from "services/project";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
+import { getDateRangeStatus } from "helpers/date-time.helper";
+
+export interface ICycleStore {
+  loader: boolean;
+  error: any | null;
+
+  cycleView: TCycleView;
+  cycleLayout: TCycleLayout;
+
+  cycleId: string | null;
+  cycles: {
+    [projectId: string]: {
+      [filterType: string]: ICycle[];
+    };
+  };
+  cycle_details: {
+    [cycleId: string]: ICycle;
+  };
+  active_cycle_issues: {
+    [cycleId: string]: IIssue[];
+  };
+
+  // computed
+  getCycleById: (cycleId: string) => ICycle | null;
+  projectCycles: ICycle[] | null;
+  projectCompletedCycles: ICycle[] | null;
+  projectUpcomingCycles: ICycle[] | null;
+  projectDraftCycles: ICycle[] | null;
+
+  // actions
+  setCycleView: (_cycleView: TCycleView) => void;
+  setCycleLayout: (_cycleLayout: TCycleLayout) => void;
+  setCycleId: (cycleId: string | null) => void;
+
+  validateDate: (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) => Promise<any>;
+
+  fetchCycles: (
+    workspaceSlug: string,
+    projectId: string,
+    params: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ) => Promise<void>;
+  fetchCycleWithId: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
+  fetchActiveCycleIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+
+  createCycle: (workspaceSlug: string, projectId: string, data: Partial<ICycle>) => Promise<ICycle>;
+  patchCycle: (workspaceSlug: string, projectId: string, cycleId: string, data: Partial<ICycle>) => Promise<ICycle>;
+  removeCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+
+  addCycleToFavorites: (workspaceSlug: string, projectId: string, cycle: ICycle) => Promise<any>;
+  removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycle: ICycle) => Promise<void>;
+}
+
+export class CycleStore implements ICycleStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  cycleView: TCycleView = "all";
+  cycleLayout: TCycleLayout = "list";
+
+  cycleId: string | null = null;
+  cycles: {
+    [projectId: string]: {
+      [filterType: string]: ICycle[];
+    };
+  } = {};
+
+  cycle_details: {
+    [cycleId: string]: ICycle;
+  } = {};
+
+  active_cycle_issues: {
+    [cycleId: string]: IIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+  // services
+  projectService;
+  issueService;
+  cycleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable,
+      error: observable.ref,
+
+      cycleView: observable,
+      cycleLayout: observable,
+
+      cycleId: observable,
+      cycles: observable.ref,
+      cycle_details: observable.ref,
+      active_cycle_issues: observable.ref,
+
+      // computed
+      projectCycles: computed,
+      projectCompletedCycles: computed,
+      projectUpcomingCycles: computed,
+      projectDraftCycles: computed,
+
+      // actions
+      setCycleView: action,
+      setCycleLayout: action,
+      setCycleId: action,
+      getCycleById: action,
+
+      fetchCycles: action,
+      fetchCycleWithId: action,
+
+      fetchActiveCycleIssues: action,
+
+      createCycle: action,
+      removeCycle: action,
+
+      addCycleToFavorites: action,
+      removeCycleFromFavorites: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.cycleService = new CycleService();
+  }
+
+  // computed
+  get projectCycles() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return null;
+    return this.cycles[projectId]?.all || null;
+  }
+
+  get projectCompletedCycles() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return null;
+
+    return this.cycles[projectId]?.completed || null;
+  }
+
+  get projectUpcomingCycles() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return null;
+
+    return this.cycles[projectId]?.upcoming || null;
+  }
+
+  get projectDraftCycles() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return null;
+
+    return this.cycles[projectId]?.draft || null;
+  }
+
+  getCycleById = (cycleId: string) => this.cycle_details[cycleId] || null;
+
+  // actions
+  setCycleView = (_cycleView: TCycleView) => (this.cycleView = _cycleView);
+  setCycleLayout = (_cycleLayout: TCycleLayout) => (this.cycleLayout = _cycleLayout);
+  setCycleId = (cycleId: string | null) => (this.cycleId = cycleId);
+
+  validateDate = async (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) => {
+    try {
+      const response = await this.cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
+      return response;
+    } catch (error) {
+      console.log("Failed to validate cycle dates", error);
+      throw error;
+    }
+  };
+
+  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);
+
+      if (this.cycleView === "active") this.fetchActiveCycleIssues(workspaceSlug, projectId, cyclesResponse[0].id);
+
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: { ...this.cycles[projectId], [params]: 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;
+    }
+  };
+
+  fetchActiveCycleIssues = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const _cycleIssues = await this.cycleService.getCycleIssuesWithParams(workspaceSlug, projectId, cycleId, {
+        priority: `urgent,high`,
+      });
+
+      const _activeCycleIssues = {
+        ...this.active_cycle_issues,
+        [cycleId]: _cycleIssues as IIssue[],
+      };
+
+      runInAction(() => {
+        this.active_cycle_issues = _activeCycleIssues;
+      });
+
+      return _activeCycleIssues;
+    } catch (error) {
+      console.log("error");
+    }
+  };
+
+  createCycle = async (workspaceSlug: string, projectId: string, data: Partial<ICycle>) => {
+    try {
+      const response = await this.cycleService.createCycle(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      runInAction(() => {
+        this.cycle_details = {
+          ...this.cycle_details,
+          [response?.id]: response,
+        };
+      });
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create cycle from cycle store");
+      throw error;
+    }
+  };
+
+  patchCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: Partial<ICycle>) => {
+    try {
+      const _response = await this.cycleService.patchCycle(workspaceSlug, projectId, cycleId, data, undefined);
+
+      const _cycleDetails = {
+        ...this.cycle_details,
+        [cycleId]: { ...this.cycle_details[cycleId], ..._response },
+      };
+
+      runInAction(() => {
+        this.cycle_details = _cycleDetails;
+      });
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return _response;
+    } catch (error) {
+      console.log("Failed to patch cycle from cycle store");
+      throw error;
+    }
+  };
+
+  removeCycle = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const _response = await this.cycleService.deleteCycle(workspaceSlug, projectId, cycleId, undefined);
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return _response;
+    } catch (error) {
+      console.log("Failed to delete cycle from cycle store");
+      throw error;
+    }
+  };
+
+  addCycleToFavorites = async (workspaceSlug: string, projectId: string, cycle: ICycle) => {
+    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+    const statusCyclesList = this.cycles[projectId]?.[cycleStatus] ?? [];
+    const allCyclesList = this.projectCycles ?? [];
+
+    try {
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: {
+            ...this.cycles[projectId],
+            [cycleStatus]: statusCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: true };
+              return c;
+            }),
+            all: allCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: true };
+              return c;
+            }),
+          },
+        };
+        this.cycle_details = {
+          ...this.cycle_details,
+          [cycle.id]: { ...this.cycle_details[cycle.id], is_favorite: true },
+        };
+      });
+
+      // updating through api.
+      const response = await this.cycleService.addCycleToFavorites(workspaceSlug, projectId, { cycle: cycle.id });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to add cycle to favorites in the cycles store", error);
+
+      // reset on error
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: {
+            ...this.cycles[projectId],
+            [cycleStatus]: statusCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: false };
+              return c;
+            }),
+            all: allCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: false };
+              return c;
+            }),
+          },
+        };
+        this.cycle_details = {
+          ...this.cycle_details,
+          [cycle.id]: { ...this.cycle_details[cycle.id], is_favorite: false },
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  removeCycleFromFavorites = async (workspaceSlug: string, projectId: string, cycle: ICycle) => {
+    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+    const statusCyclesList = this.cycles[projectId]?.[cycleStatus] ?? [];
+    const allCyclesList = this.projectCycles ?? [];
+
+    try {
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: {
+            ...this.cycles[projectId],
+            [cycleStatus]: statusCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: false };
+              return c;
+            }),
+            all: allCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: false };
+              return c;
+            }),
+          },
+        };
+        this.cycle_details = {
+          ...this.cycle_details,
+          [cycle.id]: { ...this.cycle_details[cycle.id], is_favorite: false },
+        };
+      });
+
+      const response = await this.cycleService.removeCycleFromFavorites(workspaceSlug, projectId, cycle.id);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to remove cycle from favorites - Cycle Store", error);
+
+      // reset on error
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: {
+            ...this.cycles[projectId],
+            [cycleStatus]: statusCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: true };
+              return c;
+            }),
+            all: allCyclesList?.map((c) => {
+              if (c.id === cycle.id) return { ...c, is_favorite: true };
+              return c;
+            }),
+          },
+        };
+        this.cycle_details = {
+          ...this.cycle_details,
+          [cycle.id]: { ...this.cycle_details[cycle.id], is_favorite: true },
+        };
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/cycle/index.ts b/web/store/cycle/index.ts
new file mode 100644
index 000000000..ae854f978
--- /dev/null
+++ b/web/store/cycle/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle_issue_filters.store";
+export * from "./cycle_issue_kanban_view.store";
+export * from "./cycle_issue_calendar_view.store";
+export * from "./cycle_issue.store";
+export * from "./cycles.store";
diff --git a/web/store/draft-issues/index.ts b/web/store/draft-issues/index.ts
new file mode 100644
index 000000000..abfd52768
--- /dev/null
+++ b/web/store/draft-issues/index.ts
@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";
diff --git a/web/store/draft-issues/issue.store.ts b/web/store/draft-issues/issue.store.ts
new file mode 100644
index 000000000..f31a0bbb4
--- /dev/null
+++ b/web/store/draft-issues/issue.store.ts
@@ -0,0 +1,184 @@
+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";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+export interface IDraftIssueStore {
+  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 DraftIssueStore implements IDraftIssueStore {
+  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/draft-issues/issue_filters.store.ts b/web/store/draft-issues/issue_filters.store.ts
new file mode 100644
index 000000000..2560c011b
--- /dev/null
+++ b/web/store/draft-issues/issue_filters.store.ts
@@ -0,0 +1,109 @@
+import { observable, computed, makeObservable } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IDraftIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class DraftIssueFilterStore implements IDraftIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+    assignees: null,
+    created_by: null,
+    subscriber: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    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;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  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;
+  }
+}
diff --git a/web/store/editor/index.ts b/web/store/editor/index.ts
new file mode 100644
index 000000000..f1e23e813
--- /dev/null
+++ b/web/store/editor/index.ts
@@ -0,0 +1 @@
+export * from "./mentions.store";
diff --git a/web/store/editor/mentions.store.ts b/web/store/editor/mentions.store.ts
new file mode 100644
index 000000000..df4ba152e
--- /dev/null
+++ b/web/store/editor/mentions.store.ts
@@ -0,0 +1,46 @@
+import { IMentionHighlight, IMentionSuggestion } from "@plane/lite-text-editor";
+import { RootStore } from "../root";
+import { computed, makeObservable } from "mobx";
+
+export interface IMentionsStore {
+  mentionSuggestions: IMentionSuggestion[];
+  mentionHighlights: IMentionHighlight[];
+}
+
+export class MentionsStore implements IMentionsStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    // rootStore
+    this.rootStore = _rootStore;
+
+    makeObservable(this, {
+      mentionHighlights: computed,
+      mentionSuggestions: computed,
+    });
+  }
+
+  get mentionSuggestions() {
+    const projectMembers = this.rootStore.projectMember.projectMembers;
+
+    const suggestions =
+      projectMembers === null
+        ? []
+        : projectMembers.map((member) => ({
+            id: member.member.id,
+            type: "User",
+            title: member.member.display_name,
+            subtitle: member.member.email ?? "",
+            avatar: member.member.avatar,
+            redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
+          }));
+
+    return suggestions;
+  }
+
+  get mentionHighlights() {
+    const user = this.rootStore.user.currentUser;
+    return user ? [user.id] : [];
+  }
+}
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..006c9b380
--- /dev/null
+++ b/web/store/global-view/global_view_issues.store.ts
@@ -0,0 +1,204 @@
+import { observable, action, makeObservable, runInAction, autorun } 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";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+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>;
+  updateIssueStructure: (viewId: string, issue: IIssue) => 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,
+      updateIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const globalViewId = this.rootStore.globalViews.globalViewId;
+
+      if (
+        workspaceSlug &&
+        globalViewId &&
+        this.rootStore.globalViewFilters.storedFilters[globalViewId] &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchViewIssues(workspaceSlug, globalViewId, this.rootStore.globalViewFilters.storedFilters[globalViewId]);
+    });
+  }
+
+  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;
+    }
+  };
+
+  updateIssueStructure = async (viewId: string, issue: IIssue) => {
+    let issues = this.viewIssues[viewId];
+
+    if (!issues) return null;
+
+    const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+    issues = _currentIssueId
+      ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+      : [...(issues ?? []), issue];
+
+    const orderBy = this.rootStore?.workspaceFilter?.workspaceDisplayFilters?.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.viewIssues = { ...this.viewIssues, [viewId]: issues };
+    });
+  };
+}
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..588f0a4d2
--- /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 | null) => 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 | null) => {
+    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/inbox/inbox.store.ts b/web/store/inbox/inbox.store.ts
new file mode 100644
index 000000000..b29d36855
--- /dev/null
+++ b/web/store/inbox/inbox.store.ts
@@ -0,0 +1,162 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInbox } from "types";
+
+export interface IInboxStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  inboxId: string | null;
+
+  inboxesList: {
+    [projectId: string]: IInbox[];
+  };
+  inboxDetails: {
+    [inboxId: string]: IInbox;
+  };
+
+  // actions
+  setInboxId: (inboxId: string | null) => void;
+
+  getInboxId: (projectId: string) => string | null;
+
+  fetchInboxesList: (workspaceSlug: string, projectId: string) => Promise<IInbox[]>;
+  fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
+
+  // computed
+  isInboxEnabled: boolean;
+}
+
+export class InboxStore implements IInboxStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  inboxId: string | null = null;
+
+  inboxesList: {
+    [projectId: string]: IInbox[];
+  } = {};
+  inboxDetails: {
+    [inboxId: string]: IInbox;
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      inboxId: observable.ref,
+
+      inboxesList: observable.ref,
+      inboxDetails: observable.ref,
+
+      // actions
+      setInboxId: action,
+
+      fetchInboxesList: action,
+      getInboxId: action,
+
+      // computed
+      isInboxEnabled: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+  }
+
+  get isInboxEnabled() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return false;
+
+    const projectDetails = this.rootStore.project.project_details[projectId];
+
+    if (!projectDetails) return false;
+
+    return projectDetails.inbox_view;
+  }
+
+  getInboxId = (projectId: string) => {
+    const projectDetails = this.rootStore.project.project_details[projectId];
+
+    if (!projectDetails || !projectDetails.inbox_view) return null;
+
+    return this.inboxesList[projectId]?.[0]?.id ?? null;
+  };
+
+  setInboxId = (inboxId: string | null) => {
+    runInAction(() => {
+      this.inboxId = inboxId;
+    });
+  };
+
+  fetchInboxesList = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const inboxesResponse = await this.inboxService.getInboxes(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxesList = {
+          ...this.inboxesList,
+          [projectId]: inboxesResponse,
+        };
+      });
+
+      return inboxesResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchInboxDetails = async (workspaceSlug: string, projectId: string, inboxId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const inboxDetailsResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxDetails = {
+          ...this.inboxDetails,
+          [inboxId]: inboxDetailsResponse,
+        };
+      });
+
+      return inboxDetailsResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/inbox_filters.store.ts b/web/store/inbox/inbox_filters.store.ts
new file mode 100644
index 000000000..8a7c7ff37
--- /dev/null
+++ b/web/store/inbox/inbox_filters.store.ts
@@ -0,0 +1,146 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInbox, IInboxFilterOptions, IInboxQueryParams } from "types";
+
+export interface IInboxFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  inboxFilters: {
+    [inboxId: string]: { filters: IInboxFilterOptions };
+  };
+
+  // actions
+  fetchInboxFilters: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
+  updateInboxFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    filters: Partial<IInboxFilterOptions>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: IInboxQueryParams | null;
+}
+
+export class InboxFiltersStore implements IInboxFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  inboxFilters: {
+    [inboxId: string]: { filters: IInboxFilterOptions };
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      inboxFilters: observable.ref,
+
+      // actions
+      fetchInboxFilters: action,
+      updateInboxFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+  }
+
+  get appliedFilters(): IInboxQueryParams | null {
+    const inboxId = this.rootStore.inbox.inboxId;
+
+    if (!inboxId) return null;
+
+    const filtersList = this.inboxFilters[inboxId]?.filters;
+
+    if (!filtersList) return null;
+
+    const filteredRouteParams: IInboxQueryParams = {
+      priority: filtersList.priority ? filtersList.priority.join(",") : null,
+      inbox_status: filtersList.inbox_status ? filtersList.inbox_status.join(",") : null,
+    };
+
+    return filteredRouteParams;
+  }
+
+  fetchInboxFilters = async (workspaceSlug: string, projectId: string, inboxId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const issuesResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxFilters = {
+          ...this.inboxFilters,
+          [inboxId]: issuesResponse.view_props,
+        };
+      });
+
+      return issuesResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateInboxFilters = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    filters: Partial<IInboxFilterOptions>
+  ) => {
+    const newViewProps = {
+      ...this.inboxFilters[inboxId],
+      filters: {
+        ...this.inboxFilters[inboxId]?.filters,
+        ...filters,
+      },
+    };
+
+    try {
+      runInAction(() => {
+        this.inboxFilters = {
+          ...this.inboxFilters,
+          [inboxId]: newViewProps,
+        };
+      });
+
+      await this.inboxService.patchInbox(workspaceSlug, projectId, inboxId, { view_props: newViewProps });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.fetchInboxFilters(workspaceSlug, projectId, inboxId);
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/inbox_issue_detail.store.ts b/web/store/inbox/inbox_issue_detail.store.ts
new file mode 100644
index 000000000..9085264f5
--- /dev/null
+++ b/web/store/inbox/inbox_issue_detail.store.ts
@@ -0,0 +1,280 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInboxIssue, IIssue, TInboxStatus } from "types";
+// constants
+import { INBOX_ISSUE_SOURCE } from "constants/inbox";
+
+export interface IInboxIssueDetailsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  issueDetails: {
+    [issueId: string]: IInboxIssue;
+  };
+
+  // actions
+  fetchIssueDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string
+  ) => Promise<IInboxIssue>;
+  createIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    data: Partial<IIssue>
+  ) => Promise<IInboxIssue>;
+  updateIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: Partial<IInboxIssue>
+  ) => Promise<void>;
+  updateIssueStatus: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: TInboxStatus
+  ) => Promise<void>;
+  deleteIssue: (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => Promise<void>;
+}
+
+export class InboxIssueDetailsStore implements IInboxIssueDetailsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  issueDetails: { [issueId: string]: IInboxIssue } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      issueDetails: observable.ref,
+
+      // actions
+      fetchIssueDetails: action,
+      createIssue: action,
+      updateIssueStatus: action,
+      deleteIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+  }
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const issueResponse = await this.inboxService.getInboxIssueById(workspaceSlug, projectId, inboxId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.issueDetails = {
+          ...this.issueDetails,
+          [issueId]: issueResponse,
+        };
+      });
+
+      return issueResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createIssue = async (workspaceSlug: string, projectId: string, inboxId: string, data: Partial<IIssue>) => {
+    const payload = {
+      issue: {
+        name: data.name,
+        description: data.description,
+        description_html: data.description_html,
+        priority: data.priority,
+      },
+      source: INBOX_ISSUE_SOURCE,
+    };
+
+    try {
+      const response = await this.inboxService.createInboxIssue(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        payload,
+        this.rootStore.user.currentUser ?? undefined
+      );
+
+      runInAction(() => {
+        this.issueDetails = {
+          ...this.issueDetails,
+          [response.id]: response,
+        };
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: [response, ...this.rootStore.inboxIssues.inboxIssues[inboxId]],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: Partial<IInboxIssue>
+  ) => {
+    const updatedIssue = { ...this.issueDetails[issueId], ...data };
+
+    try {
+      runInAction(() => {
+        this.issueDetails = {
+          ...this.issueDetails,
+          [issueId]: updatedIssue,
+        };
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
+            if (issue.issue_inbox[0].id === issueId) return updatedIssue;
+
+            return issue;
+          }),
+        };
+      });
+
+      await this.inboxService.patchInboxIssue(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        issueId,
+        { issue: data },
+        this.rootStore.user.currentUser ?? undefined
+      );
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+      this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
+
+      throw error;
+    }
+  };
+
+  updateIssueStatus = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: TInboxStatus
+  ) => {
+    const updatedIssue = { ...this.issueDetails[issueId] };
+    updatedIssue.issue_inbox[0] = {
+      ...updatedIssue.issue_inbox[0],
+      ...data,
+    };
+
+    try {
+      runInAction(() => {
+        this.issueDetails = {
+          ...this.issueDetails,
+          [issueId]: updatedIssue,
+        };
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
+            if (issue.issue_inbox[0].id === issueId) return updatedIssue as IInboxIssue;
+
+            return issue;
+          }),
+        };
+      });
+
+      await this.inboxService.markInboxStatus(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        issueId,
+        data,
+        this.rootStore.user.currentUser ?? undefined
+      );
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+      this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
+
+      throw error;
+    }
+  };
+
+  deleteIssue = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
+    const updatedIssues = { ...this.issueDetails };
+    delete updatedIssues[issueId];
+
+    try {
+      runInAction(() => {
+        this.issueDetails = updatedIssues;
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId]?.filter(
+            (issue) => issue.issue_inbox[0].id !== issueId
+          ),
+        };
+      });
+
+      await this.inboxService.deleteInboxIssue(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        issueId,
+        this.rootStore.user.currentUser ?? undefined
+      );
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+      this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/inbox_issues.store.ts b/web/store/inbox/inbox_issues.store.ts
new file mode 100644
index 000000000..06c7997b2
--- /dev/null
+++ b/web/store/inbox/inbox_issues.store.ts
@@ -0,0 +1,93 @@
+import { observable, action, makeObservable, runInAction, autorun } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInboxIssue } from "types";
+
+export interface IInboxIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  inboxIssues: {
+    [inboxId: string]: IInboxIssue[];
+  };
+
+  // actions
+  fetchInboxIssues: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInboxIssue[]>;
+}
+
+export class InboxIssuesStore implements IInboxIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  inboxIssues: {
+    [inboxId: string]: IInboxIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      inboxIssues: observable.ref,
+
+      // actions
+      fetchInboxIssues: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const inboxId = this.rootStore.inbox.inboxId;
+
+      if (workspaceSlug && projectId && inboxId && this.rootStore.inboxFilters.inboxFilters[inboxId])
+        this.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+    });
+  }
+
+  fetchInboxIssues = async (workspaceSlug: string, projectId: string, inboxId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const queryParams = this.rootStore.inboxFilters.appliedFilters ?? undefined;
+
+      const issuesResponse = await this.inboxService.getInboxIssues(workspaceSlug, projectId, inboxId, queryParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxIssues = {
+          ...this.inboxIssues,
+          [inboxId]: issuesResponse,
+        };
+      });
+
+      return issuesResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/index.ts b/web/store/inbox/index.ts
new file mode 100644
index 000000000..5ed415332
--- /dev/null
+++ b/web/store/inbox/index.ts
@@ -0,0 +1,4 @@
+export * from "./inbox_filters.store";
+export * from "./inbox_issue_detail.store";
+export * from "./inbox_issues.store";
+export * from "./inbox.store";
diff --git a/web/store/issue/index.ts b/web/store/issue/index.ts
new file mode 100644
index 000000000..c66d617e1
--- /dev/null
+++ b/web/store/issue/index.ts
@@ -0,0 +1,7 @@
+export * from "./issue_detail.store";
+export * from "./issue_draft.store";
+export * from "./issue_filters.store";
+export * from "./issue_kanban_view.store";
+export * from "./issue_calendar_view.store";
+export * from "./issue.store";
+export * from "./issue_quick_add.store";
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
new file mode 100644
index 000000000..b2db11fb9
--- /dev/null
+++ b/web/store/issue/issue.store.ts
@@ -0,0 +1,370 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } 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";
+import { IBlockUpdateData } from "components/gantt-chart";
+
+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;
+  getIssuesCount: number;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  removeIssueFromStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (workspaceSlug: string, issue: IIssue, payload: IBlockUpdateData) => 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,
+      getIssuesCount: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      removeIssueFromStructure: action,
+      deleteIssue: action,
+      updateGanttIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        this.rootStore.issueFilter.userFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId);
+    });
+  }
+
+  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;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  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;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    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 } };
+    });
+  };
+
+  removeIssueFromStructure = (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] ?? []).filter((i) => i?.id !== issue?.id),
+      };
+    }
+    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] ?? []).filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  updateGanttIssueStructure = async (workspaceSlug: string, issue: IIssue, payload: IBlockUpdateData) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            ...issue,
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date ?? i.start_date,
+            target_date: payload.target_date ?? i.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [issue.project]: {
+          ...this.issues[issue.project],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...issue, ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = 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].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    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].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    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_calendar_view.store.ts b/web/store/issue/issue_calendar_view.store.ts
new file mode 100644
index 000000000..881e2ee83
--- /dev/null
+++ b/web/store/issue/issue_calendar_view.store.ts
@@ -0,0 +1,88 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./issue.store";
+
+export interface IIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class IssueCalendarViewStore implements IIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  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;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      // horizontal
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _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
+      );
+    }
+
+    return;
+  };
+}
diff --git a/web/store/issue/issue_detail.store.ts b/web/store/issue/issue_detail.store.ts
new file mode 100644
index 000000000..58d4aabe7
--- /dev/null
+++ b/web/store/issue/issue_detail.store.ts
@@ -0,0 +1,748 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// services
+import { IssueService, IssueReactionService, IssueCommentService } from "services/issue";
+import { NotificationService } from "services/notification.service";
+// types
+import { RootStore } from "../root";
+import { IIssue } from "types";
+// constants
+import { groupReactionEmojis } from "constants/issue";
+// uuid
+import { v4 as uuidv4 } from "uuid";
+
+export interface IIssueDetailStore {
+  loader: boolean;
+  error: any | null;
+
+  peekId: string | null;
+  issues: {
+    [issueId: string]: IIssue;
+  };
+  issue_reactions: {
+    [issueId: string]: any;
+  };
+  issue_comments: {
+    [issueId: string]: any;
+  };
+  issue_comment_reactions: {
+    [issueId: string]: {
+      [comment_id: string]: any;
+    };
+  };
+  issue_subscription: {
+    [issueId: string]: any;
+  };
+
+  setPeekId: (issueId: string | null) => void;
+
+  // computed
+  getIssue: IIssue | null;
+  getIssueReactions: any | null;
+  getIssueComments: any | null;
+  getIssueCommentReactions: any | null;
+  getIssueSubscription: any | null;
+
+  // fetch issue details
+  fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
+  // creating issue
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  optimisticallyCreateIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  // updating issue
+  updateIssue: (workspaceId: string, projectId: string, issueId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  // deleting issue
+  deleteIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+
+  fetchPeekIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
+
+  fetchIssueReactions: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  createIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
+  removeIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
+
+  fetchIssueComments: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  createIssueComment: (workspaceSlug: string, projectId: string, issueId: string, data: any) => Promise<void>;
+  updateIssueComment: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => Promise<void>;
+  removeIssueComment: (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => Promise<void>;
+
+  fetchIssueCommentReactions: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string
+  ) => Promise<void>;
+  creationIssueCommentReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => Promise<void>;
+  removeIssueCommentReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => Promise<void>;
+
+  fetchIssueSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  createIssueSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  removeIssueSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+}
+
+export class IssueDetailStore implements IIssueDetailStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  peekId: string | null = null;
+  issues: {
+    [issueId: string]: IIssue;
+  } = {};
+  issue_reactions: {
+    [issueId: string]: any;
+  } = {};
+  issue_comments: {
+    [issueId: string]: any;
+  } = {};
+  issue_comment_reactions: {
+    [issueId: string]: any;
+  } = {};
+  issue_subscription: {
+    [issueId: string]: any;
+  } = {};
+
+  // root store
+  rootStore;
+  // service
+  issueService;
+  issueReactionService;
+  issueCommentService;
+  notificationService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      peekId: observable.ref,
+      issues: observable.ref,
+      issue_reactions: observable.ref,
+      issue_comments: observable.ref,
+      issue_comment_reactions: observable.ref,
+      issue_subscription: observable.ref,
+
+      getIssue: computed,
+      getIssueReactions: computed,
+      getIssueComments: computed,
+      getIssueCommentReactions: computed,
+      getIssueSubscription: computed,
+
+      setPeekId: action,
+
+      fetchIssueDetails: action,
+      createIssue: action,
+      optimisticallyCreateIssue: action,
+      updateIssue: action,
+      deleteIssue: action,
+
+      fetchPeekIssueDetails: action,
+
+      fetchIssueReactions: action,
+      createIssueReaction: action,
+      removeIssueReaction: action,
+
+      fetchIssueComments: action,
+      createIssueComment: action,
+      updateIssueComment: action,
+      removeIssueComment: action,
+
+      fetchIssueCommentReactions: action,
+      creationIssueCommentReaction: action,
+      removeIssueCommentReaction: action,
+
+      fetchIssueSubscription: action,
+      createIssueSubscription: action,
+      removeIssueSubscription: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+    this.issueReactionService = new IssueReactionService();
+    this.issueCommentService = new IssueCommentService();
+    this.notificationService = new NotificationService();
+  }
+
+  get getIssue() {
+    if (!this.peekId) return null;
+    const _issue = this.issues[this.peekId];
+    return _issue || null;
+  }
+
+  get getIssueReactions() {
+    if (!this.peekId) return null;
+    const _reactions = this.issue_reactions[this.peekId];
+    return _reactions || null;
+  }
+
+  get getIssueComments() {
+    if (!this.peekId) return null;
+    const _comments = this.issue_comments[this.peekId];
+    return _comments || null;
+  }
+
+  get getIssueCommentReactions() {
+    if (!this.peekId) return null;
+    const _commentReactions = this.issue_comment_reactions[this.peekId];
+    return _commentReactions || null;
+  }
+
+  get getIssueSubscription() {
+    if (!this.peekId) return null;
+    const _commentSubscription = this.issue_subscription[this.peekId];
+    return _commentSubscription || null;
+  }
+
+  setPeekId = (issueId: string | null) => (this.peekId = issueId);
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+      this.peekId = issueId;
+
+      const issueDetailsResponse = await this.issueService.retrieve(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: issueDetailsResponse,
+        };
+      });
+
+      return issueDetailsResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  optimisticallyCreateIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
+    const tempId = data?.id || uuidv4();
+
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.issues = {
+        ...this.issues,
+        [tempId]: data as IIssue,
+      };
+    });
+
+    try {
+      const response = await this.issueService.createIssue(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.issueService.createIssue(workspaceSlug, projectId, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<IIssue>) => {
+    const newIssues = { ...this.issues };
+    newIssues[issueId] = {
+      ...newIssues[issueId],
+      ...data,
+    };
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+        this.issues = newIssues;
+      });
+
+      const user = this.rootStore.user.currentUser;
+
+      if (!user) return;
+
+      const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: {
+            ...this.issues[issueId],
+            ...response,
+          },
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.fetchIssueDetails(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  deleteIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const newIssues = { ...this.issues };
+    delete newIssues[issueId];
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+        this.issues = newIssues;
+      });
+
+      const user = this.rootStore.user.currentUser;
+
+      if (!user) return;
+
+      const response = await this.issueService.deleteIssue(workspaceSlug, projectId, issueId, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.fetchIssueDetails(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  fetchPeekIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.peekId = issueId;
+
+      const issueDetailsResponse = await this.issueService.retrieve(workspaceSlug, projectId, issueId);
+      await this.fetchIssueReactions(workspaceSlug, projectId, issueId);
+      await this.fetchIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: issueDetailsResponse,
+        };
+      });
+
+      return issueDetailsResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  // reactions
+  fetchIssueReactions = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _reactions = await this.issueReactionService.listIssueReactions(workspaceSlug, projectId, issueId);
+
+      const _issue_reactions = {
+        ...this.issue_reactions,
+        [issueId]: groupReactionEmojis(_reactions),
+      };
+
+      runInAction(() => {
+        this.issue_reactions = _issue_reactions;
+      });
+    } catch (error) {
+      console.warn("error creating the issue reaction", error);
+      throw error;
+    }
+  };
+  createIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => {
+    let _currentReactions = this.getIssueReactions;
+
+    try {
+      const _reaction = await this.issueReactionService.createIssueReaction(workspaceSlug, projectId, issueId, {
+        reaction,
+      });
+
+      _currentReactions = {
+        ..._currentReactions,
+        [reaction]: [..._currentReactions[reaction], { ..._reaction }],
+      };
+
+      runInAction(() => {
+        this.issue_reactions = {
+          ...this.issue_reactions,
+          [issueId]: _currentReactions,
+        };
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.issue_reactions = {
+          ...this.issue_reactions,
+          [issueId]: _currentReactions,
+        };
+      });
+      console.warn("error creating the issue reaction", error);
+      throw error;
+    }
+  };
+  removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => {
+    let _currentReactions = this.getIssueReactions;
+
+    try {
+      const user = this.rootStore.user.currentUser;
+
+      if (user) {
+        _currentReactions = {
+          ..._currentReactions,
+          [reaction]: [..._currentReactions[reaction].filter((r: any) => r.actor !== user.id)],
+        };
+
+        runInAction(() => {
+          this.issue_reactions = {
+            ...this.issue_reactions,
+            [issueId]: _currentReactions,
+          };
+        });
+
+        await this.issueReactionService.deleteIssueReaction(workspaceSlug, projectId, issueId, reaction);
+      }
+    } catch (error) {
+      runInAction(() => {
+        this.issue_reactions = {
+          ...this.issue_reactions,
+          [issueId]: _currentReactions,
+        };
+      });
+      console.warn("error removing the issue reaction", error);
+      throw error;
+    }
+  };
+
+  // comments
+  fetchIssueComments = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _issueCommentResponse = await this.issueService.getIssueActivities(workspaceSlug, projectId, issueId);
+
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: [..._issueCommentResponse],
+      };
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error creating the issue comment", error);
+      throw error;
+    }
+  };
+  createIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const _issueCommentResponse = await this.issueCommentService.createIssueComment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        data,
+        undefined
+      );
+
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: [...this.issue_comments[issueId], _issueCommentResponse],
+      };
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error creating the issue comment", error);
+      throw error;
+    }
+  };
+  updateIssueComment = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => {
+    try {
+      const _issueCommentResponse = await this.issueCommentService.patchIssueComment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        commentId,
+        data,
+        undefined
+      );
+
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: this.issue_comments[issueId].map((comment: any) =>
+          comment.id === commentId ? _issueCommentResponse : comment
+        ),
+      };
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error updating the issue comment", error);
+      throw error;
+    }
+  };
+  removeIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    try {
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: this.issue_comments[issueId].filter((comment: any) => comment.id != commentId),
+      };
+
+      await this.issueCommentService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId, undefined);
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+
+  // comment reaction
+  fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    try {
+      const _reactions = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
+
+      const _issue_comment_reactions = {
+        ...this.issue_comment_reactions,
+        [issueId]: {
+          ...this.issue_comment_reactions[issueId],
+          [commentId]: groupReactionEmojis(_reactions),
+        },
+      };
+
+      runInAction(() => {
+        this.issue_comment_reactions = _issue_comment_reactions;
+      });
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+  creationIssueCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => {
+    let _currentReactions = this.getIssueCommentReactions;
+    _currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
+
+    try {
+      const _reaction = await this.issueReactionService.createIssueCommentReaction(
+        workspaceSlug,
+        projectId,
+        commentId,
+        {
+          reaction,
+        }
+      );
+
+      _currentReactions = {
+        ..._currentReactions,
+        [reaction]: [..._currentReactions?.[reaction], { ..._reaction }],
+      };
+
+      const _issue_comment_reactions = {
+        ...this.issue_comment_reactions,
+        [issueId]: {
+          ...this.issue_comment_reactions[issueId],
+          [commentId]: _currentReactions,
+        },
+      };
+
+      runInAction(() => {
+        this.issue_comment_reactions = _issue_comment_reactions;
+      });
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+  removeIssueCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => {
+    let _currentReactions = this.getIssueCommentReactions;
+    _currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
+
+    try {
+      const user = this.rootStore.user.currentUser;
+
+      if (user) {
+        _currentReactions = {
+          ..._currentReactions,
+          [reaction]: [..._currentReactions?.[reaction].filter((r: any) => r.actor !== user.id)],
+        };
+
+        const _issue_comment_reactions = {
+          ...this.issue_comment_reactions,
+          [issueId]: {
+            ...this.issue_comment_reactions[issueId],
+            [commentId]: _currentReactions,
+          },
+        };
+
+        runInAction(() => {
+          this.issue_comment_reactions = _issue_comment_reactions;
+        });
+
+        await this.issueReactionService.deleteIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
+      }
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+
+  // subscription
+  fetchIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _subscription = await this.notificationService.getIssueNotificationSubscriptionStatus(
+        workspaceSlug,
+        projectId,
+        issueId
+      );
+
+      const _issue_subscription = {
+        ...this.issue_subscription,
+        [issueId]: _subscription,
+      };
+
+      runInAction(() => {
+        this.issue_subscription = _issue_subscription;
+      });
+    } catch (error) {
+      console.warn("error fetching the issue subscription", error);
+      throw error;
+    }
+  };
+  createIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      await this.notificationService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
+
+      const _issue_subscription = {
+        ...this.issue_subscription,
+        [issueId]: { subscribed: true },
+      };
+
+      runInAction(() => {
+        this.issue_subscription = _issue_subscription;
+      });
+    } catch (error) {
+      console.warn("error creating the issue subscription", error);
+      throw error;
+    }
+  };
+  removeIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _issue_subscription = {
+        ...this.issue_subscription,
+        [issueId]: { subscribed: false },
+      };
+
+      runInAction(() => {
+        this.issue_subscription = _issue_subscription;
+      });
+
+      await this.notificationService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      console.warn("error removing the issue subscription", error);
+      throw error;
+    }
+  };
+}
diff --git a/web/store/draft-issue.ts b/web/store/issue/issue_draft.store.ts
similarity index 74%
rename from web/store/draft-issue.ts
rename to web/store/issue/issue_draft.store.ts
index f4247c04d..76faacb7e 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,14 +115,13 @@ 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] };
 
     // immediately update the issue in the store
     const updatedIssue = { ...this.issues[issueId], ...issueForm };
-    if (updatedIssue.assignees_list) updatedIssue.assignees = updatedIssue.assignees_list;
 
     try {
       runInAction(() => {
@@ -141,12 +129,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 +152,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 +161,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..83b7f7bad
--- /dev/null
+++ b/web/store/issue/issue_filters.store.ts
@@ -0,0 +1,249 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService, ProjectMemberService } 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;
+  // TODO: store filters and properties separately for each project
+  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: IIssueDisplayProperties = {};
+  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;
+  projectMemberService;
+  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.projectMemberService = new ProjectMemberService();
+    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,
+      mentions: this.userFilters?.mentions || 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 || undefined,
+      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.projectMemberService.projectMemberMe(workspaceSlug, projectId);
+      const issueProperties = await this.issueService.getIssueDisplayProperties(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.userFilters = memberResponse?.view_props?.filters;
+        this.userDisplayFilters = {
+          ...memberResponse?.view_props?.display_filters,
+          // add calendar display filters if not already present
+          calendar: {
+            show_weekends: memberResponse?.view_props?.display_filters?.calendar?.show_weekends || true,
+            layout: memberResponse?.view_props?.display_filters?.calendar?.layout || "month",
+          },
+        };
+        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 sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+    if (
+      newViewProps.display_filters.layout === "kanban" &&
+      newViewProps.display_filters.group_by === newViewProps.display_filters.sub_group_by
+    )
+      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: IIssueDisplayProperties = {
+      ...this.userDisplayProperties,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.userDisplayProperties = newProperties;
+      });
+
+      await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user display properties 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..827972694
--- /dev/null
+++ b/web/store/issue/issue_kanban_view.store.ts
@@ -0,0 +1,448 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./issue.store";
+
+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.issueDetail.peekId) return false;
+    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 || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      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
+      );
+    }
+  };
+
+  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 || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      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
+      );
+    }
+  };
+}
diff --git a/web/store/issue/issue_quick_add.store.ts b/web/store/issue/issue_quick_add.store.ts
new file mode 100644
index 000000000..44683b578
--- /dev/null
+++ b/web/store/issue/issue_quick_add.store.ts
@@ -0,0 +1,227 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// types
+import { RootStore } from "../root";
+import { IIssue } from "types";
+// uuid
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "./issue.store";
+
+export interface IIssueQuickAddStore {
+  loader: boolean;
+  error: any | null;
+
+  createIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    grouping: {
+      group_id: string | null;
+      sub_group_id: string | null;
+    },
+    data: Partial<IIssue>
+  ) => Promise<IIssue>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateQuickAddIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class IssueQuickAddStore implements IIssueQuickAddStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      createIssue: action,
+      updateIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  createIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    grouping: {
+      group_id: string | null;
+      sub_group_id: string | null;
+    },
+    data: Partial<IIssue>
+  ) => {
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+    });
+
+    const { group_id, sub_group_id } = grouping;
+
+    try {
+      this.updateIssueStructure(group_id, sub_group_id, data as IIssue);
+
+      const response = await this.issueService.createIssue(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      this.updateQuickAddIssueStructure(group_id, sub_group_id, {
+        ...data,
+        ...response,
+      });
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.rootStore.issue.getIssues;
+    if (!issues) return null;
+
+    if (group_id === "null") group_id = null;
+    if (sub_group_id === "null") sub_group_id = null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    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.rootStore.issue.issues = {
+        ...this.rootStore.issue.issues,
+        [projectId]: { ...this.rootStore.issue.issues[projectId], [issueType]: issues },
+      };
+    });
+  };
+
+  //   same as above function but will use temp id instead of real id
+  updateQuickAddIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.rootStore.issue.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.tempId === issue.tempId);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) =>
+              i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i
+            )
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.tempId === issue.tempId);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) =>
+                i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i
+              )
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.tempId === issue.tempId);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    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.rootStore.issue.issues = {
+        ...this.rootStore.issue.issues,
+        [projectId]: { ...this.rootStore.issue.issues[projectId], [issueType]: issues },
+      };
+    });
+  };
+}
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..3d62d3de8
--- /dev/null
+++ b/web/store/module/index.ts
@@ -0,0 +1,5 @@
+export * from "./module_filters.store";
+export * from "./module_issue_kanban_view.store";
+export * from "./module_issue_calendar_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..ae94af59e
--- /dev/null
+++ b/web/store/module/module_filters.store.ts
@@ -0,0 +1,178 @@
+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;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      this.moduleService.patchModule(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        {
+          view_props: {
+            filters: newFilters,
+          },
+        },
+        user
+      );
+    } 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..165b51b62
--- /dev/null
+++ b/web/store/module/module_issue.store.ts
@@ -0,0 +1,379 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// services
+import { ModuleService } from "services/module.service";
+// helpers
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+// types
+import { IIssue } from "types";
+import { IBlockUpdateData } from "components/gantt-chart";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+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;
+  getIssuesCount: number;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (
+    workspaceSlug: string,
+    moduleId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
+  removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>;
+}
+
+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[];
+    };
+  } = {};
+
+  // services
+  rootStore;
+  moduleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      updateGanttIssueStructure: action,
+      deleteIssue: action,
+      addIssueToModule: action,
+      removeIssueFromModule: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.moduleService = new ModuleService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const moduleId = this.rootStore.module.moduleId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        moduleId &&
+        this.rootStore.moduleFilter.moduleFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId, moduleId);
+    });
+  }
+
+  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;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  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 } };
+    });
+  };
+
+  updateGanttIssueStructure = async (
+    workspaceSlug: string,
+    moduleId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date,
+            target_date: payload.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [moduleId]: {
+          ...this.issues[moduleId],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = 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].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    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].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    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;
+
+      const params = this.rootStore?.moduleFilter?.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;
+    }
+  };
+
+  addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
+    try {
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.moduleService.addIssuesToModule(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        {
+          issues: issueIds,
+        },
+        user
+      );
+
+      this.fetchIssues(workspaceSlug, projectId, moduleId);
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  removeIssueFromModule = async (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => {
+    try {
+      await this.moduleService.removeIssueFromModule(workspaceSlug, projectId, moduleId, bridgeId);
+    } catch (error) {
+      this.fetchIssues(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/module/module_issue_calendar_view.store.ts b/web/store/module/module_issue_calendar_view.store.ts
new file mode 100644
index 000000000..3bfed3140
--- /dev/null
+++ b/web/store/module/module_issue_calendar_view.store.ts
@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+
+export interface IModuleIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ModuleIssueCalendarViewStore implements IModuleIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const moduleId = this.rootStore?.module?.moduleId;
+    const issueType: IIssueType | null = this.rootStore?.moduleIssue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.moduleIssue.getIssues;
+
+    if (workspaceSlug && projectId && moduleId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.moduleIssue.issues,
+        [moduleId]: {
+          ...this.rootStore?.moduleIssue.issues?.[moduleId],
+          [issueType]: {
+            ...this.rootStore?.moduleIssue.issues?.[moduleId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.moduleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
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..82e210f29
--- /dev/null
+++ b/web/store/module/module_issue_kanban_view.store.ts
@@ -0,0 +1,448 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "../issue/issue.store";
+
+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.issueDetail.peekId) return false;
+    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 || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      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
+      );
+    }
+  };
+
+  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 || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      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
+      );
+    }
+  };
+}
diff --git a/web/store/module/modules.store.ts b/web/store/module/modules.store.ts
new file mode 100644
index 000000000..0dc122438
--- /dev/null
+++ b/web/store/module/modules.store.ts
@@ -0,0 +1,398 @@
+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";
+import { IBlockUpdateData } from "components/gantt-chart";
+
+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: (moduleId: string | null) => void;
+
+  getModuleById: (moduleId: string) => IModule | null;
+
+  fetchModules: (workspaceSlug: string, projectId: string) => void;
+  fetchModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+
+  createModule: (workspaceSlug: string, projectId: string, data: Partial<IModule>) => Promise<IModule>;
+  updateModuleDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<IModule>
+  ) => Promise<IModule>;
+  deleteModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  addModuleToFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  removeModuleFromFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  updateModuleGanttStructure: (
+    workspaceSlug: string,
+    projectId: string,
+    module: IModule,
+    payload: IBlockUpdateData
+  ) => 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,
+      updateModuleGanttStructure: 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 = (moduleId: string | null) => {
+    this.moduleId = moduleId;
+  };
+
+  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);
+
+      runInAction(() => {
+        this.moduleDetails = {
+          ...this.moduleDetails,
+          [moduleId]: response,
+        };
+        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;
+    }
+  };
+
+  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,
+            },
+          });
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.moduleService.patchModule(workspaceSlug, projectId, moduleId, data, user);
+
+      return response;
+    } 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;
+      });
+
+      throw 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,
+          })),
+        };
+      });
+    }
+  };
+
+  updateModuleGanttStructure = (
+    workspaceSlug: string,
+    projectId: string,
+    module: IModule,
+    payload: IBlockUpdateData
+  ) => {
+    const modulesList = this.modules[projectId];
+
+    try {
+      const newModules = modulesList?.map((p: any) => ({
+        ...p,
+        ...(p.id === module.id
+          ? {
+              start_date: payload.start_date ? payload.start_date : p.start_date,
+              target_date: payload.target_date ? payload.target_date : p.target_date,
+              sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
+            }
+          : {}),
+      }));
+
+      if (payload.sort_order) {
+        const removedElement = newModules.splice(payload.sort_order.sourceIndex, 1)[0];
+        newModules.splice(payload.sort_order.destinationIndex, 0, removedElement);
+      }
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: newModules,
+        };
+      });
+
+      const newPayload: any = { ...payload };
+
+      if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+      this.updateModuleDetails(workspaceSlug, module.project, module.id, newPayload);
+    } catch (error) {
+      console.error("Failed to update module gantt structure in module store", error);
+    }
+  };
+}
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/profile-issues/index.ts b/web/store/profile-issues/index.ts
new file mode 100644
index 000000000..abfd52768
--- /dev/null
+++ b/web/store/profile-issues/index.ts
@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";
diff --git a/web/store/profile-issues/issue.store.ts b/web/store/profile-issues/issue.store.ts
new file mode 100644
index 000000000..502fdcc52
--- /dev/null
+++ b/web/store/profile-issues/issue.store.ts
@@ -0,0 +1,282 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { UserService } from "services/user.service";
+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 IProfileIssueStore {
+  loader: boolean;
+  error: any | null;
+  userId: string | null;
+  currentProfileTab: "assigned" | "created" | "subscribed" | null;
+  issues: {
+    [workspace_slug: string]: {
+      [user_id: string]: {
+        grouped: IIssueGroupedStructure;
+        groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+        ungrouped: IIssueUnGroupedStructure;
+      };
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, userId: string, type: "assigned" | "created" | "subscribed") => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class ProfileIssueStore implements IProfileIssueStore {
+  loader: boolean = true;
+  error: any | null = null;
+  userId: string | null = null;
+  currentProfileTab: "assigned" | "created" | "subscribed" | null = null;
+  issues: {
+    [workspace_slug: string]: {
+      [user_id: string]: {
+        grouped: {
+          [group_id: string]: IIssue[];
+        };
+        groupWithSubGroups: {
+          [group_id: string]: {
+            [sub_group_id: string]: IIssue[];
+          };
+        };
+        ungrouped: IIssue[];
+      };
+    };
+  } = {};
+  // service
+  userService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      currentProfileTab: observable.ref,
+      userId: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      deleteIssue: action,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.profileIssueFilters?.userDisplayFilters?.layout || null;
+    const issueGroup = this.rootStore?.profileIssueFilters?.userDisplayFilters?.group_by || null;
+    const issueSubGroup = this.rootStore?.profileIssueFilters?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueGroup
+        ? issueSubGroup
+          ? "groupWithSubGroups"
+          : "grouped"
+        : "ungrouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+    const issueType = this.getIssueType;
+    if (!workspaceSlug || !userId || !issueType) return null;
+
+    return this.issues?.[workspaceSlug]?.[userId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+
+    const issueType = this.getIssueType;
+    if (!workspaceSlug || !userId || !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?.profileIssueFilters?.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,
+        [workspaceSlug]: {
+          ...this.issues?.[workspaceSlug],
+          [userId]: {
+            ...this.issues?.[workspaceSlug]?.[userId],
+            [issueType]: issues,
+          },
+        },
+      };
+    });
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+
+    const issueType = this.getIssueType;
+
+    if (!workspaceSlug || !userId || !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].filter((i: IIssue) => i?.id !== issue?.id),
+      };
+    }
+    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].filter((i: IIssue) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i: IIssue) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [workspaceSlug]: {
+          ...this.issues?.[workspaceSlug],
+          [userId]: {
+            ...this.issues?.[workspaceSlug]?.[userId],
+            [issueType]: issues,
+          },
+        },
+      };
+    });
+  };
+
+  fetchIssues = async (
+    workspaceSlug: string,
+    userId: string,
+    type: "assigned" | "created" | "subscribed" = "assigned"
+  ) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.currentProfileTab = type;
+      this.userId = userId;
+
+      const issueType = this.getIssueType;
+
+      let params: any = this.rootStore?.profileIssueFilters?.appliedFilters;
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      if (type === "assigned") params = params ? { ...params, assignees: userId } : { assignees: userId };
+      else if (type === "created") params = params ? { ...params, created_by: userId } : { created_by: userId };
+      else if (type === "subscribed") params = params ? { ...params, subscriber: userId } : { subscriber: userId };
+
+      const issueResponse = await this.userService.getUserProfileIssues(workspaceSlug, userId, params);
+
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [workspaceSlug]: {
+            ...this.issues?.[workspaceSlug],
+            [userId]: {
+              ...this.issues?.[workspaceSlug]?.[userId],
+              [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/profile-issues/issue_filters.store.ts b/web/store/profile-issues/issue_filters.store.ts
new file mode 100644
index 000000000..6573ec447
--- /dev/null
+++ b/web/store/profile-issues/issue_filters.store.ts
@@ -0,0 +1,137 @@
+import { observable, computed, makeObservable, action, autorun, runInAction } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IProfileIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+  // computed
+  appliedFilters: TIssueParams[] | null;
+  // action
+  handleIssueFilters: (type: "userFilters" | "userDisplayFilters" | "userDisplayProperties", params: any) => void;
+}
+
+export class ProfileIssueFilterStore implements IProfileIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    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;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+      // computed
+      appliedFilters: computed,
+      // actions
+      handleIssueFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    autorun(() => {
+      if (this.userFilters || this.userDisplayFilters || this.userDisplayProperties) {
+        const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+        const userId = this.rootStore.profileIssues?.userId;
+        if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab && this.appliedFilters) {
+          console.log("autorun triggered");
+          this.rootStore.profileIssues.fetchIssues(
+            workspaceSlug,
+            userId,
+            this.rootStore.profileIssues.currentProfileTab
+          );
+        }
+      }
+    });
+  }
+
+  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,
+      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 || undefined,
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      type: this.userDisplayFilters?.type || undefined,
+      assignees: undefined,
+      created_by: undefined,
+      subscriber: undefined,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "profile_issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+
+  handleIssueFilters = (type: "userFilters" | "userDisplayFilters" | "userDisplayProperties", params: any) => {
+    if (type === "userFilters") {
+      const updatedFilters = { ...this.userFilters, ...params };
+      runInAction(() => {
+        this.userFilters = updatedFilters;
+      });
+    }
+    if (type === "userDisplayFilters") {
+      const updatedFilters = { ...this.userDisplayFilters, ...params };
+      runInAction(() => {
+        this.userDisplayFilters = updatedFilters;
+      });
+    }
+    if (type === "userDisplayProperties") {
+      const updatedFilters = { ...this.userDisplayProperties, ...params };
+      runInAction(() => {
+        this.userDisplayProperties = updatedFilters;
+      });
+    }
+  };
+}
diff --git a/web/store/project-view/index.ts b/web/store/project-view/index.ts
new file mode 100644
index 000000000..39a4c2fac
--- /dev/null
+++ b/web/store/project-view/index.ts
@@ -0,0 +1,5 @@
+export * from "./project_view_filters.store";
+export * from "./project_view_issues.store";
+export * from "./project_views.store";
+
+export * from "./project_view_issue_calendar_view.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_issue_calendar_view.store.ts b/web/store/project-view/project_view_issue_calendar_view.store.ts
new file mode 100644
index 000000000..9bce218ae
--- /dev/null
+++ b/web/store/project-view/project_view_issue_calendar_view.store.ts
@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./project_view_issues.store";
+
+export interface IProjectViewIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ProjectViewIssueCalendarViewStore implements IProjectViewIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const viewId = this.rootStore?.projectViews?.viewId;
+    const issueType: IIssueType | null = this.rootStore?.projectViewIssues?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.projectViewIssues.getIssues;
+
+    if (workspaceSlug && projectId && viewId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.projectViewIssues.viewIssues,
+        [viewId]: {
+          ...this.rootStore?.projectViewIssues.viewIssues?.[viewId],
+          [issueType]: {
+            ...this.rootStore?.projectViewIssues.viewIssues?.[viewId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.projectViewIssues.viewIssues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
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..1e699c270
--- /dev/null
+++ b/web/store/project-view/project_view_issues.store.ts
@@ -0,0 +1,379 @@
+import { observable, action, makeObservable, runInAction, computed, autorun } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+// types
+import { RootStore } from "../root";
+import { IIssue, IIssueFilterOptions } from "types";
+import { IBlockUpdateData } from "components/gantt-chart";
+
+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 IProjectViewIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+
+  // actions
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (workspaceSlug: string, viewId: string, issue: IIssue, payload: IBlockUpdateData) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  fetchViewIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    filters: IIssueFilterOptions
+  ) => Promise<any>;
+
+  // computed
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  getIssuesCount: number;
+  getIssueType: IIssueType | 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
+      updateIssueStructure: action,
+      updateGanttIssueStructure: action,
+      deleteIssue: action,
+      fetchViewIssues: action,
+
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const viewId = this.rootStore.projectViews.viewId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        viewId &&
+        this.rootStore.projectViewFilters.storedFilters[viewId] &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchViewIssues(workspaceSlug, projectId, viewId, this.rootStore.projectViewFilters.storedFilters[viewId]);
+    });
+  }
+
+  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 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 viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+
+    if (!viewId || !issueType) return null;
+
+    return this.viewIssues?.[viewId]?.[issueType] || null;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.rootStore.issue.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!viewId || !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) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i) => (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.viewIssues = { ...this.viewIssues, [viewId]: { ...this.viewIssues[viewId], [issueType]: issues } };
+    });
+  };
+
+  updateGanttIssueStructure = async (
+    workspaceSlug: string,
+    viewId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date,
+            target_date: payload.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.viewIssues = {
+        ...this.viewIssues,
+        [viewId]: {
+          ...this.viewIssues[viewId],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!viewId || !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].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    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].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.viewIssues = { ...this.viewIssues, [viewId]: { ...this.viewIssues[viewId], [issueType]: issues } };
+    });
+  };
+
+  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..76c58002d
--- /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 | null) => 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 | null) => {
+    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..35cfda8fc
--- /dev/null
+++ b/web/store/project/index.ts
@@ -0,0 +1,6 @@
+export * from "./project.store";
+export * from "./project-estimates.store";
+export * from "./project-label.store";
+export * from "./project-members.store";
+export * from "./project-publish.store";
+export * from "./project-state.store";
diff --git a/web/store/project/project-estimates.store.ts b/web/store/project/project-estimates.store.ts
new file mode 100644
index 000000000..0cb51c2dc
--- /dev/null
+++ b/web/store/project/project-estimates.store.ts
@@ -0,0 +1,141 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IEstimate, IEstimateFormData } from "types";
+// services
+import { ProjectService, ProjectEstimateService } from "services/project";
+
+export interface IProjectEstimateStore {
+  loader: boolean;
+  error: any | null;
+
+  // estimates
+  createEstimate: (workspaceSlug: string, projectId: string, data: IEstimateFormData) => Promise<IEstimate>;
+  updateEstimate: (
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: IEstimateFormData
+  ) => Promise<IEstimate>;
+  deleteEstimate: (workspaceSlug: string, projectId: string, estimateId: string) => Promise<void>;
+}
+
+export class ProjectEstimatesStore implements IProjectEstimateStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  estimateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // estimates
+      createEstimate: action,
+      updateEstimate: action,
+      deleteEstimate: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.estimateService = new ProjectEstimateService();
+  }
+
+  createEstimate = async (workspaceSlug: string, projectId: string, data: IEstimateFormData) => {
+    try {
+      const response = await this.estimateService.createEstimate(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      const responseEstimate = {
+        ...response.estimate,
+        points: response.estimate_points,
+      };
+
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: [responseEstimate, ...(this.rootStore.project.estimates?.[projectId] || [])],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create estimate from project store");
+      throw error;
+    }
+  };
+
+  updateEstimate = async (workspaceSlug: string, projectId: string, estimateId: string, data: IEstimateFormData) => {
+    const originalEstimates = this.rootStore.project.getProjectEstimateById(estimateId);
+
+    runInAction(() => {
+      this.rootStore.project.estimates = {
+        ...this.rootStore.project.estimates,
+        [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.map((estimate) =>
+          estimate.id === estimateId ? { ...estimate, ...data.estimate } : estimate
+        ),
+      };
+    });
+
+    try {
+      const response = await this.estimateService.patchEstimate(
+        workspaceSlug,
+        projectId,
+        estimateId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+      await this.rootStore.project.fetchProjectEstimates(workspaceSlug, projectId);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update estimate from project store");
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.map((estimate) =>
+            estimate.id === estimateId ? { ...estimate, ...originalEstimates } : estimate
+          ),
+        };
+      });
+      throw error;
+    }
+  };
+
+  deleteEstimate = async (workspaceSlug: string, projectId: string, estimateId: string) => {
+    const originalEstimateList = this.rootStore.project.projectEstimates || [];
+
+    runInAction(() => {
+      this.rootStore.project.estimates = {
+        ...this.rootStore.project.estimates,
+        [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.filter(
+          (estimate) => estimate.id !== estimateId
+        ),
+      };
+    });
+
+    try {
+      // deleting using api
+      await this.estimateService.deleteEstimate(workspaceSlug, projectId, estimateId, this.rootStore.user.currentUser!);
+    } catch (error) {
+      console.log("Failed to delete estimate from project store");
+      // reverting back to original estimate list
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: originalEstimateList,
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/project/project-label.store.ts b/web/store/project/project-label.store.ts
new file mode 100644
index 000000000..f4ea6892a
--- /dev/null
+++ b/web/store/project/project-label.store.ts
@@ -0,0 +1,140 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueLabels } from "types";
+// services
+import { IssueLabelService } from "services/issue";
+import { ProjectService } from "services/project";
+
+export interface IProjectLabelStore {
+  loader: boolean;
+  error: any | null;
+
+  // labels
+  createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => Promise<IIssueLabels>;
+  updateLabel: (
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: Partial<IIssueLabels>
+  ) => Promise<IIssueLabels>;
+  deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
+}
+
+export class ProjectLabelStore implements IProjectLabelStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  issueLabelService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // labels
+      createLabel: action,
+      updateLabel: action,
+      deleteLabel: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueLabelService = new IssueLabelService();
+  }
+
+  createLabel = async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => {
+    try {
+      const response = await this.issueLabelService.createIssueLabel(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: [response, ...(this.rootStore.project.labels?.[projectId] || [])],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create label from project store");
+      throw error;
+    }
+  };
+
+  updateLabel = async (workspaceSlug: string, projectId: string, labelId: string, data: Partial<IIssueLabels>) => {
+    const originalLabel = this.rootStore.project.getProjectLabelById(labelId);
+
+    runInAction(() => {
+      this.rootStore.project.labels = {
+        ...this.rootStore.project.labels,
+        [projectId]:
+          this.rootStore.project.labels?.[projectId]?.map((label) =>
+            label.id === labelId ? { ...label, ...data } : label
+          ) || [],
+      };
+    });
+
+    try {
+      const response = await this.issueLabelService.patchIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update label from project store");
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: (this.rootStore.project.labels?.[projectId] || [])?.map((label) =>
+            label.id === labelId ? { ...label, ...originalLabel } : label
+          ),
+        };
+      });
+      throw error;
+    }
+  };
+
+  deleteLabel = async (workspaceSlug: string, projectId: string, labelId: string) => {
+    const originalLabelList = this.rootStore.project.projectLabels;
+
+    runInAction(() => {
+      this.rootStore.project.labels = {
+        ...this.rootStore.project.labels,
+        [projectId]: (this.rootStore.project.labels?.[projectId] || [])?.filter((label) => label.id !== labelId),
+      };
+    });
+
+    try {
+      // deleting using api
+      await this.issueLabelService.deleteIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        this.rootStore.user.currentUser!
+      );
+    } catch (error) {
+      console.log("Failed to delete label from project store");
+      // reverting back to original label list
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: originalLabelList || [],
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/project/project-members.store.ts b/web/store/project/project-members.store.ts
new file mode 100644
index 000000000..d75bbeec6
--- /dev/null
+++ b/web/store/project/project-members.store.ts
@@ -0,0 +1,182 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IProjectMember } from "types";
+// services
+import { ProjectMemberService } from "services/project";
+
+export interface IProjectMemberStore {
+  // observables
+  members: {
+    [projectId: string]: IProjectMember[] | null; // project_id: members
+  };
+  // computed
+  projectMembers: IProjectMember[] | null;
+  // actions
+  getProjectMemberById: (memberId: string) => IProjectMember | null;
+  getProjectMemberByUserId: (memberId: string) => IProjectMember | null;
+  fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
+  removeMemberFromProject: (workspaceSlug: string, projectId: string, memberId: string) => Promise<void>;
+  updateMember: (
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<IProjectMember>
+  ) => Promise<IProjectMember>;
+
+  deleteProjectInvitation: (workspaceSlug: string, projectId: string, memberId: string) => Promise<void>;
+}
+
+export class ProjectMemberStore implements IProjectMemberStore {
+  members: {
+    [projectId: string]: IProjectMember[]; // projectId: members
+  } = {};
+
+  // root store
+  rootStore;
+  // service
+  projectMemberService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      members: observable.ref,
+      // computed
+      projectMembers: computed,
+      // action
+      getProjectMemberById: action,
+      fetchProjectMembers: action,
+      removeMemberFromProject: action,
+      updateMember: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectMemberService = new ProjectMemberService();
+  }
+
+  /**
+   * Computed value of current members in the project
+   */
+  get projectMembers() {
+    if (!this.rootStore.project.projectId) return null;
+    return this.members[this.rootStore.project.projectId] || null;
+  }
+
+  /**
+   * Get all project information using membership id
+   * @param memberId
+   * @returns
+   */
+  getProjectMemberById = (memberId: string) => {
+    if (!this.rootStore.project.projectId) return null;
+    const members = this.projectMembers;
+    if (!members) return null;
+    const memberInfo: IProjectMember | null = members.find((member) => member.id === memberId) || null;
+    return memberInfo;
+  };
+
+  /**
+   * Get user information from the project members using user id
+   * @param memberId
+   * @returns
+   */
+  getProjectMemberByUserId = (memberId: string) => {
+    if (!this.rootStore.project.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;
+  };
+
+  /**
+   * fetch the project members info using workspace id and project id
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchProjectMembers = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const membersResponse = await this.projectMemberService.fetchProjectMembers(workspaceSlug, projectId);
+      const _members = {
+        ...this.members,
+        [projectId]: membersResponse,
+      };
+      runInAction(() => {
+        this.members = _members;
+      });
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+
+  /**
+   * Remove user from the project
+   * @param workspaceSlug
+   * @param projectId
+   * @param memberId
+   */
+  removeMemberFromProject = async (workspaceSlug: string, projectId: string, memberId: string) => {
+    const originalMembers = this.projectMembers || [];
+    try {
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: this.projectMembers?.filter((member) => member.id !== memberId) || [],
+        };
+      });
+      await this.projectMemberService.deleteProjectMember(workspaceSlug, projectId, memberId);
+      await this.fetchProjectMembers(workspaceSlug, projectId);
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+      // revert back to original members in case of error
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: originalMembers,
+        };
+      });
+    }
+  };
+
+  /**
+   * Update member information
+   * @param workspaceSlug
+   * @param projectId
+   * @param memberId
+   * @param data
+   * @returns
+   */
+  updateMember = async (workspaceSlug: string, projectId: string, memberId: string, data: Partial<IProjectMember>) => {
+    const originalMembers = this.projectMembers || [];
+    try {
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: (this.projectMembers || [])?.map((member) =>
+            member.id === memberId ? { ...member, ...data } : member
+          ),
+        };
+      });
+      const response = await this.projectMemberService.updateProjectMember(workspaceSlug, projectId, memberId, data);
+      await this.fetchProjectMembers(workspaceSlug, projectId);
+      return response;
+    } catch (error) {
+      console.log("Failed to update project member from project store");
+      // revert back to original members in case of error
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: originalMembers,
+        };
+      });
+      throw error;
+    }
+  };
+
+  deleteProjectInvitation = async () => {
+    try {
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/web/store/project-publish.tsx b/web/store/project/project-publish.store.ts
similarity index 55%
rename from web/store/project-publish.tsx
rename to web/store/project/project-publish.store.ts
index b8c6f0dbe..ed427cdbe 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";
 
@@ -25,96 +25,67 @@ export interface IProjectPublishStore {
   fetchSettingsLoader: boolean;
   error: any | null;
 
-  projectPublishModal: boolean;
-  project_id: string | null;
   projectPublishSettings: IProjectPublishSettings | "not-initialized";
 
-  handleProjectModal: (project_id: string | null) => void;
-
-  getProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    user: any
-  ) => Promise<void>;
-  publishProject: (
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => Promise<void>;
+  getProjectSettingsAsync: (workspaceSlug: string, projectId: string) => Promise<void>;
+  publishProject: (workspaceSlug: string, projectId: string, data: IProjectPublishSettings) => Promise<void>;
   updateProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => Promise<void>;
-  unPublishProject: (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: any
+    workspaceSlug: string,
+    projectId: string,
+    projectPublishId: string,
+    data: IProjectPublishSettings
   ) => Promise<void>;
+  unPublishProject: (workspaceSlug: string, projectId: string, projectPublishId: string) => Promise<void>;
 }
 
-class ProjectPublishStore implements IProjectPublishStore {
+export class ProjectPublishStore implements IProjectPublishStore {
+  // states
   generalLoader: boolean = false;
   fetchSettingsLoader: boolean = false;
   error: any | null = null;
 
-  projectPublishModal: boolean = false;
+  // actions
   project_id: string | null = null;
   projectPublishSettings: IProjectPublishSettings | "not-initialized" = "not-initialized";
 
   // root store
   rootStore;
-  // service
+
+  // services
   projectPublishService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
-      // observable
+      // states
       generalLoader: observable,
       fetchSettingsLoader: observable,
       error: observable,
 
-      projectPublishModal: observable,
+      // observables
       project_id: observable,
       projectPublishSettings: observable.ref,
-      // action
-      handleProjectModal: action,
+
+      // actions
       getProjectSettingsAsync: action,
       publishProject: action,
       updateProjectSettingsAsync: action,
       unPublishProject: action,
-      // computed
     });
 
     this.rootStore = _rootStore;
-    this.projectPublishService = new ProjectServices();
+
+    // services
+    this.projectPublishService = new ProjectPublishService();
   }
 
-  handleProjectModal = (project_id: string | null = null) => {
-    if (project_id) {
-      this.projectPublishModal = !this.projectPublishModal;
-      this.project_id = project_id;
-    } else {
-      this.projectPublishModal = !this.projectPublishModal;
-      this.project_id = null;
-      this.projectPublishSettings = "not-initialized";
-    }
-  };
-
-  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string, user: any) => {
+  getProjectSettingsAsync = async (workspaceSlug: string, projectId: string) => {
     try {
-      this.fetchSettingsLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.fetchSettingsLoader = true;
+        this.error = null;
+      });
 
-      const response = await this.projectPublishService.getProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        user
-      );
+      const response = await this.projectPublishService.getProjectSettingsAsync(workspaceSlug, projectId);
 
       if (response && response.length > 0) {
         const _projectPublishSettings: IProjectPublishSettings = {
@@ -139,34 +110,31 @@ class ProjectPublishStore implements IProjectPublishStore {
           this.error = null;
         });
       } else {
-        this.projectPublishSettings = "not-initialized";
-        this.fetchSettingsLoader = false;
-        this.error = null;
+        runInAction(() => {
+          this.projectPublishSettings = "not-initialized";
+          this.fetchSettingsLoader = false;
+          this.error = null;
+        });
       }
       return response;
     } catch (error) {
-      this.fetchSettingsLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.fetchSettingsLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 
-  publishProject = async (
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => {
+  publishProject = async (workspaceSlug: string, projectId: string, data: IProjectPublishSettings) => {
     try {
-      this.generalLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
 
-      const response = await this.projectPublishService.createProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        data,
-        user
-      );
+      const response = await this.projectPublishService.createProjectSettingsAsync(workspaceSlug, projectId, data);
 
       if (response) {
         const _projectPublishSettings: IProjectPublishSettings = {
@@ -181,6 +149,20 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
+          this.rootStore.project.projects = {
+            ...this.rootStore.project.projects,
+            [workspaceSlug]: this.rootStore.project.projects[workspaceSlug].map((p) => ({
+              ...p,
+              is_deployed: p.id === projectId ? true : p.is_deployed,
+            })),
+          };
+          this.rootStore.project.project_details = {
+            ...this.rootStore.project.project_details,
+            [projectId]: {
+              ...this.rootStore.project.project_details[projectId],
+              is_deployed: true,
+            },
+          };
           this.generalLoader = false;
           this.error = null;
         });
@@ -188,29 +170,32 @@ class ProjectPublishStore implements IProjectPublishStore {
         return response;
       }
     } catch (error) {
-      this.generalLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 
   updateProjectSettingsAsync = async (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: any
+    workspaceSlug: string,
+    projectId: string,
+    projectPublishId: string,
+    data: IProjectPublishSettings
   ) => {
     try {
-      this.generalLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
 
       const response = await this.projectPublishService.updateProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        project_publish_id,
-        data,
-        user
+        workspaceSlug,
+        projectId,
+        projectPublishId,
+        data
       );
 
       if (response) {
@@ -233,42 +218,56 @@ class ProjectPublishStore implements IProjectPublishStore {
         return response;
       }
     } catch (error) {
-      this.generalLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 
-  unPublishProject = async (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: any
-  ) => {
+  unPublishProject = async (workspaceSlug: string, projectId: string, projectPublishId: string) => {
     try {
-      this.generalLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
 
       const response = await this.projectPublishService.deleteProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        project_publish_id,
-        user
+        workspaceSlug,
+        projectId,
+        projectPublishId
       );
 
       runInAction(() => {
         this.projectPublishSettings = "not-initialized";
+        this.rootStore.project.projects = {
+          ...this.rootStore.project.projects,
+          [workspaceSlug]: this.rootStore.project.projects[workspaceSlug].map((p) => ({
+            ...p,
+            is_deployed: p.id === projectId ? false : p.is_deployed,
+          })),
+        };
+        this.rootStore.project.project_details = {
+          ...this.rootStore.project.project_details,
+          [projectId]: {
+            ...this.rootStore.project.project_details[projectId],
+            is_deployed: false,
+          },
+        };
         this.generalLoader = false;
         this.error = null;
       });
 
       return response;
     } catch (error) {
-      this.generalLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 }
-
-export default ProjectPublishStore;
diff --git a/web/store/project/project-state.store.ts b/web/store/project/project-state.store.ts
new file mode 100644
index 000000000..b0b136cb2
--- /dev/null
+++ b/web/store/project/project-state.store.ts
@@ -0,0 +1,277 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IState } from "types";
+// services
+import { ProjectService, ProjectStateService } from "services/project";
+import { groupBy, orderArrayBy, groupByField } from "helpers/array.helper";
+import { orderStateGroups } from "helpers/state.helper";
+
+export interface IProjectStateStore {
+  loader: boolean;
+  error: any | null;
+
+  states: {
+    [projectId: string]: IState[]; // projectId: states
+  };
+  groupedProjectStates: { [groupId: string]: IState[] } | null;
+  projectStates: IState[] | null;
+
+  fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<IState[]>;
+  createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
+  updateState: (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => Promise<IState>;
+  deleteState: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  markStateAsDefault: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  moveStatePosition: (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    direction: "up" | "down",
+    groupIndex: number
+  ) => Promise<void>;
+}
+
+export class ProjectStateStore implements IProjectStateStore {
+  loader: boolean = false;
+  error: any | null = null;
+  states: {
+    [projectId: string]: IState[]; // projectId: states
+  } = {};
+  // root store
+  rootStore;
+  // service
+  projectService;
+  stateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      states: observable.ref,
+      // computed
+      projectStates: computed,
+      groupedProjectStates: computed,
+      // actions
+      createState: action,
+      updateState: action,
+      deleteState: action,
+      markStateAsDefault: action,
+      moveStatePosition: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.stateService = new ProjectStateService();
+  }
+
+  get groupedProjectStates() {
+    if (!this.rootStore.project.projectId) return null;
+    const states = this.states[this.rootStore.project.projectId];
+    if (!states) return null;
+    return groupByField(states, "group");
+  }
+
+  get projectStates() {
+    if (!this.rootStore.project.projectId) return null;
+    const states = this.states[this.rootStore.project.projectId];
+    if (!states) return null;
+    return states;
+  }
+
+  fetchProjectStates = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const states = await this.stateService.getStates(workspaceSlug, projectId);
+      runInAction(() => {
+        this.states = {
+          ...this.states,
+          [projectId]: states,
+        };
+      });
+      return states;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  getProjectStateById = (stateId: string) => {
+    if (!this.rootStore.project.projectId) return null;
+    const states = this.states[this.rootStore.project.projectId];
+    if (!states) return null;
+    const stateInfo: IState | null = states.find((state) => state.id === stateId) || null;
+    return stateInfo;
+  };
+
+  createState = async (workspaceSlug: string, projectId: string, data: Partial<IState>) => {
+    try {
+      const response = await this.stateService.createState(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.states = {
+          ...this.states,
+          [projectId]: [...this.states?.[projectId], response],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create state from project store");
+      throw error;
+    }
+  };
+
+  updateState = async (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => {
+    const originalStates = this.states;
+
+    try {
+      runInAction(() => {
+        this.states = {
+          ...this.states,
+          [projectId]: [
+            ...this.states?.[projectId].map((state) => {
+              if (state.id === stateId) {
+                return { ...state, ...data };
+              }
+              return state;
+            }),
+          ],
+        };
+      });
+
+      const response = await this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update state from project store");
+      runInAction(() => {
+        this.states = originalStates;
+      });
+      throw error;
+    }
+  };
+
+  deleteState = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const originalStates = this.states;
+
+    try {
+      runInAction(() => {
+        this.states = {
+          ...this.states,
+          [projectId]: [
+            ...this.states?.[projectId].filter((state) => {
+              if (state.id !== stateId) {
+                return stateId;
+              }
+            }),
+          ],
+        };
+      });
+
+      // deleting using api
+      await this.stateService.deleteState(workspaceSlug, projectId, stateId, this.rootStore.user.currentUser!);
+    } catch (error) {
+      console.log("Failed to delete state from project store");
+      // reverting back to original label list
+      runInAction(() => {
+        this.states = originalStates;
+      });
+      throw error;
+    }
+  };
+
+  markStateAsDefault = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const originalStates = this.states;
+    try {
+      const currentDefaultStateIds = this.projectStates?.filter((s) => s.default).map((state) => state.id);
+
+      runInAction(() => {
+        this.states = {
+          ...this.states,
+          [projectId]: [
+            ...this.states[projectId].map((state) => {
+              if (currentDefaultStateIds?.includes(state.id)) {
+                return { ...state, default: false };
+              } else if (state.id === stateId) {
+                return { ...state, default: true };
+              }
+              return state;
+            }),
+          ],
+        };
+      });
+
+      // updating using api
+      await this.stateService.markDefault(workspaceSlug, projectId, stateId);
+    } catch (error) {
+      console.log("Failed to mark state as default");
+      runInAction(() => {
+        this.states = originalStates;
+      });
+      throw error;
+    }
+  };
+
+  moveStatePosition = async (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    direction: "up" | "down",
+    groupIndex: number
+  ) => {
+    const SEQUENCE_GAP = 15000;
+    const originalStates = this.states;
+
+    try {
+      let newSequence = SEQUENCE_GAP;
+      const states = this.projectStates || [];
+      const selectedState = states?.find((state) => state.id === stateId);
+      const groupStates = states?.filter((state) => state.group === selectedState?.group);
+      const groupLength = groupStates.length;
+      if (direction === "up") {
+        if (groupIndex === 1) newSequence = groupStates[0].sequence - SEQUENCE_GAP;
+        else newSequence = (groupStates[groupIndex - 2].sequence + groupStates[groupIndex - 1].sequence) / 2;
+      } else {
+        if (groupIndex === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + SEQUENCE_GAP;
+        else newSequence = (groupStates[groupIndex + 2].sequence + groupStates[groupIndex + 1].sequence) / 2;
+      }
+
+      const newStateList = states?.map((state) => {
+        if (state.id === stateId) return { ...state, sequence: newSequence };
+        return state;
+      });
+
+      // updating using api
+      runInAction(() => {
+        this.states = {
+          ...this.states,
+          [projectId]: newStateList,
+        };
+      });
+
+      await this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        { sequence: newSequence },
+        this.rootStore.user.currentUser!
+      );
+    } catch (err) {
+      console.log("Failed to move state position");
+      // reverting back to old state group if api fails
+      runInAction(() => {
+        this.states = originalStates;
+      });
+    }
+  };
+}
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
new file mode 100644
index 000000000..9997de5c1
--- /dev/null
+++ b/web/store/project/project.store.ts
@@ -0,0 +1,508 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IProject, IIssueLabels, 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
+  };
+  labels: {
+    [projectId: string]: IIssueLabels[] | null; // project_id: labels
+  } | null;
+  estimates: {
+    [projectId: string]: IEstimate[] | null; // project_id: members
+  } | null;
+
+  // computed
+  searchedProjects: IProject[];
+  workspaceProjects: IProject[] | null;
+  projectLabels: IIssueLabels[] | null;
+  projectEstimates: IEstimate[] | null;
+
+  joinedProjects: IProject[];
+  favoriteProjects: IProject[];
+
+  currentProjectDetails: IProject | undefined;
+
+  // actions
+  setProjectId: (projectId: string | null) => void;
+  setSearchQuery: (query: string) => void;
+
+  getProjectById: (workspaceSlug: string, projectId: string) => IProject | null;
+  getProjectLabelById: (labelId: string) => IIssueLabels | null;
+  getProjectEstimateById: (estimateId: string) => IEstimate | null;
+
+  fetchProjects: (workspaceSlug: string) => Promise<void>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
+  fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<any>;
+
+  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: Partial<IProject>) => 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[] } = {}; // workspaceSlug: project[]
+  project_details: {
+    [projectId: string]: IProject; // projectId: project
+  } = {};
+  labels: {
+    [projectId: string]: IIssueLabels[]; // projectId: labels
+  } | null = {};
+  estimates: {
+    [projectId: string]: IEstimate[]; // projectId: 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,
+      labels: observable.ref,
+      estimates: observable.ref,
+
+      // computed
+      searchedProjects: computed,
+      workspaceProjects: computed,
+      projectLabels: computed,
+      projectEstimates: computed,
+
+      currentProjectDetails: computed,
+
+      joinedProjects: computed,
+      favoriteProjects: computed,
+
+      // action
+      setProjectId: action,
+      setSearchQuery: action,
+      fetchProjects: action,
+      fetchProjectDetails: action,
+
+      getProjectById: action,
+      getProjectLabelById: action,
+      getProjectEstimateById: action,
+
+      fetchProjectLabels: 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 workspaceProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return null;
+    const projects = this.projects[this.rootStore.workspace.workspaceSlug];
+    if (!projects) return null;
+    return projects;
+  }
+
+  get currentProjectDetails() {
+    if (!this.projectId) return;
+    return this.project_details[this.projectId];
+  }
+
+  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 projectLabels() {
+    if (!this.projectId) return null;
+    return this.labels?.[this.projectId] || null;
+  }
+
+  get projectEstimates() {
+    if (!this.projectId) return null;
+    return this.estimates?.[this.projectId] || null;
+  }
+
+  // actions
+  setProjectId = (projectId: string | null) => {
+    this.projectId = projectId;
+  };
+
+  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) => {
+    const projects = this.projects?.[workspaceSlug];
+    if (!projects) return null;
+
+    const projectInfo: IProject | null = projects.find((project) => project.id === projectId) || null;
+    return projectInfo;
+  };
+
+  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;
+  };
+
+  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;
+  };
+
+  fetchProjectLabels = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const labelResponse = await this.issueLabelService.getProjectIssueLabels(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.labels = {
+          ...this.labels,
+          [projectId]: labelResponse,
+        };
+        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 {
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: this.projects[workspaceSlug].map((project) => {
+            if (project.id === projectId) {
+              return { ...project, is_favorite: true };
+            }
+            return project;
+          }),
+        };
+      });
+      const response = await this.projectService.addProjectToFavorites(workspaceSlug, projectId);
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      await this.fetchProjects(workspaceSlug);
+      throw error;
+    }
+  };
+
+  removeProjectFromFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: this.projects[workspaceSlug].map((project) => {
+            if (project.id === projectId) {
+              return { ...project, is_favorite: false };
+            }
+            return project;
+          }),
+        };
+      });
+      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[]) => {
+    const newPermissions: { [projectId: string]: boolean } = {};
+    projectIds.forEach((projectId) => {
+      newPermissions[projectId] = true;
+    });
+
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.joinProject(workspaceSlug, projectIds);
+      await this.fetchProjects(workspaceSlug);
+
+      runInAction(() => {
+        this.rootStore.user.hasPermissionToProject = {
+          ...this.rootStore.user.hasPermissionToProject,
+          ...newPermissions,
+        };
+        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: Partial<IProject>) => {
+    try {
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: this.projects[workspaceSlug].map((p) => (p.id === projectId ? { ...p, ...data } : p)),
+        };
+        this.project_details = {
+          ...this.project_details,
+          [projectId]: { ...this.project_details[projectId], ...data },
+        };
+      });
+
+      const response = await this.projectService.updateProject(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+
+      this.fetchProjects(workspaceSlug);
+      this.fetchProjectDetails(workspaceSlug, projectId);
+      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/root.ts b/web/store/root.ts
index cdb4c8356..3b03bf9c8 100644
--- a/web/store/root.ts
+++ b/web/store/root.ts
@@ -1,29 +1,248 @@
-// 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 AppConfigStore, { IAppConfigStore } from "./app-config.store";
+import CommandPaletteStore, { ICommandPaletteStore } from "./command-palette.store";
+import UserStore, { IUserStore } from "store/user.store";
+import ThemeStore, { IThemeStore } from "store/theme.store";
+import {
+  DraftIssuesStore,
+  IIssueDetailStore,
+  IIssueFilterStore,
+  IIssueKanBanViewStore,
+  IIssueStore,
+  IssueDetailStore,
+  IssueFilterStore,
+  IssueKanBanViewStore,
+  IIssueCalendarViewStore,
+  IssueCalendarViewStore,
+  IssueStore,
+  IIssueQuickAddStore,
+  IssueQuickAddStore,
+} from "store/issue";
+import {
+  IWorkspaceFilterStore,
+  IWorkspaceStore,
+  WorkspaceFilterStore,
+  WorkspaceStore,
+  WorkspaceMemberStore,
+  IWorkspaceMemberStore,
+} from "store/workspace";
+import {
+  IProjectPublishStore,
+  IProjectStore,
+  ProjectPublishStore,
+  ProjectStore,
+  IProjectStateStore,
+  ProjectStateStore,
+  IProjectLabelStore,
+  ProjectLabelStore,
+  ProjectEstimatesStore,
+  IProjectEstimateStore,
+  ProjectMemberStore,
+  IProjectMemberStore,
+} from "store/project";
+import {
+  IModuleFilterStore,
+  IModuleIssueKanBanViewStore,
+  IModuleIssueStore,
+  IModuleStore,
+  ModuleFilterStore,
+  ModuleIssueKanBanViewStore,
+  ModuleIssueStore,
+  IModuleIssueCalendarViewStore,
+  ModuleIssueCalendarViewStore,
+  ModuleStore,
+} from "store/module";
+import {
+  CycleIssueFilterStore,
+  CycleIssueKanBanViewStore,
+  CycleIssueStore,
+  CycleStore,
+  ICycleIssueFilterStore,
+  ICycleIssueKanBanViewStore,
+  ICycleIssueCalendarViewStore,
+  CycleIssueCalendarViewStore,
+  ICycleIssueStore,
+  ICycleStore,
+} from "store/cycle";
+import {
+  IProjectViewFiltersStore,
+  IProjectViewIssuesStore,
+  IProjectViewsStore,
+  ProjectViewFiltersStore,
+  ProjectViewIssuesStore,
+  ProjectViewsStore,
+  IProjectViewIssueCalendarViewStore,
+  ProjectViewIssueCalendarViewStore,
+} from "store/project-view";
+import CalendarStore, { ICalendarStore } from "store/calendar.store";
+import {
+  GlobalViewFiltersStore,
+  GlobalViewIssuesStore,
+  GlobalViewsStore,
+  IGlobalViewFiltersStore,
+  IGlobalViewIssuesStore,
+  IGlobalViewsStore,
+} from "store/global-view";
+import {
+  ProfileIssueStore,
+  IProfileIssueStore,
+  ProfileIssueFilterStore,
+  IProfileIssueFilterStore,
+} from "store/profile-issues";
+import {
+  ArchivedIssueStore,
+  IArchivedIssueStore,
+  ArchivedIssueFilterStore,
+  IArchivedIssueFilterStore,
+  ArchivedIssueDetailStore,
+  IArchivedIssueDetailStore,
+} from "store/archived-issues";
+import { DraftIssueStore, IDraftIssueStore, DraftIssueFilterStore, IDraftIssueFilterStore } from "store/draft-issues";
+import {
+  IInboxFiltersStore,
+  IInboxIssueDetailsStore,
+  IInboxIssuesStore,
+  IInboxStore,
+  InboxFiltersStore,
+  InboxIssueDetailsStore,
+  InboxIssuesStore,
+  InboxStore,
+} from "store/inbox";
+
+import { IMentionsStore, MentionsStore } from "store/editor";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
-  user;
-  theme;
-  project: IProjectStore;
+  user: IUserStore;
+  theme: IThemeStore;
+  appConfig: IAppConfigStore;
+  commandPalette: ICommandPaletteStore;
+
+  workspace: IWorkspaceStore;
+  workspaceFilter: IWorkspaceFilterStore;
+  workspaceMember: IWorkspaceMemberStore;
+
   projectPublish: IProjectPublishStore;
-  issues: IssuesStore;
+  project: IProjectStore;
+  projectState: IProjectStateStore;
+  projectLabel: IProjectLabelStore;
+  projectEstimates: IProjectEstimateStore;
+  projectMember: IProjectMemberStore;
+
+  issue: IIssueStore;
+
+  module: IModuleStore;
+  moduleIssue: IModuleIssueStore;
+  moduleFilter: IModuleFilterStore;
+  moduleIssueKanBanView: IModuleIssueKanBanViewStore;
+  moduleIssueCalendarView: IModuleIssueCalendarViewStore;
+
+  cycle: ICycleStore;
+  cycleIssue: ICycleIssueStore;
+  cycleIssueFilter: ICycleIssueFilterStore;
+  cycleIssueKanBanView: ICycleIssueKanBanViewStore;
+  cycleIssueCalendarView: ICycleIssueCalendarViewStore;
+
+  projectViews: IProjectViewsStore;
+  projectViewIssues: IProjectViewIssuesStore;
+  projectViewFilters: IProjectViewFiltersStore;
+  projectViewIssueCalendarView: IProjectViewIssueCalendarViewStore;
+
+  issueFilter: IIssueFilterStore;
+  issueDetail: IIssueDetailStore;
+  issueKanBanView: IIssueKanBanViewStore;
+  issueCalendarView: IIssueCalendarViewStore;
   draftIssuesStore: DraftIssuesStore;
+  quickAddIssue: IIssueQuickAddStore;
+
+  calendar: ICalendarStore;
+
+  globalViews: IGlobalViewsStore;
+  globalViewIssues: IGlobalViewIssuesStore;
+  globalViewFilters: IGlobalViewFiltersStore;
+
+  profileIssues: IProfileIssueStore;
+  profileIssueFilters: IProfileIssueFilterStore;
+
+  archivedIssues: IArchivedIssueStore;
+  archivedIssueDetail: IArchivedIssueDetailStore;
+  archivedIssueFilters: IArchivedIssueFilterStore;
+
+  draftIssues: IDraftIssueStore;
+  draftIssueFilters: IDraftIssueFilterStore;
+
+  inbox: IInboxStore;
+  inboxIssues: IInboxIssuesStore;
+  inboxIssueDetails: IInboxIssueDetailsStore;
+  inboxFilters: IInboxFiltersStore;
+
+  mentionsStore: IMentionsStore;
 
   constructor() {
+    this.appConfig = new AppConfigStore(this);
+    this.commandPalette = new CommandPaletteStore(this);
     this.user = new UserStore(this);
     this.theme = new ThemeStore(this);
+
+    this.workspace = new WorkspaceStore(this);
+    this.workspaceFilter = new WorkspaceFilterStore(this);
+    this.workspaceMember = new WorkspaceMemberStore(this);
+
     this.project = new ProjectStore(this);
+    this.projectState = new ProjectStateStore(this);
+    this.projectLabel = new ProjectLabelStore(this);
+    this.projectEstimates = new ProjectEstimatesStore(this);
     this.projectPublish = new ProjectPublishStore(this);
-    this.issues = new IssuesStore(this);
+    this.projectMember = new ProjectMemberStore(this);
+
+    this.module = new ModuleStore(this);
+    this.moduleIssue = new ModuleIssueStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
+    this.moduleIssueKanBanView = new ModuleIssueKanBanViewStore(this);
+    this.moduleIssueCalendarView = new ModuleIssueCalendarViewStore(this);
+
+    this.cycle = new CycleStore(this);
+    this.cycleIssue = new CycleIssueStore(this);
+    this.cycleIssueFilter = new CycleIssueFilterStore(this);
+    this.cycleIssueKanBanView = new CycleIssueKanBanViewStore(this);
+    this.cycleIssueCalendarView = new CycleIssueCalendarViewStore(this);
+
+    this.projectViews = new ProjectViewsStore(this);
+    this.projectViewIssues = new ProjectViewIssuesStore(this);
+    this.projectViewFilters = new ProjectViewFiltersStore(this);
+    this.projectViewIssueCalendarView = new ProjectViewIssueCalendarViewStore(this);
+
+    this.issue = new IssueStore(this);
+    this.issueFilter = new IssueFilterStore(this);
+    this.issueDetail = new IssueDetailStore(this);
+    this.issueKanBanView = new IssueKanBanViewStore(this);
+    this.issueCalendarView = new IssueCalendarViewStore(this);
     this.draftIssuesStore = new DraftIssuesStore(this);
+    this.quickAddIssue = new IssueQuickAddStore(this);
+
+    this.calendar = new CalendarStore(this);
+
+    this.globalViews = new GlobalViewsStore(this);
+    this.globalViewIssues = new GlobalViewIssuesStore(this);
+    this.globalViewFilters = new GlobalViewFiltersStore(this);
+
+    this.profileIssues = new ProfileIssueStore(this);
+    this.profileIssueFilters = new ProfileIssueFilterStore(this);
+
+    this.archivedIssues = new ArchivedIssueStore(this);
+    this.archivedIssueDetail = new ArchivedIssueDetailStore(this);
+    this.archivedIssueFilters = new ArchivedIssueFilterStore(this);
+
+    this.draftIssues = new DraftIssueStore(this);
+    this.draftIssueFilters = new DraftIssueFilterStore(this);
+
+    this.inbox = new InboxStore(this);
+    this.inboxIssues = new InboxIssuesStore(this);
+    this.inboxIssueDetails = new InboxIssueDetailsStore(this);
+    this.inboxFilters = new InboxFiltersStore(this);
+
+    this.mentionsStore = new MentionsStore(this);
   }
 }
diff --git a/web/store/theme.ts b/web/store/theme.store.ts
similarity index 62%
rename from web/store/theme.ts
rename to web/store/theme.store.ts
index ecd02ec97..51189a75d 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.store.ts
@@ -2,11 +2,17 @@
 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;
+export interface IThemeStore {
+  theme: string | null;
+  sidebarCollapsed: boolean | undefined;
+
+  toggleSidebar: (collapsed?: boolean) => void;
+  setTheme: (theme: any) => void;
+}
+
+class ThemeStore implements IThemeStore {
+  sidebarCollapsed: boolean | undefined = undefined;
   theme: string | null = null;
   // root store
   rootStore;
@@ -14,10 +20,10 @@ class ThemeStore {
   constructor(_rootStore: any | null = null) {
     makeObservable(this, {
       // observable
-      sidebarCollapsed: observable,
-      theme: observable,
+      sidebarCollapsed: observable.ref,
+      theme: observable.ref,
       // action
-      setSidebarCollapsed: action,
+      toggleSidebar: action,
       setTheme: action,
       // computed
     });
@@ -25,22 +31,18 @@ class ThemeStore {
     this.rootStore = _rootStore;
     this.initialLoad();
   }
-
-  setSidebarCollapsed(collapsed: boolean | null = null) {
-    if (collapsed === null) {
-      let _sidebarCollapsed: string | boolean | null =
-        localStorage.getItem("app_sidebar_collapsed");
-      _sidebarCollapsed = _sidebarCollapsed ? (_sidebarCollapsed === "true" ? true : false) : false;
-      this.sidebarCollapsed = _sidebarCollapsed;
+  toggleSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
     } else {
       this.sidebarCollapsed = collapsed;
-      localStorage.setItem("app_sidebar_collapsed", collapsed.toString());
     }
-  }
+    localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
+  };
 
-  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..c1d91904f
--- /dev/null
+++ b/web/store/user.store.ts
@@ -0,0 +1,332 @@
+// mobx
+import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// services
+import { ProjectMemberService, ProjectService } from "services/project";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
+// interfaces
+import { IUser, IUserSettings } from "types/users";
+import { IWorkspaceMemberMe, IProjectMember, TUserProjectRole, TUserWorkspaceRole } from "types";
+import { RootStore } from "./root";
+
+export interface IUserStore {
+  loader: boolean;
+
+  isUserLoggedIn: boolean | null;
+  currentUser: IUser | null;
+  currentUserSettings: IUserSettings | null;
+
+  dashboardInfo: any;
+
+  workspaceMemberInfo: {
+    [workspaceSlug: string]: IWorkspaceMemberMe;
+  };
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean | null;
+  };
+
+  projectMemberInfo: {
+    [projectId: string]: IProjectMember;
+  };
+  hasPermissionToProject: {
+    [projectId: string]: boolean | null;
+  };
+
+  currentProjectMemberInfo: IProjectMember | undefined;
+  currentWorkspaceMemberInfo: IWorkspaceMemberMe | undefined;
+  currentProjectRole: TUserProjectRole | undefined;
+  currentWorkspaceRole: TUserWorkspaceRole | undefined;
+
+  hasPermissionToCurrentWorkspace: boolean | undefined;
+  hasPermissionToCurrentProject: boolean | undefined;
+
+  fetchCurrentUser: () => Promise<IUser>;
+  fetchCurrentUserSettings: () => Promise<IUserSettings>;
+
+  fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
+  fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<IProjectMember>;
+  fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
+
+  updateUserOnBoard: () => Promise<void>;
+  updateTourCompleted: () => Promise<void>;
+  updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>;
+  updateCurrentUserTheme: (theme: string) => Promise<IUser>;
+}
+
+class UserStore implements IUserStore {
+  loader: boolean = false;
+
+  isUserLoggedIn: boolean | null = null;
+  currentUser: IUser | null = null;
+  currentUserSettings: IUserSettings | null = null;
+
+  dashboardInfo: any = null;
+
+  workspaceMemberInfo: {
+    [workspaceSlug: string]: IWorkspaceMemberMe;
+  } = {};
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean;
+  } = {};
+
+  projectMemberInfo: {
+    [projectId: string]: IProjectMember;
+  } = {};
+  hasPermissionToProject: {
+    [projectId: string]: boolean;
+  } = {};
+  // root store
+  rootStore;
+  // services
+  userService;
+  workspaceService;
+  projectService;
+  projectMemberService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      currentUser: observable.ref,
+      currentUserSettings: observable.ref,
+      dashboardInfo: observable.ref,
+      workspaceMemberInfo: observable.ref,
+      hasPermissionToWorkspace: observable.ref,
+      projectMemberInfo: observable.ref,
+      hasPermissionToProject: observable.ref,
+      // action
+      fetchCurrentUser: action,
+      fetchCurrentUserSettings: action,
+      fetchUserDashboardInfo: action,
+      fetchUserWorkspaceInfo: action,
+      fetchUserProjectInfo: action,
+      updateUserOnBoard: action,
+      updateTourCompleted: action,
+      updateCurrentUser: action,
+      updateCurrentUserTheme: action,
+      // computed
+      currentProjectMemberInfo: computed,
+      currentWorkspaceMemberInfo: computed,
+      currentProjectRole: computed,
+      currentWorkspaceRole: computed,
+      hasPermissionToCurrentWorkspace: computed,
+      hasPermissionToCurrentProject: computed,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+    this.workspaceService = new WorkspaceService();
+    this.projectService = new ProjectService();
+    this.projectMemberService = new ProjectMemberService();
+  }
+
+  get currentWorkspaceMemberInfo() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get currentWorkspaceRole() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug]?.role;
+  }
+
+  get currentProjectMemberInfo() {
+    if (!this.rootStore.project.projectId) return;
+    return this.projectMemberInfo[this.rootStore.project.projectId];
+  }
+
+  get currentProjectRole() {
+    if (!this.rootStore.project.projectId) return;
+    return this.projectMemberInfo[this.rootStore.project.projectId]?.role;
+  }
+
+  get hasPermissionToCurrentWorkspace() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.hasPermissionToWorkspace[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get hasPermissionToCurrentProject() {
+    if (!this.rootStore.project.projectId) return;
+    return this.hasPermissionToProject[this.rootStore.project.projectId];
+  }
+
+  fetchCurrentUser = async () => {
+    try {
+      const response = await this.userService.currentUser();
+      if (response) {
+        runInAction(() => {
+          this.currentUser = response;
+          this.isUserLoggedIn = true;
+        });
+      }
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.isUserLoggedIn = false;
+      });
+      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);
+
+      runInAction(() => {
+        this.workspaceMemberInfo = {
+          ...this.workspaceMemberInfo,
+          [workspaceSlug]: response,
+        };
+        this.hasPermissionToWorkspace = {
+          ...this.hasPermissionToWorkspace,
+          [workspaceSlug]: true,
+        };
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.hasPermissionToWorkspace = {
+          ...this.hasPermissionToWorkspace,
+          [workspaceSlug]: false,
+        };
+      });
+      throw error;
+    }
+  };
+
+  fetchUserProjectInfo = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectMemberService.projectMemberMe(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.projectMemberInfo = {
+          ...this.projectMemberInfo,
+          [projectId]: response,
+        };
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: true,
+        };
+      });
+      return response;
+    } catch (error: any) {
+      runInAction(() => {
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: false,
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  updateUserOnBoard = async () => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          is_onboarded: true,
+        } as IUser;
+      });
+
+      const user = this.currentUser ?? undefined;
+
+      if (!user) return;
+
+      await this.userService.updateUserOnBoard({ userRole: user.role }, user);
+    } catch (error) {
+      this.fetchCurrentUser();
+
+      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;
+    }
+  };
+
+  updateCurrentUser = async (data: Partial<IUser>) => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          ...data,
+        } as IUser;
+      });
+
+      const response = await this.userService.updateUser(data);
+
+      runInAction(() => {
+        this.currentUser = response;
+      });
+      return response;
+    } catch (error) {
+      this.fetchCurrentUser();
+
+      throw error;
+    }
+  };
+
+  updateCurrentUserTheme = async (theme: string) => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          theme: {
+            ...this.currentUser?.theme,
+            theme,
+          },
+        } as IUser;
+      });
+      const response = await this.userService.updateUser({
+        theme: { ...this.currentUser?.theme, theme },
+      } as IUser);
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+}
+
+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..e9f90d979
--- /dev/null
+++ b/web/store/workspace/index.ts
@@ -0,0 +1,3 @@
+export * from "./workspace_filters.store";
+export * from "./workspace.store";
+export * from "./workspace-member.store";
diff --git a/web/store/workspace/workspace-member.store.ts b/web/store/workspace/workspace-member.store.ts
new file mode 100644
index 000000000..b9803d1f1
--- /dev/null
+++ b/web/store/workspace/workspace-member.store.ts
@@ -0,0 +1,295 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { RootStore } from "../root";
+// types
+import { IUser, IWorkspaceMember, IWorkspaceMemberInvitation, IWorkspaceBulkInviteFormData } from "types";
+// services
+import { WorkspaceService } from "services/workspace.service";
+
+export interface IWorkspaceMemberStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  members: { [workspaceSlug: string]: IWorkspaceMember[] }; // workspaceSlug: members[]
+  memberInvitations: { [workspaceSlug: string]: IWorkspaceMemberInvitation[] };
+  // actions
+  fetchWorkspaceMembers: (workspaceSlug: string) => Promise<void>;
+  fetchWorkspaceMemberInvitations: (workspaceSlug: string) => Promise<IWorkspaceMemberInvitation[]>;
+  updateMember: (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => Promise<void>;
+  removeMember: (workspaceSlug: string, memberId: string) => Promise<void>;
+  inviteMembersToWorkspace: (workspaceSlug: string, data: IWorkspaceBulkInviteFormData) => Promise<any>;
+  deleteWorkspaceInvitation: (workspaceSlug: string, memberId: string) => Promise<void>;
+  // computed
+  workspaceMembers: IWorkspaceMember[] | null;
+  workspaceMemberInvitations: IWorkspaceMemberInvitation[] | null;
+  workspaceMembersWithInvitations: any[] | null;
+}
+
+export class WorkspaceMemberStore implements IWorkspaceMemberStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+  // observables
+  members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
+  memberInvitations: { [workspaceSlug: string]: IWorkspaceMemberInvitation[] } = {};
+  // services
+  workspaceService;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      members: observable.ref,
+      memberInvitations: observable.ref,
+      // actions
+      fetchWorkspaceMembers: action,
+      fetchWorkspaceMemberInvitations: action,
+      updateMember: action,
+      removeMember: action,
+      inviteMembersToWorkspace: action,
+      deleteWorkspaceInvitation: action,
+      // computed
+      workspaceMembers: computed,
+      workspaceMemberInvitations: computed,
+      workspaceMembersWithInvitations: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.workspaceService = new WorkspaceService();
+  }
+
+  /**
+   * computed value of workspace members using the workspace slug from the store
+   */
+  get workspaceMembers() {
+    if (!this.rootStore.workspace.workspaceSlug) return null;
+    const members = this.members?.[this.rootStore.workspace.workspaceSlug];
+    if (!members) return null;
+    return members;
+  }
+
+  /**
+   * Computed value of workspace member invitations using workspace slug from store
+   */
+  get workspaceMemberInvitations() {
+    if (!this.rootStore.workspace.workspaceSlug) return null;
+    const invitations = this.memberInvitations?.[this.rootStore.workspace.workspaceSlug];
+    if (!invitations) return null;
+    return invitations;
+  }
+
+  /**
+   * computed value provides the members information including the invitations.
+   */
+  get workspaceMembersWithInvitations() {
+    if (!this.workspaceMembers || !this.workspaceMemberInvitations) return null;
+    return [
+      ...(this.workspaceMemberInvitations?.map((item) => ({
+        id: item.id,
+        memberId: item.id,
+        avatar: "",
+        first_name: item.email,
+        last_name: "",
+        email: item.email,
+        display_name: item.email,
+        role: item.role,
+        status: item.accepted,
+        member: false,
+        accountCreated: item.accepted,
+      })) || []),
+      ...(this.workspaceMembers?.map((item) => ({
+        id: item.id,
+        memberId: item.member?.id,
+        avatar: item.member?.avatar,
+        first_name: item.member?.first_name,
+        last_name: item.member?.last_name,
+        email: item.member?.email,
+        display_name: item.member?.display_name,
+        role: item.role,
+        status: true,
+        member: true,
+        accountCreated: true,
+      })) || []),
+    ];
+  }
+
+  /**
+   * 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.fetchWorkspaceMembers(workspaceSlug);
+
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: membersResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  /**
+   * fetching workspace member invitations
+   * @param workspaceSlug
+   * @returns
+   */
+  fetchWorkspaceMemberInvitations = async (workspaceSlug: string) => {
+    try {
+      const membersInvitations = await this.workspaceService.workspaceInvitations(workspaceSlug);
+      runInAction(() => {
+        this.memberInvitations = {
+          ...this.memberInvitations,
+          [workspaceSlug]: membersInvitations,
+        };
+      });
+      return membersInvitations;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * invite members to the workspace using emails
+   * @param workspaceSlug
+   * @param data
+   */
+  inviteMembersToWorkspace = async (workspaceSlug: string, data: IWorkspaceBulkInviteFormData) => {
+    try {
+      await this.workspaceService.inviteWorkspace(workspaceSlug, data, this.rootStore.user.currentUser as IUser);
+      await this.fetchWorkspaceMemberInvitations(workspaceSlug);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * delete the workspace invitation
+   * @param workspaceSlug
+   * @param memberId
+   */
+  deleteWorkspaceInvitation = async (workspaceSlug: string, memberId: string) => {
+    try {
+      runInAction(() => {
+        this.memberInvitations = {
+          ...this.memberInvitations,
+          [workspaceSlug]: [...this.memberInvitations[workspaceSlug].filter((inv) => inv.id !== memberId)],
+        };
+      });
+      await this.workspaceService.deleteWorkspaceInvitations(workspaceSlug.toString(), memberId);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * update workspace member using workspace slug and member id and data
+   * @param workspaceSlug
+   * @param memberId
+   * @param data
+   */
+  updateMember = async (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => {
+    const originalMembers = [...this.members?.[workspaceSlug]]; // in case of error, we will revert back to original members
+
+    const members = [...this.members?.[workspaceSlug]];
+
+    const index = members.findIndex((m) => m.id === memberId);
+    members[index] = { ...members[index], ...data };
+
+    // optimistic update
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.members = {
+        ...this.members,
+        [workspaceSlug]: members,
+      };
+    });
+
+    try {
+      await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: originalMembers,
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * remove workspace member using workspace slug and member id
+   * @param workspaceSlug
+   * @param memberId
+   */
+  removeMember = async (workspaceSlug: string, memberId: string) => {
+    const members = [...this.members?.[workspaceSlug]];
+    const originalMembers = this.members?.[workspaceSlug]; // in case of error, we will revert back to original members
+
+    // removing member from the array
+    const index = members.findIndex((m) => m.id === memberId);
+    members.splice(index, 1);
+
+    // optimistic update
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [workspaceSlug]: members,
+      };
+    });
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      await this.workspaceService.deleteWorkspaceMember(workspaceSlug, memberId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: originalMembers,
+        };
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/workspace/workspace.store.ts b/web/store/workspace/workspace.store.ts
new file mode 100644
index 000000000..1092ec33b
--- /dev/null
+++ b/web/store/workspace/workspace.store.ts
@@ -0,0 +1,302 @@
+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[] | undefined;
+  labels: { [workspaceSlug: string]: IIssueLabels[] }; // workspaceSlug: labels[]
+
+  // actions
+  setWorkspaceSlug: (workspaceSlug: string) => void;
+  getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
+  getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
+  fetchWorkspaces: () => Promise<IWorkspace[]>;
+  fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
+
+  // workspace write operations
+  createWorkspace: (data: Partial<IWorkspace>) => Promise<IWorkspace>;
+  updateWorkspace: (workspaceSlug: string, data: Partial<IWorkspace>) => Promise<IWorkspace>;
+  deleteWorkspace: (workspaceSlug: string) => Promise<void>;
+
+  // computed
+  currentWorkspace: IWorkspace | null;
+  workspacesCreateByCurrentUser: IWorkspace[] | null;
+  workspaceLabels: IIssueLabels[] | null;
+}
+
+export class WorkspaceStore implements IWorkspaceStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  workspaceSlug: string | null = null;
+  workspaces: IWorkspace[] | undefined = [];
+  projects: { [workspaceSlug: string]: IProject[] } = {}; // workspaceSlug: 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,
+
+      // actions
+      setWorkspaceSlug: action,
+      getWorkspaceBySlug: action,
+      getWorkspaceLabelById: action,
+      fetchWorkspaces: action,
+      fetchWorkspaceLabels: action,
+
+      // workspace write operations
+      createWorkspace: action,
+      updateWorkspace: action,
+      deleteWorkspace: action,
+
+      // computed
+      currentWorkspace: computed,
+      workspaceLabels: 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 all the workspaces created by the current logged in user
+   */
+  get workspacesCreateByCurrentUser() {
+    if (!this.workspaces) return null;
+
+    const user = this.rootStore.user.currentUser;
+
+    if (!user) return null;
+
+    return this.workspaces.filter((w) => w.created_by === user?.id);
+  }
+
+  /**
+   * 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 : [];
+  }
+
+  /**
+   * 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;
+      });
+
+      return workspaceResponse;
+    } catch (error) {
+      console.log("Failed to fetch user workspaces in workspace store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.workspaces = [];
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * 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;
+      });
+    }
+  };
+
+  /**
+   * create workspace using the workspace data
+   * @param data
+   */
+  createWorkspace = async (data: Partial<IWorkspace>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.workspaceService.createWorkspace(data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.workspaces = [...(this.workspaces ?? []), response];
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * update workspace using the workspace slug and new workspace data
+   * @param workspaceSlug
+   * @param data
+   */
+  updateWorkspace = async (workspaceSlug: string, data: Partial<IWorkspace>) => {
+    const newWorkspaces = this.workspaces?.map((w) => (w.slug === workspaceSlug ? { ...w, ...data } : w));
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.workspaceService.updateWorkspace(workspaceSlug, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.workspaces = newWorkspaces;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * delete workspace using the workspace slug
+   * @param workspaceSlug
+   */
+  deleteWorkspace = async (workspaceSlug: string) => {
+    const newWorkspaces = this.workspaces?.filter((w) => w.slug !== workspaceSlug);
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.workspaceService.deleteWorkspace(workspaceSlug, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.workspaces = newWorkspaces;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw 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..048ee6b07
--- /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,
+  IWorkspaceMemberMe,
+  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<IWorkspaceMemberMe>;
+  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/editor.css b/web/styles/editor.css
index 9da250dd1..85d881eeb 100644
--- a/web/styles/editor.css
+++ b/web/styles/editor.css
@@ -155,7 +155,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 }
 
-#tiptap-container {
+#editor-container {
   table {
     border-collapse: collapse;
     table-layout: fixed;
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 3de1e2c57..8f7ebe624 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -53,13 +53,15 @@
     --color-text-300: 82, 82, 82; /* tertiary text */
     --color-text-400: 163, 163, 163; /* placeholder text */
 
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
     --color-border-100: 245, 245, 245; /* subtle border= 1 */
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --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 +74,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);
 
@@ -117,6 +119,8 @@
     --color-text-300: 82, 82, 82; /* tertiary text */
     --color-text-400: 163, 163, 163; /* placeholder text */
 
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
     --color-border-100: 245, 245, 245; /* subtle border= 1 */
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --color-border-300: 212, 212, 212; /* strong border- 1 */
@@ -129,6 +133,8 @@
     --color-text-300: 58, 58, 58; /* tertiary text */
     --color-text-400: 115, 115, 115; /* placeholder text */
 
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
     --color-border-100: 34, 34, 34; /* subtle border= 1 */
     --color-border-200: 38, 38, 38; /* subtle border- 2 */
     --color-border-300: 46, 46, 46; /* strong border- 1 */
@@ -160,6 +166,8 @@
     --color-text-300: 115, 115, 115; /* tertiary text */
     --color-text-400: 82, 82, 82; /* placeholder text */
 
+    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
+
     --color-border-100: 34, 34, 34; /* subtle border= 1 */
     --color-border-200: 38, 38, 38; /* subtle border- 2 */
     --color-border-300: 46, 46, 46; /* strong border- 1 */
@@ -172,6 +180,8 @@
     --color-text-300: 212, 212, 212; /* tertiary text */
     --color-text-400: 115, 115, 115; /* placeholder text */
 
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
     --color-border-100: 245, 245, 245; /* subtle border= 1 */
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --color-border-300: 212, 212, 212; /* strong border- 1 */
@@ -211,9 +221,9 @@
     --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
 
     --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
 }
 
@@ -256,7 +266,7 @@ body {
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-background-80));
+  background-color: rgba(var(--color-scrollbar));
 }
 
 .vertical-scroll-enable::-webkit-scrollbar {
@@ -359,3 +369,127 @@ body {
 .disable-scroll {
   overflow: hidden !important;
 }
+
+.vertical-lr {
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
+div.web-view-spinner {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  display: inline-block;
+  margin-left: 50%;
+  margin-right: 50%;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+div.web-view-spinner div {
+  width: 6%;
+  height: 16%;
+  background: rgb(var(--color-text-400));
+  position: absolute;
+  left: 49%;
+  top: 43%;
+  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);
+  animation: fade 1s linear infinite;
+  -webkit-animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}
+@-webkit-keyframes fade {
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  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%);
+  animation-delay: -0.0833s;
+  -webkit-animation-delay: -0.0833s;
+}
diff --git a/web/styles/table.css b/web/styles/table.css
new file mode 100644
index 000000000..bce7e4683
--- /dev/null
+++ b/web/styles/table.css
@@ -0,0 +1,206 @@
+.tableWrapper {
+  overflow-x: auto;
+  padding: 2px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.tableWrapper table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+  margin-bottom: 3rem;
+  border: 1px solid rgba(var(--color-border-200));
+  width: 100%;
+}
+
+.tableWrapper table td,
+.tableWrapper table th {
+  min-width: 1em;
+  border: 1px solid rgba(var(--color-border-200));
+  padding: 10px 15px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  transition: background-color 0.3s ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.tableWrapper table td > *,
+.tableWrapper table th > * {
+  margin: 0 !important;
+  padding: 0.25rem 0 !important;
+}
+
+.tableWrapper table td.has-focus,
+.tableWrapper table th.has-focus {
+  box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
+}
+
+.tableWrapper table th {
+  font-weight: bold;
+  text-align: left;
+  background-color: rgba(var(--color-primary-100));
+}
+
+.tableWrapper table th * {
+  font-weight: 600;
+}
+
+.tableWrapper table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(var(--color-primary-300), 0.1);
+  pointer-events: none;
+}
+
+.tableWrapper table .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  z-index: 99;
+  background-color: rgba(var(--color-primary-400));
+  pointer-events: none;
+}
+
+.tableWrapper .tableControls {
+  position: absolute;
+}
+
+.tableWrapper .tableControls .columnsControl,
+.tableWrapper .tableControls .rowsControl {
+  transition: opacity ease-in 100ms;
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tableWrapper .tableControls .columnsControl {
+  height: 20px;
+  transform: translateY(-50%);
+}
+
+.tableWrapper .tableControls .columnsControl .columnsControlDiv {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  width: 30px;
+  height: 15px;
+}
+
+.tableWrapper .tableControls .rowsControl {
+  width: 20px;
+  transform: translateX(-50%);
+}
+
+.tableWrapper .tableControls .rowsControl .rowsControlDiv {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  height: 30px;
+  width: 15px;
+}
+
+.tableWrapper .tableControls .rowsControlDiv {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+
+.tableWrapper .tableControls .columnsControlDiv {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+.tableWrapper .tableControls .tableToolbox,
+.tableWrapper .tableControls .tableColorPickerToolbox {
+  border: 1px solid rgba(var(--color-border-300));
+  background-color: rgba(var(--color-background-100));
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  gap: 0.25rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
+  background-color: rgba(var(--color-background-100));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  padding: 0.1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
+  background-color: rgba(var(--color-background-100), 0.5);
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
+  border: 1px solid rgba(var(--color-border-300));
+  border-radius: 3px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.tableToolbox {
+  background-color: rgba(var(--color-background-100));
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
+  font-size: 0.85rem;
+  color: rgba(var(--color-text-300));
+}
+
+.resize-cursor .tableWrapper .tableControls .rowsControl,
+.tableWrapper.controls--disabled .tableControls .rowsControl,
+.resize-cursor .tableWrapper .tableControls .columnsControl,
+.tableWrapper.controls--disabled .tableControls .columnsControl {
+  opacity: 0;
+  pointer-events: none;
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 1e1e59826..05bc93bdc 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1 +1,5 @@
-module.exports = require("tailwind-config-custom/tailwind.config");
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  presets: [sharedConfig],
+};
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/app.d.ts b/web/types/app.d.ts
new file mode 100644
index 000000000..c762fb76f
--- /dev/null
+++ b/web/types/app.d.ts
@@ -0,0 +1,12 @@
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+export interface IAppConfig {
+  email_password_login: boolean;
+  google_client_id: string | null;
+  github_app_name: string | null;
+  github_client_id: string | null;
+  magic_login: boolean;
+  slack_client_id: string | null;
+}
diff --git a/web/types/cycles.d.ts b/web/types/cycles.d.ts
index 955e82222..c3c5248aa 100644
--- a/web/types/cycles.d.ts
+++ b/web/types/cycles.d.ts
@@ -1,13 +1,8 @@
-import type {
-  IUser,
-  IIssue,
-  IProject,
-  IProjectLite,
-  IWorkspace,
-  IWorkspaceLite,
-  IIssueFilterOptions,
-  IUserLite,
-} from "types";
+import type { IUser, IIssue, IProjectLite, IWorkspaceLite, IIssueFilterOptions, IUserLite } from "types";
+
+export type TCycleView = "all" | "active" | "upcoming" | "completed" | "draft";
+
+export type TCycleLayout = "list" | "board" | "gantt";
 
 export interface ICycle {
   backlog_issues: number;
@@ -16,7 +11,7 @@ export interface ICycle {
   created_at: Date;
   created_by: string;
   description: string;
-  distribution: {
+  distribution?: {
     assignees: TAssigneesDistribution[];
     completion_chart: TCompletionChartDistribution;
     labels: TLabelsDistribution[];
@@ -82,9 +77,7 @@ export interface CycleIssueResponse {
   sub_issues_count: number;
 }
 
-export type SelectCycleType =
-  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
-  | undefined;
+export type SelectCycleType = (ICycle & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
 
 export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | null;
 
diff --git a/web/types/inbox.d.ts b/web/types/inbox.d.ts
index 5c922e059..10fc37b31 100644
--- a/web/types/inbox.d.ts
+++ b/web/types/inbox.d.ts
@@ -1,23 +1,7 @@
-import { IIssue, IIssueFilterOptions, IIssueLabels } from "./issues";
+import { IIssue } from "./issues";
 import type { IProjectLite } from "./projects";
-import { IState } from "./state";
-import { IUserLite } from "./users";
 
-export interface IInboxIssue extends Partial<IIssue> {
-  bridge_id: string;
-  issue_inbox: {
-    duplicate_to: string | null;
-    snoozed_till: Date | null;
-    source: string;
-    status: -2 | -1 | 0 | 1 | 2;
-  }[];
-}
-
-export interface IInboxIssueDetail extends IIssue {
-  id: string;
-  project_detail: IProjectLite;
-  created_at: string;
-  updated_at: string;
+export interface IInboxIssue extends IIssue {
   issue_inbox: {
     duplicate_to: string | null;
     id: string;
@@ -25,11 +9,8 @@ export interface IInboxIssueDetail extends IIssue {
     source: string;
     status: -2 | -1 | 0 | 1 | 2;
   }[];
-  created_by: string;
-  updated_by: string;
-  project: string;
-  workspace: string;
 }
+
 export interface IInbox {
   id: string;
   project_detail: IProjectLite;
@@ -67,16 +48,11 @@ interface StatusDuplicate {
   duplicate_to: string;
 }
 
-export type TInboxStatus =
-  | StatusReject
-  | StatusSnoozed
-  | StatusAccepted
-  | StatusDuplicate
-  | StatePending;
+export type TInboxStatus = StatusReject | StatusSnoozed | StatusAccepted | StatusDuplicate | StatePending;
 
 export interface IInboxFilterOptions {
-  priority: string[] | null;
-  inbox_status: number[] | null;
+  priority?: string[] | null;
+  inbox_status?: number[] | null;
 }
 
 export interface IInboxQueryParams {
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..553a12ced 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";
 
@@ -86,7 +80,6 @@ export interface IIssue {
   archived_at: string;
   assignees: string[];
   assignee_details: IUser[];
-  assignees_list: string[];
   attachment_count: number;
   attachments: any[];
   issue_relations: IssueRelation[];
@@ -103,13 +96,14 @@ export interface IIssue {
   description_stripped: any;
   estimate_point: number | null;
   id: string;
+  // tempId is used for optimistic updates. It is not a part of the API response.
+  tempId?: string;
   issue_cycle: IIssueCycle | null;
   issue_link: linkDetails[];
   issue_module: IIssueModule | null;
   labels: string[];
   label_details: any[];
   is_draft: boolean;
-  labels_list: string[];
   links_list: IIssueLink[];
   link_count: number;
   module: string | null;
diff --git a/web/types/modules.d.ts b/web/types/modules.d.ts
index 709d1d300..6ec86c4f5 100644
--- a/web/types/modules.d.ts
+++ b/web/types/modules.d.ts
@@ -10,13 +10,7 @@ import type {
   linkDetails,
 } from "types";
 
-export type TModuleStatus =
-  | "backlog"
-  | "planned"
-  | "in-progress"
-  | "paused"
-  | "completed"
-  | "cancelled";
+export type TModuleStatus = "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled";
 
 export interface IModule {
   backlog_issues: number;
@@ -38,7 +32,6 @@ export interface IModule {
   link_module: linkDetails[];
   links_list: ModuleLink[];
   members: string[];
-  members_list: string[];
   members_detail: IUserLite[];
   is_favorite: boolean;
   name: string;
@@ -80,8 +73,6 @@ export type ModuleLink = {
   url: string;
 };
 
-export type SelectModuleType =
-  | (IModule & { actionType: "edit" | "delete" | "create-issue" })
-  | undefined;
+export type SelectModuleType = (IModule & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
 
 export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | undefined;
diff --git a/web/types/pages.d.ts b/web/types/pages.d.ts
index 6be966f7c..f7850d11d 100644
--- a/web/types/pages.d.ts
+++ b/web/types/pages.d.ts
@@ -14,7 +14,6 @@ export interface IPage {
   is_favorite: boolean;
   label_details: IIssueLabels[];
   labels: string[];
-  labels_list: string[];
   name: string;
   owned_by: string;
   project: string;
diff --git a/web/types/projects.d.ts b/web/types/projects.d.ts
index 58ed8daea..129b0bb3b 100644
--- a/web/types/projects.d.ts
+++ b/web/types/projects.d.ts
@@ -1,15 +1,6 @@
-import type {
-  IIssueFilterOptions,
-  IUserLite,
-  IWorkspace,
-  IWorkspaceLite,
-  IUserMemberLite,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssueViewOptions,
-  TStateGroups,
-  IProjectViewProps,
-} from ".";
+import type { IUserLite, IWorkspace, IWorkspaceLite, IUserMemberLite, TStateGroups, IProjectViewProps } from ".";
+
+export type TUserProjectRole = 5 | 10 | 15 | 20;
 
 export interface IProject {
   archive_in: number;
@@ -43,7 +34,8 @@ export interface IProject {
   is_deployed: boolean;
   is_favorite: boolean;
   is_member: boolean;
-  member_role: 5 | 10 | 15 | 20 | null;
+  member_role: TUserProjectRole | null;
+  members: IProjectMemberLite[];
   issue_views_view: boolean;
   module_view: boolean;
   name: string;
@@ -51,7 +43,6 @@ export interface IProject {
   page_view: boolean;
   project_lead: IUserLite | string | null;
   sort_order: number | null;
-  slug: string;
   total_cycles: number;
   total_members: number;
   total_modules: number;
@@ -73,13 +64,20 @@ type ProjectPreferences = {
   };
 };
 
+export interface IProjectMemberLite {
+  id: string;
+  member__avatar: string;
+  member__display_name: string;
+  member_id: string;
+}
+
 export interface IProjectMember {
   id: string;
   member: IUserMemberLite;
   project: IProjectLite;
   workspace: IWorkspaceLite;
   comment: string;
-  role: 5 | 10 | 15 | 20;
+  role: TUserProjectRole;
 
   preferences: ProjectPreferences;
 
@@ -103,7 +101,7 @@ export interface IProjectMemberInvitation {
   token: string;
   message: string;
   responded_at: Date;
-  role: 5 | 10 | 15 | 20;
+  role: TUserProjectRole;
 
   created_at: Date;
   updated_at: Date;
@@ -111,8 +109,8 @@ export interface IProjectMemberInvitation {
   updated_by: string;
 }
 
-export interface IProjectBulkInviteFormData {
-  members: { role: 5 | 10 | 15 | 20; member_id: string }[];
+export interface IProjectBulkAddFormData {
+  members: { role: TUserProjectRole; member_id: string }[];
 }
 
 export interface IGithubRepository {
diff --git a/web/types/users.d.ts b/web/types/users.d.ts
index 8440922d1..2c93ff764 100644
--- a/web/types/users.d.ts
+++ b/web/types/users.d.ts
@@ -1,47 +1,47 @@
-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;
-
-  [...rest: string]: any;
+  username: string;
+  theme: IUserTheme;
 }
 
-export interface ICustomTheme {
+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 IUserTheme {
   background: string;
   text: string;
   primary: string;
@@ -52,22 +52,11 @@ 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;
   display_name: string;
+  email?: string;
   first_name: string;
   readonly id: string;
   is_bot: boolean;
@@ -75,7 +64,7 @@ export interface IUserLite {
 }
 
 export interface IUserMemberLite extends IUserLite {
-  email: string;
+  email?: string;
 }
 
 export interface IUserActivity {
@@ -166,32 +155,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..c8c47576b 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"
@@ -10,6 +8,7 @@ export type TIssueGroupByOptions =
   | "state_detail.group"
   | "project"
   | "assignees"
+  | "mentions"
   | null;
 
 export type TIssueOrderByOptions =
@@ -31,28 +30,82 @@ export type TIssueOrderByOptions =
   | "estimate_point"
   | "-estimate_point"
   | "start_date"
-  | "-start_date";
+  | "-start_date"
+  | "link_count"
+  | "-link_count"
+  | "attachment_count"
+  | "-attachment_count"
+  | "sub_issues_count"
+  | "-sub_issues_count";
+
+export type TIssueTypeFilters = "active" | "backlog" | null;
+
+export type TIssueExtraOptions = "show_empty_groups" | "sub_issue";
+
+export type TIssueParams =
+  | "priority"
+  | "state_group"
+  | "state"
+  | "assignees"
+  | "mentions"
+  | "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;
+  mentions?: 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 {
@@ -98,10 +151,10 @@ export interface IProjectViewProps {
 export interface IWorkspaceViewProps {
   filters: IIssueFilterOptions;
   display_filters: IIssueDisplayFilterOptions | undefined;
-  display_properties: Properties;
+  display_properties: IIssueDisplayProperties;
 }
 export interface IWorkspaceGlobalViewProps {
   filters: IWorkspaceIssueFilterOptions;
   display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
-  display_properties: Properties;
+  display_properties: IIssueDisplayProperties;
 }
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/web/types/workspace.d.ts b/web/types/workspace.d.ts
index 66e1e1273..1b9b924f4 100644
--- a/web/types/workspace.d.ts
+++ b/web/types/workspace.d.ts
@@ -1,4 +1,6 @@
-import type { IProjectMember, IUser, IUserMemberLite, IWorkspaceViewProps } from "types";
+import type { IProjectMember, IUser, IUserLite, IUserMemberLite, IWorkspaceViewProps } from "types";
+
+export type TUserWorkspaceRole = 5 | 10 | 15 | 20;
 
 export interface IWorkspace {
   readonly id: string;
@@ -30,13 +32,13 @@ export interface IWorkspaceMemberInvitation {
   token: string;
   message: string;
   responded_at: Date;
-  role: 5 | 10 | 15 | 20;
+  role: TUserWorkspaceRole;
   created_by_detail: IUser;
   workspace: IWorkspace;
 }
 
 export interface IWorkspaceBulkInviteFormData {
-  emails: { email: string; role: 5 | 10 | 15 | 20 }[];
+  emails: { email: string; role: TUserWorkspaceRole }[];
 }
 
 export type Properties = {
@@ -56,16 +58,29 @@ export type Properties = {
 };
 
 export interface IWorkspaceMember {
-  readonly id: string;
-  workspace: IWorkspace;
-  member: IUserMemberLite;
-  role: 5 | 10 | 15 | 20;
   company_role: string | null;
-  view_props: IWorkspaceViewProps;
   created_at: Date;
-  updated_at: Date;
   created_by: string;
+  id: string;
+  member: IUserLite;
+  role: TUserWorkspaceRole;
+  updated_at: Date;
   updated_by: string;
+  workspace: IWorkspaceLite;
+}
+
+export interface IWorkspaceMemberMe {
+  company_role: string | null;
+  created_at: Date;
+  created_by: string;
+  default_props: IWorkspaceViewProps;
+  id: string;
+  member: string;
+  role: TUserWorkspaceRole;
+  updated_at: Date;
+  updated_by: string;
+  view_props: IWorkspaceViewProps;
+  workspace: string;
 }
 
 export interface ILastActiveWorkspaceDetails {
diff --git a/yarn.lock b/yarn.lock
index 9d18f4cee..f25d1cf7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -44,38 +44,38 @@
     "@babel/highlight" "^7.22.13"
     chalk "^2.4.2"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730"
-  integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.2.tgz#6a12ced93455827037bfb5ed8492820d60fc32cc"
+  integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==
 
 "@babel/core@^7.11.1":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.17.tgz#2f9b0b395985967203514b24ee50f9fd0639c866"
-  integrity sha512-2EENLmhpwplDux5PSsZnSbnSkB3tZ6QTksgO25xwEL7pIDcNOMhF5v/s6RzwjMZzZzw9Ofc30gHv5ChCC8pifQ==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94"
+  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.22.15"
+    "@babel/generator" "^7.23.0"
     "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-module-transforms" "^7.22.17"
-    "@babel/helpers" "^7.22.15"
-    "@babel/parser" "^7.22.16"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.0"
     "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.22.17"
-    "@babel/types" "^7.22.17"
-    convert-source-map "^1.7.0"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.15.tgz#1564189c7ec94cb8f77b5e8a90c4d200d21b2339"
-  integrity sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA==
+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
   dependencies:
-    "@babel/types" "^7.22.15"
+    "@babel/types" "^7.23.0"
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
@@ -129,10 +129,10 @@
     regexpu-core "^5.3.1"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7"
-  integrity sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==
+"@babel/helper-define-polyfill-provider@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz#a71c10f7146d809f4a256c373f462d9bba8cf6ba"
+  integrity sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==
   dependencies:
     "@babel/helper-compilation-targets" "^7.22.6"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -140,18 +140,18 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
-"@babel/helper-environment-visitor@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
-  integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
-"@babel/helper-function-name@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
-  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/template" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
@@ -160,12 +160,12 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.22.5":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.15.tgz#b95a144896f6d491ca7863576f820f3628818621"
-  integrity sha512-qLNsZbgrNh0fDQBCPocSL8guki1hcPvltGDv/NxvUoABwFq7GkKSu1nRXeJkVZc+wJvne2E0RKQz+2SQrz6eAA==
+"@babel/helper-member-expression-to-functions@^7.22.15":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
   dependencies:
-    "@babel/types" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
 "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
   version "7.22.15"
@@ -174,16 +174,16 @@
   dependencies:
     "@babel/types" "^7.22.15"
 
-"@babel/helper-module-transforms@^7.22.15", "@babel/helper-module-transforms@^7.22.17", "@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.22.9":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.17.tgz#7edf129097a51ccc12443adbc6320e90eab76693"
-  integrity sha512-XouDDhQESrLHTpnBtCKExJdyY4gJCdrvH2Pyv8r8kovX2U8G0dRUOT45T9XlbLtuu9CLXP15eusnkprhoPV5iQ==
+"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e"
+  integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-module-imports" "^7.22.15"
     "@babel/helper-simple-access" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/helper-validator-identifier" "^7.22.15"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
 "@babel/helper-optimise-call-expression@^7.22.5":
   version "7.22.5"
@@ -197,22 +197,22 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
   integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
 
-"@babel/helper-remap-async-to-generator@^7.22.5", "@babel/helper-remap-async-to-generator@^7.22.9":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.17.tgz#dabaa50622b3b4670bd6546fc8db23eb12d89da0"
-  integrity sha512-bxH77R5gjH3Nkde6/LuncQoLaP16THYPscurp1S8z7S9ZgezCyV3G8Hc+TZiCmY8pz4fp8CvKSgtJMW0FkLAxA==
+"@babel/helper-remap-async-to-generator@^7.22.20", "@babel/helper-remap-async-to-generator@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
+  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-wrap-function" "^7.22.17"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-wrap-function" "^7.22.20"
 
 "@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz#cbdc27d6d8d18cd22c81ae4293765a5d9afd0779"
-  integrity sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
+  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-member-expression-to-functions" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
     "@babel/helper-optimise-call-expression" "^7.22.5"
 
 "@babel/helper-simple-access@^7.22.5":
@@ -241,47 +241,47 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
   integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
 
-"@babel/helper-validator-identifier@^7.22.15", "@babel/helper-validator-identifier@^7.22.5":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz#601fa28e4cc06786c18912dca138cec73b882044"
-  integrity sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
 "@babel/helper-validator-option@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
   integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
 
-"@babel/helper-wrap-function@^7.22.17":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.17.tgz#222ac3ff9cc8f9b617cc1e5db75c0b538e722801"
-  integrity sha512-nAhoheCMlrqU41tAojw9GpVEKDlTS8r3lzFmF0lP52LwblCPbuFSO7nGIZoIcoU5NIm1ABrna0cJExE4Ay6l2Q==
+"@babel/helper-wrap-function@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
+  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
   dependencies:
     "@babel/helper-function-name" "^7.22.5"
     "@babel/template" "^7.22.15"
-    "@babel/types" "^7.22.17"
+    "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.15.tgz#f09c3df31e86e3ea0b7ff7556d85cdebd47ea6f1"
-  integrity sha512-7pAjK0aSdxOwR+CcYAqgWOGy5dcfvzsTIfFTb2odQqW47MDfv14UaJDY6eng8ylM2EaeKXdxaSWESbkmaQHTmw==
+"@babel/helpers@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
+  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
   dependencies:
     "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.22.15"
-    "@babel/types" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
 
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.22.13":
-  version "7.22.13"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.13.tgz#9cda839e5d3be9ca9e8c26b6dd69e7548f0cbf16"
-  integrity sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.22.15", "@babel/parser@^7.22.16":
-  version "7.22.16"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95"
-  integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15":
   version "7.22.15"
@@ -438,14 +438,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-async-generator-functions@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.15.tgz#3b153af4a6b779f340d5b80d3f634f55820aefa3"
-  integrity sha512-jBm1Es25Y+tVoTi5rfd5t1KLmL8ogLKpXszboWOTTtGFGz2RKnQe2yn7HbZ+kb/B8N0FVSGQo874NSlOU1T4+w==
+"@babel/plugin-transform-async-generator-functions@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.2.tgz#054afe290d64c6f576f371ccc321772c8ea87ebb"
+  integrity sha512-BBYVGxbDVHfoeXbOwcagAkOQAm9NxoTdMGfTqghu1GrvadSaw6iW3Je6IcL5PNOw8VwjxqBECXy50/iCQSY/lQ==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-remap-async-to-generator" "^7.22.9"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
 "@babel/plugin-transform-async-to-generator@^7.22.5":
@@ -464,10 +464,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-block-scoping@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.15.tgz#494eb82b87b5f8b1d8f6f28ea74078ec0a10a841"
-  integrity sha512-G1czpdJBZCtngoK1sJgloLiOHUnkb/bLZwqVZD8kXmq0ZnVfTTWUcs9OWtp0mBtYJ+4LQY1fllqBkOIPhXmFmw==
+"@babel/plugin-transform-block-scoping@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.0.tgz#8744d02c6c264d82e1a4bc5d2d501fd8aff6f022"
+  integrity sha512-cOsrbmIOXmf+5YbL99/S49Y3j46k/T16b9ml8bm9lP6N9US5iQ2yBK7gpui1pg0V/WMcXdkfKbTb7HXq9u+v4g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -511,10 +511,10 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/template" "^7.22.5"
 
-"@babel/plugin-transform-destructuring@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.15.tgz#e7404ea5bb3387073b9754be654eecb578324694"
-  integrity sha512-HzG8sFl1ZVGTme74Nw+X01XsUTqERVQ6/RLHo3XjGRzm7XD6QTtfS3NJotVgCGy8BzkDqRjRBD8dAyJn5TuvSQ==
+"@babel/plugin-transform-destructuring@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.0.tgz#6447aa686be48b32eaf65a73e0e2c0bd010a266c"
+  integrity sha512-vaMdgNXFkYrB+8lbgniSYWHsgqK5gjaMNcc84bMIOMRLH0L9AqYq3hwMdvnyqj1OPqea8UtjPEuS/DCenah1wg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -603,32 +603,32 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-modules-amd@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz#4e045f55dcf98afd00f85691a68fc0780704f526"
-  integrity sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==
+"@babel/plugin-transform-modules-amd@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.0.tgz#05b2bc43373faa6d30ca89214731f76f966f3b88"
+  integrity sha512-xWT5gefv2HGSm4QHtgc1sYPbseOyf+FFDo2JbpE25GWl5BqTGO9IMwTYJRoIdjsF85GE+VegHxSCUt5EvoYTAw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-modules-commonjs@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.15.tgz#b11810117ed4ee7691b29bd29fd9f3f98276034f"
-  integrity sha512-jWL4eh90w0HQOTKP2MoXXUpVxilxsB2Vl4ji69rSjS3EcZ/v4sBmn+A3NpepuJzBhOaEBbR7udonlHHn5DWidg==
+"@babel/plugin-transform-modules-commonjs@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.0.tgz#b3dba4757133b2762c00f4f94590cf6d52602481"
+  integrity sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.22.11":
-  version "7.22.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz#3386be5875d316493b517207e8f1931d93154bb1"
-  integrity sha512-rIqHmHoMEOhI3VkVf5jQ15l539KrwhzqcBO6wdCNWPWc/JWt9ILNYNUssbRpeq0qWns8svuw8LnMNCvWBIJ8wA==
+"@babel/plugin-transform-modules-systemjs@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.0.tgz#77591e126f3ff4132a40595a6cccd00a6b60d160"
+  integrity sha512-qBej6ctXZD2f+DhlOC9yO47yEYgUh5CZNz/aBoH4j/3NOlRfJXJbY7xDQCqQVf9KbrqGzIWER1f23doHGrIHFg==
   dependencies:
     "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.22.9"
+    "@babel/helper-module-transforms" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
 "@babel/plugin-transform-modules-umd@^7.22.5":
   version "7.22.5"
@@ -696,10 +696,10 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-transform-optional-chaining@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.15.tgz#d7a5996c2f7ca4ad2ad16dbb74444e5c4385b1ba"
-  integrity sha512-ngQ2tBhq5vvSJw2Q2Z9i7ealNkpDMU0rGWnHPKqRZO0tzZ5tlaoz4hDvhXioOoaE0X2vfNss1djwg0DXlfu30A==
+"@babel/plugin-transform-optional-chaining@^7.22.15", "@babel/plugin-transform-optional-chaining@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.0.tgz#73ff5fc1cf98f542f09f29c0631647d8ad0be158"
+  integrity sha512-sBBGXbLJjxTzLBF5rFWaikMnOGOk/BmK6vVByIdEggZ7Vn6CvWXZyRkkLFK6WE0IF8jSliyOkUN6SScFgzCM0g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
@@ -820,11 +820,11 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/preset-env@^7.11.0":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.15.tgz#142716f8e00bc030dae5b2ac6a46fbd8b3e18ff8"
-  integrity sha512-tZFHr54GBkHk6hQuVA8w4Fmq+MSPsfvMG0vPnOYyTnJpyfMqybL8/MbNCPRT9zc2KBO2pe4tq15g6Uno4Jpoag==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.2.tgz#1f22be0ff0e121113260337dbc3e58fafce8d059"
+  integrity sha512-BW3gsuDD+rvHL2VO2SjAUNTBe5YrjsTiDyqamPDWY723na3/yPQ65X5oQkFVJZ0o50/2d+svm1rkPoJeR1KxVQ==
   dependencies:
-    "@babel/compat-data" "^7.22.9"
+    "@babel/compat-data" "^7.23.2"
     "@babel/helper-compilation-targets" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-validator-option" "^7.22.15"
@@ -850,15 +850,15 @@
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
     "@babel/plugin-transform-arrow-functions" "^7.22.5"
-    "@babel/plugin-transform-async-generator-functions" "^7.22.15"
+    "@babel/plugin-transform-async-generator-functions" "^7.23.2"
     "@babel/plugin-transform-async-to-generator" "^7.22.5"
     "@babel/plugin-transform-block-scoped-functions" "^7.22.5"
-    "@babel/plugin-transform-block-scoping" "^7.22.15"
+    "@babel/plugin-transform-block-scoping" "^7.23.0"
     "@babel/plugin-transform-class-properties" "^7.22.5"
     "@babel/plugin-transform-class-static-block" "^7.22.11"
     "@babel/plugin-transform-classes" "^7.22.15"
     "@babel/plugin-transform-computed-properties" "^7.22.5"
-    "@babel/plugin-transform-destructuring" "^7.22.15"
+    "@babel/plugin-transform-destructuring" "^7.23.0"
     "@babel/plugin-transform-dotall-regex" "^7.22.5"
     "@babel/plugin-transform-duplicate-keys" "^7.22.5"
     "@babel/plugin-transform-dynamic-import" "^7.22.11"
@@ -870,9 +870,9 @@
     "@babel/plugin-transform-literals" "^7.22.5"
     "@babel/plugin-transform-logical-assignment-operators" "^7.22.11"
     "@babel/plugin-transform-member-expression-literals" "^7.22.5"
-    "@babel/plugin-transform-modules-amd" "^7.22.5"
-    "@babel/plugin-transform-modules-commonjs" "^7.22.15"
-    "@babel/plugin-transform-modules-systemjs" "^7.22.11"
+    "@babel/plugin-transform-modules-amd" "^7.23.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.23.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.23.0"
     "@babel/plugin-transform-modules-umd" "^7.22.5"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
     "@babel/plugin-transform-new-target" "^7.22.5"
@@ -881,7 +881,7 @@
     "@babel/plugin-transform-object-rest-spread" "^7.22.15"
     "@babel/plugin-transform-object-super" "^7.22.5"
     "@babel/plugin-transform-optional-catch-binding" "^7.22.11"
-    "@babel/plugin-transform-optional-chaining" "^7.22.15"
+    "@babel/plugin-transform-optional-chaining" "^7.23.0"
     "@babel/plugin-transform-parameters" "^7.22.15"
     "@babel/plugin-transform-private-methods" "^7.22.5"
     "@babel/plugin-transform-private-property-in-object" "^7.22.11"
@@ -898,10 +898,10 @@
     "@babel/plugin-transform-unicode-regex" "^7.22.5"
     "@babel/plugin-transform-unicode-sets-regex" "^7.22.5"
     "@babel/preset-modules" "0.1.6-no-external-plugins"
-    "@babel/types" "^7.22.15"
-    babel-plugin-polyfill-corejs2 "^0.4.5"
-    babel-plugin-polyfill-corejs3 "^0.8.3"
-    babel-plugin-polyfill-regenerator "^0.5.2"
+    "@babel/types" "^7.23.0"
+    babel-plugin-polyfill-corejs2 "^0.4.6"
+    babel-plugin-polyfill-corejs3 "^0.8.5"
+    babel-plugin-polyfill-regenerator "^0.5.3"
     core-js-compat "^3.31.0"
     semver "^6.3.1"
 
@@ -919,10 +919,10 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
-  integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -935,29 +935,29 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
-"@babel/traverse@^7.22.15", "@babel/traverse@^7.22.17":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.17.tgz#b23c203ab3707e3be816043081b4a994fcacec44"
-  integrity sha512-xK4Uwm0JnAMvxYZxOVecss85WxTEIbTa7bnGyf/+EgCL5Zt3U7htUpEOWv9detPlamGKuRzCqw74xVglDWpPdg==
+"@babel/traverse@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
   dependencies:
     "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.22.15"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-function-name" "^7.22.5"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.22.16"
-    "@babel/types" "^7.22.17"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.17.tgz#f753352c4610ffddf9c8bc6823f9ff03e2303eee"
-  integrity sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==
+"@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.4.4":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
   dependencies:
     "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.15"
+    "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
 "@blueprintjs/colors@^4.2.1":
@@ -967,6 +967,13 @@
   dependencies:
     tslib "~2.5.0"
 
+"@blueprintjs/colors@^5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-5.0.5.tgz#3a8faa640dd2877aa4fd00b886cf8e58daf5f868"
+  integrity sha512-UcCsBxE8GTF6GW1oHBb+cuhPpKiJFWbIRkemwcRkp9HvXXQHxEaXlFFC6jAx5pf3JmRwde5/ck3r+lJFP1YqzA==
+  dependencies:
+    tslib "~2.6.2"
+
 "@blueprintjs/core@^4.16.3", "@blueprintjs/core@^4.20.2":
   version "4.20.2"
   resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.20.2.tgz#ae1bbaf13bd1bf887b506760c478cc940f6d6e20"
@@ -984,6 +991,20 @@
     react-transition-group "^4.4.5"
     tslib "~2.5.0"
 
+"@blueprintjs/core@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-5.6.0.tgz#915b708a8c2d7e916d30dae704829e2d948301d9"
+  integrity sha512-NtQL/iu8P8DhHUCWCstc9Ps+JkRZCPRJ2ZoxubOt21pfxN50CN0sKHkDETHUQyZ73RviveVIIK+m32mT5Wwdqg==
+  dependencies:
+    "@blueprintjs/colors" "^5.0.5"
+    "@blueprintjs/icons" "^5.3.0"
+    "@popperjs/core" "^2.11.7"
+    classnames "^2.3.1"
+    normalize.css "^8.0.1"
+    react-popper "^2.3.0"
+    react-transition-group "^4.4.5"
+    tslib "~2.6.2"
+
 "@blueprintjs/icons@^4.16.0":
   version "4.16.0"
   resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.16.0.tgz#47f9e8abe64d84fc18721080b8f191d8aac075d8"
@@ -993,6 +1014,15 @@
     classnames "^2.3.1"
     tslib "~2.5.0"
 
+"@blueprintjs/icons@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-5.3.0.tgz#9c9498df415bf7e028ceac15f90228d0ffd9a521"
+  integrity sha512-PGZHbWZ41b/SDOENlZQE1pAab4eluzf/hZ6sHB5nPrQNJuGNr94yaPp6u//Tu24iqVFFP20Soi3+ckhf/o3V/g==
+  dependencies:
+    change-case "^4.1.2"
+    classnames "^2.3.1"
+    tslib "~2.6.2"
+
 "@blueprintjs/popover2@^1.13.3":
   version "1.14.11"
   resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.14.11.tgz#0698fdeaf6710460cef0b71bed592ca37f40d1f9"
@@ -1006,6 +1036,15 @@
     react-popper "^2.3.0"
     tslib "~2.5.0"
 
+"@blueprintjs/popover2@^2.0.10":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-2.0.17.tgz#ed1fd3a6fbb0a7ae623ccb649b150a7f22a09534"
+  integrity sha512-sJTlLD9ihKUITC8xEm1lzae4IumXkwoTEu/ajUTgd3GlLyQsUSC5CdlBihX7LlA60WbuyVSE3Jbazhqw2Fud2w==
+  dependencies:
+    "@blueprintjs/core" "^5.6.0"
+    classnames "^2.3.1"
+    tslib "~2.6.2"
+
 "@cfcs/core@^0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@cfcs/core/-/core-0.0.6.tgz#9f8499dcd2ad29fd96d8fa72055411cd4a249121"
@@ -1031,9 +1070,9 @@
     "@egjs/list-differ" "^1.0.0"
 
 "@egjs/component@^3.0.2":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@egjs/component/-/component-3.0.4.tgz#ad7b53794b2a612806179a188ad828acb9525f61"
-  integrity sha512-sXA7bGbIeLF2OAw/vpka66c6QBBUPcA4UUhR4WGJfnp2XWdiI8QrnJGJMr/UxpE/xnevX9tN3jvNPlW8WkHl3g==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@egjs/component/-/component-3.0.5.tgz#2dc86e835d5dc5055cdf46c7cd794eb45330e1b6"
+  integrity sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==
 
 "@egjs/list-differ@^1.0.0":
   version "1.0.1"
@@ -1147,6 +1186,121 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  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"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
+"@esbuild/win32-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -1155,9 +1309,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.1.tgz#8c4bb756cc2aa7eaf13cfa5e69c83afb3260c20c"
-  integrity sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -1189,10 +1343,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
-  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
+"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.3.tgz#797470a75fe0fbd5a53350ee715e85e87baff22d"
+  integrity sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1204,25 +1358,30 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.49.0":
-  version "8.49.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
-  integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==
+"@eslint/js@8.36.0":
+  version "8.36.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
+  integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
 
-"@floating-ui/core@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
-  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+"@eslint/js@8.53.0":
+  version "8.53.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d"
+  integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==
+
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
   dependencies:
-    "@floating-ui/utils" "^0.1.1"
+    "@floating-ui/utils" "^0.1.3"
 
 "@floating-ui/dom@^1.5.1":
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.2.tgz#6812e89d1d4d4ea32f10d15c3b81feb7f9836d89"
-  integrity sha512-6ArmenS6qJEWmwzczWyhvrXRdI/rI78poBcW0h/456+onlabit+2G+QxHx5xTOX60NBJQXjsCLFbW2CmsXpUog==
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
   dependencies:
-    "@floating-ui/core" "^1.4.1"
-    "@floating-ui/utils" "^0.1.1"
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
 
 "@floating-ui/react-dom@^2.0.2":
   version "2.0.2"
@@ -1231,29 +1390,37 @@
   dependencies:
     "@floating-ui/dom" "^1.5.1"
 
-"@floating-ui/utils@^0.1.1":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.2.tgz#b7e9309ccce5a0a40ac482cb894f120dba2b357f"
-  integrity sha512-ou3elfqG/hZsbmF4bxeJhPHIf3G2pm0ujc39hYEZrfVqt7Vk/Zji6CXc3W0pmYM8BW1g40U+akTl9DKZhFhInQ==
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
-"@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"
 
-"@heroicons/react@^2.0.12":
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
-  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
-
-"@humanwhocodes/config-array@^0.11.11", "@humanwhocodes/config-array@^0.11.8":
-  version "0.11.11"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
-  integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==
+"@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:
-    "@humanwhocodes/object-schema" "^1.2.1"
+    "@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"
+
+"@humanwhocodes/config-array@^0.11.13", "@humanwhocodes/config-array@^0.11.8":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.1"
     debug "^4.1.1"
     minimatch "^3.0.5"
 
@@ -1271,11 +1438,16 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.0", "@humanwhocodes/object-schema@^1.2.1":
+"@humanwhocodes/object-schema@^1.2.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
+
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
@@ -1335,9 +1507,9 @@
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
 "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.19"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811"
-  integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
@@ -1347,94 +1519,87 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@mui/base@5.0.0-beta.15":
-  version "5.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.15.tgz#76bebd377cc3b7fdc80924759a4100e5319ed0f9"
-  integrity sha512-Xtom3YSdi0iwYPtyVRFUEGoRwi6IHWixPwifDKaK+4PkEPtUWMU5YOIJfTsmC59ri+dFvA3oBNSiTPUGGrklZw==
+"@mui/base@5.0.0-beta.22":
+  version "5.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.22.tgz#9ea6be6c8bfc4d8f825660da36d228f5315d4706"
+  integrity sha512-l4asGID5tmyerx9emJfXOKLyXzaBtdXNIFE3M+IrSZaFtGFvaQKHhc3+nxxSxPf1+G44psjczM0ekRQCdXx9HA==
   dependencies:
-    "@babel/runtime" "^7.22.15"
+    "@babel/runtime" "^7.23.2"
     "@floating-ui/react-dom" "^2.0.2"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.9"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.16"
     "@popperjs/core" "^2.11.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz#97a4e2decce1583983b4a0cded8bcb2be1b1cb31"
-  integrity sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==
-
-"@mui/icons-material@^5.14.1":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.9.tgz#433cf03c214ce38e1b7a6f684769491fd99c5ef5"
-  integrity sha512-xTRQbDsogsJo7tY5Og8R9zbuG2q+KIPVIM6JQoKxtJlz9DPOw1u0T2fGrvwD+XAOVifQf6epNMcGCDLfJAz4Nw==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
+"@mui/core-downloads-tracker@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.16.tgz#03ceb422d69a33e6c1cbd7e943cf60816878be2a"
+  integrity sha512-97isBjzH2v1K7oB4UH2f4NOkBShOynY6dhnoR2XlUk/g6bb7ZBv2I3D1hvvqPtpEigKu93e7f/jAYr5d9LOc5w==
 
 "@mui/material@^5.14.1":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.9.tgz#d536505a3728441cfe8003443f143ae87457767b"
-  integrity sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.16.tgz#45cd62d312d10399d3813ee6dc43bd1f11179bf4"
+  integrity sha512-W4zZ4vnxgGk6/HqBwgsDHKU7x2l2NhX+r8gAwfg58Rhu3ikfY7NkIS6y8Gl3NkATc4GG1FNaGjjpQKfJx3U6Jw==
   dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@mui/base" "5.0.0-beta.15"
-    "@mui/core-downloads-tracker" "^5.14.9"
-    "@mui/system" "^5.14.9"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.9"
-    "@types/react-transition-group" "^4.4.6"
+    "@babel/runtime" "^7.23.2"
+    "@mui/base" "5.0.0-beta.22"
+    "@mui/core-downloads-tracker" "^5.14.16"
+    "@mui/system" "^5.14.16"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.16"
+    "@types/react-transition-group" "^4.4.8"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.9.tgz#085041c44cc28c25f3431a293339922ec3d9b5f8"
-  integrity sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==
+"@mui/private-theming@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.16.tgz#ffdc9a9d3deaa46af000f04c0a9cc3a982f73071"
+  integrity sha512-FNlL0pTSEBh8nXsVWreCHDSHk+jG8cBx1sxRbT8JVtL+PYbYPi802zfV4B00Kkf0LNRVRvAVQwojMWSR/MYGng==
   dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@mui/utils" "^5.14.9"
+    "@babel/runtime" "^7.23.2"
+    "@mui/utils" "^5.14.16"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.9.tgz#bc2121db1399bb84ea5390b40beac742b6be7023"
-  integrity sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==
+"@mui/styled-engine@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.16.tgz#a4a78a9980f138c2e705d04d67d44051f5005f22"
+  integrity sha512-FfvYvTG/Zd+KXMMImbcMYEeQAbONGuX5Vx3gBmmtB6KyA7Mvm9Pma1ly3R0gc44yeoFd+2wBjn1feS8h42HW5w==
   dependencies:
-    "@babel/runtime" "^7.22.15"
+    "@babel/runtime" "^7.23.2"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
-    react "^18.2.0"
 
-"@mui/system@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.9.tgz#90a20473a85622ddabf5a2409de1980fad98f38d"
-  integrity sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==
+"@mui/system@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.16.tgz#5c30c5123767416358c3b73774eb985e189119a4"
+  integrity sha512-uKnPfsDqDs8bbN54TviAuoGWOmFiQLwNZ3Wvj+OBkJCzwA6QnLb/sSeCB7Pk3ilH4h4jQ0BHtbR+Xpjy9wlOuA==
   dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@mui/private-theming" "^5.14.9"
-    "@mui/styled-engine" "^5.14.9"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.9"
+    "@babel/runtime" "^7.23.2"
+    "@mui/private-theming" "^5.14.16"
+    "@mui/styled-engine" "^5.14.16"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.16"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.4":
-  version "7.2.4"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
-  integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
+"@mui/types@^7.2.8":
+  version "7.2.8"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.8.tgz#2ed4402f104d65fcd4f460ca358654c8935e2285"
+  integrity sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==
 
-"@mui/utils@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.9.tgz#eeefef88dbee687ac90e8972c63f0d41f19348a3"
-  integrity sha512-9ysB5e+RwS7ofn0n3nwAg1/3c81vBTmSvauD3EuK9LmqMzhmF//BFDaC44U4yITvB/0m1kWyDqg924Ll3VHCcg==
+"@mui/utils@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.16.tgz#09a15fd45530cadc642c5c08eb6cc660ea230506"
+  integrity sha512-3xV31GposHkwRbQzwJJuooWpK2ybWdEdeUPtRjv/6vjomyi97F3+68l+QVj9tPTvmfSbr2sx5c/NuvDulrdRmA==
   dependencies:
-    "@babel/runtime" "^7.22.15"
+    "@babel/runtime" "^7.23.2"
+    "@types/prop-types" "^15.7.9"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
@@ -1464,6 +1629,13 @@
   dependencies:
     glob "7.1.7"
 
+"@next/eslint-plugin-next@13.2.4":
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.2.4.tgz#3e124cd10ce24dab5d3448ce04104b4f1f4c6ca7"
+  integrity sha512-ck1lI+7r1mMJpqLNa3LJ5pxCfOB1lfJncKmRJeJxcJqcngaFwylreLP7da6Rrjr6u2gVRTfmnkSkjc80IiQCwQ==
+  dependencies:
+    glob "7.1.7"
+
 "@next/swc-android-arm-eabi@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz#806e3be9741bc14aafdfad0f0c4c6a8de5b77ee1"
@@ -1986,18 +2158,18 @@
     picomatch "^2.2.2"
 
 "@rollup/pluginutils@^5.0.1":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz#74f808f9053d33bafec0cc98e7b835c9667d32ba"
-  integrity sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
+  integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
 "@rushstack/eslint-patch@^1.1.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
-  integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922"
+  integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 
 "@scena/dragscroll@^1.4.0":
   version "1.4.0"
@@ -2021,32 +2193,30 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/tracing@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.69.0.tgz#8d8eb740b72967b6ba3fdc0a5173aa55331b7d35"
-  integrity sha512-4BgeWZUj9MO6IgfO93C9ocP3+AdngqujF/+zB2rFdUe+y9S6koDyUC7jr9Knds/0Ta72N/0D6PwhgSCpHK8s0Q==
+"@sentry-internal/tracing@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.77.0.tgz#f3d82486f8934a955b3dd2aa54c8d29586e42a37"
+  integrity sha512-8HRF1rdqWwtINqGEdx8Iqs9UOP/n8E0vXUu3Nmbqj4p5sQPA7vvCfq+4Y4rTqZFc7sNdFpDsRION5iQEh8zfZw==
   dependencies:
-    "@sentry/core" "7.69.0"
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
-"@sentry/browser@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.69.0.tgz#65427c90fb71c1775e2c1e38431efb7f4aec1e34"
-  integrity sha512-5ls+zu2PrMhHCIIhclKQsWX5u6WH0Ez5/GgrCMZTtZ1d70ukGSRUvpZG9qGf5Cw1ezS1LY+1HCc3whf8x8lyPw==
+"@sentry/browser@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.77.0.tgz#155440f1a0d3a1bbd5d564c28d6b0c9853a51d72"
+  integrity sha512-nJ2KDZD90H8jcPx9BysQLiQW+w7k7kISCWeRjrEMJzjtge32dmHA8G4stlUTRIQugy5F+73cOayWShceFP7QJQ==
   dependencies:
-    "@sentry-internal/tracing" "7.69.0"
-    "@sentry/core" "7.69.0"
-    "@sentry/replay" "7.69.0"
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry-internal/tracing" "7.77.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/replay" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
 "@sentry/cli@^1.74.6":
-  version "1.75.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.75.2.tgz#2c38647b38300e52c9839612d42b7c23f8d6455b"
-  integrity sha512-CG0CKH4VCKWzEaegouWfCLQt9SFN+AieFESCatJ7zSuJmzF05ywpMusjxqRul6lMwfUhRKjGKOzcRJ1jLsfTBw==
+  version "1.76.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.76.0.tgz#3d48248a4fec2fee7c4d30320c563c91c75290ec"
+  integrity sha512-56bVyUJoi52dop/rFEaSoU4AfVRXpR6M+nZBwN1iGUAwdfBrarNbtmIOjfgPi+tVzVB5ck09PzVXG6zeBqJJcA==
   dependencies:
     https-proxy-agent "^5.0.0"
     mkdirp "^0.5.5"
@@ -2055,89 +2225,94 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.69.0.tgz#ebbe01df573f438f8613107020a4e18eb9adca4d"
-  integrity sha512-V6jvK2lS8bhqZDMFUtvwe2XvNstFQf5A+2LMKCNBOV/NN6eSAAd6THwEpginabjet9dHsNRmMk7WNKvrUfQhZw==
+"@sentry/core@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.77.0.tgz#21100843132beeeff42296c8370cdcc7aa1d8510"
+  integrity sha512-Tj8oTYFZ/ZD+xW8IGIsU6gcFXD/gfE+FUxUaeSosd9KHwBQNOLhZSsYo/tTVf/rnQI/dQnsd4onPZLiL+27aTg==
   dependencies:
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
-"@sentry/integrations@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.69.0.tgz#04c0206d9436ec7b79971e3bde5d6e1e9194595f"
-  integrity sha512-FEFtFqXuCo9+L7bENZxFpEAlIODwHl6FyW/DwLfniy9jOXHU7BhP/oICLrFE5J7rh1gNY7N/8VlaiQr3hCnS/g==
+"@sentry/integrations@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.77.0.tgz#f2717e05cb7c69363316ccd34096b2ea07ae4c59"
+  integrity sha512-P055qXgBHeZNKnnVEs5eZYLdy6P49Zr77A1aWJuNih/EenzMy922GOeGy2mF6XYrn1YJSjEwsNMNsQkcvMTK8Q==
   dependencies:
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
     localforage "^1.8.1"
-    tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/nextjs@^7.36.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.69.0.tgz#371db2b66de43873e185f6e813567a6e635dfc42"
-  integrity sha512-PLgVL07pJafRZZ1parTK6g1GKfdZU/afN/6hs5HrdLeovcpSunEwj3guoHHrewFEbDjj021+0JaG16qnNeAPgQ==
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.77.0.tgz#036b1c45dd106e01d44967c97985464e108922be"
+  integrity sha512-8tYPBt5luFjrng1sAMJqNjM9sq80q0jbt6yariADU9hEr7Zk8YqFaOI2/Q6yn9dZ6XyytIRtLEo54kk2AO94xw==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.69.0"
-    "@sentry/integrations" "7.69.0"
-    "@sentry/node" "7.69.0"
-    "@sentry/react" "7.69.0"
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/integrations" "7.77.0"
+    "@sentry/node" "7.77.0"
+    "@sentry/react" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
+    "@sentry/vercel-edge" "7.77.0"
     "@sentry/webpack-plugin" "1.20.0"
     chalk "3.0.0"
+    resolve "1.22.8"
     rollup "2.78.0"
     stacktrace-parser "^0.1.10"
-    tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/node@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.69.0.tgz#938200095a17f41a2445fec168df293db7c24836"
-  integrity sha512-T0NgPcmDQvEuz5hy6aEhXghTHHTWsiP3IWoeEAakDBHAXmtpT6lYFQZgb5AiEOt9F5KO/G/1yH3YYdpDAnKhPw==
+"@sentry/node@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.77.0.tgz#a247452779a5bcb55724457707286e3e4a29dbbe"
+  integrity sha512-Ob5tgaJOj0OYMwnocc6G/CDLWC7hXfVvKX/ofkF98+BbN/tQa5poL+OwgFn9BA8ud8xKzyGPxGU6LdZ8Oh3z/g==
   dependencies:
-    "@sentry-internal/tracing" "7.69.0"
-    "@sentry/core" "7.69.0"
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
-    cookie "^0.4.1"
+    "@sentry-internal/tracing" "7.77.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
     https-proxy-agent "^5.0.0"
-    lru_map "^0.3.3"
-    tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/react@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.69.0.tgz#b9931ac590d8dad3390a9a03a516f1b1bd75615e"
-  integrity sha512-J+DciRRVuruf1nMmBOi2VeJkOLGeCb4vTOFmHzWTvRJNByZ0flyo8E/fyROL7+23kBq1YbcVY6IloUlH73hneQ==
+"@sentry/react@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.77.0.tgz#9da14e4b21eae4b5a6306d39bb7c42ef0827d2c2"
+  integrity sha512-Q+htKzib5em0MdaQZMmPomaswaU3xhcVqmLi2CxqQypSjbYgBPPd+DuhrXKoWYLDDkkbY2uyfe4Lp3yLRWeXYw==
   dependencies:
-    "@sentry/browser" "7.69.0"
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
+    "@sentry/browser" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
     hoist-non-react-statics "^3.3.2"
-    tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/replay@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.69.0.tgz#d727f96292d2b7c25df022fa53764fd39910fcda"
-  integrity sha512-oUqWyBPFUgShdVvgJtV65EQH9pVDmoYVQMOu59JI6FHVeL3ald7R5Mvz6GaNLXsirvvhp0yAkcAd2hc5Xi6hDw==
+"@sentry/replay@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.77.0.tgz#21d242c9cd70a7235237216174873fd140b6eb80"
+  integrity sha512-M9Ik2J5ekl+C1Och3wzLRZVaRGK33BlnBwfwf3qKjgLDwfKW+1YkwDfTHbc2b74RowkJbOVNcp4m8ptlehlSaQ==
   dependencies:
-    "@sentry/core" "7.69.0"
-    "@sentry/types" "7.69.0"
-    "@sentry/utils" "7.69.0"
+    "@sentry-internal/tracing" "7.77.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
-"@sentry/types@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.69.0.tgz#012b8d90d270a473cc2a5cf58a56870542739292"
-  integrity sha512-zPyCox0mzitzU6SIa1KIbNoJAInYDdUpdiA+PoUmMn2hFMH1llGU/cS7f4w/mAsssTlbtlBi72RMnWUCy578bw==
+"@sentry/types@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.77.0.tgz#c5d00fe547b89ccde59cdea59143bf145cee3144"
+  integrity sha512-nfb00XRJVi0QpDHg+JkqrmEBHsqBnxJu191Ded+Cs1OJ5oPXEW6F59LVcBScGvMqe+WEk1a73eH8XezwfgrTsA==
 
-"@sentry/utils@7.69.0":
-  version "7.69.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.69.0.tgz#b7594e4eb2a88b9b25298770b841dd3f81bd2aa4"
-  integrity sha512-4eBixe5Y+0EGVU95R4NxH3jkkjtkE4/CmSZD4In8SCkWGSauogePtq6hyiLsZuP1QHdpPb9Kt0+zYiBb2LouBA==
+"@sentry/utils@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.77.0.tgz#1f88501f0b8777de31b371cf859d13c82ebe1379"
+  integrity sha512-NmM2kDOqVchrey3N5WSzdQoCsyDkQkiRxExPaNI2oKQ/jMWHs9yt0tSy7otPBcXs0AP59ihl75Bvm1tDRcsp5g==
   dependencies:
-    "@sentry/types" "7.69.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry/types" "7.77.0"
+
+"@sentry/vercel-edge@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-7.77.0.tgz#6a90a869878e4e78803c4331c30aea841fcc6a73"
+  integrity sha512-ffddPCgxVeAccPYuH5sooZeHBqDuJ9OIhIRYKoDi4TvmwAzWo58zzZWhRpkHqHgIQdQvhLVZ5F+FSQVWnYSOkw==
+  dependencies:
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
 "@sentry/webpack-plugin@1.20.0":
   version "1.20.0"
@@ -2164,7 +2339,7 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tailwindcss/typography@^0.5.10":
+"@tailwindcss/typography@^0.5.9":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.10.tgz#2abde4c6d5c797ab49cf47610830a301de4c1e0a"
   integrity sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==
@@ -2174,191 +2349,191 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
-"@tiptap/core@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.8.tgz#4555dc7d86580dee790d4aded1ce7fb79319da70"
-  integrity sha512-QTGgqki7hkonLJ93gWqCUkD6cCAQ3rEX9gbMLwzfnegIZ+/BKLQYKYCozsEMZnMPXgdRrKuyRBOL+RH+IolMeA==
+"@tiptap/core@^2.1.12", "@tiptap/core@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.12.tgz#904fdf147e91b5e60561c76e7563c1b5a32f54ab"
+  integrity sha512-ZGc3xrBJA9KY8kln5AYTj8y+GDrKxi7u95xIl2eccrqTY5CQeRu6HRNM1yT4mAjuSaG9jmazyjGRlQuhyxCKxQ==
 
-"@tiptap/extension-blockquote@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.8.tgz#eb3f70d03807b2d51645cf5450a1e84ccb53633b"
-  integrity sha512-NhTE90ZDb/BbtkgeNjwLYPYMryAfCXCM+Zpk8AMsVODZ+bDy+lsqpnDw7uRxUK3guLMnqKgSe2eTaXqx7AKE+A==
+"@tiptap/extension-blockquote@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.12.tgz#97b43419606acf9bfd93b9f482a1827dcac8c3e9"
+  integrity sha512-Qb3YRlCfugx9pw7VgLTb+jY37OY4aBJeZnqHzx4QThSm13edNYjasokbX0nTwL1Up4NPTcY19JUeHt6fVaVVGg==
 
-"@tiptap/extension-bold@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.8.tgz#2047345c814cad672d150b303436928d46aecbc1"
-  integrity sha512-rDdmir78a0JTiV+vrycGh3yS1ZzRF1bRvBt4jr7Rne0LOl03kc7Wm936ommiL3McWUpZZV37ZpCm5JfE8rQb+w==
+"@tiptap/extension-bold@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.12.tgz#5dbf41105fc0fbde8adbff629312187fbebc39b0"
+  integrity sha512-AZGxIxcGU1/y6V2YEbKsq6BAibL8yQrbRm6EdcBnby41vj1WziewEKswhLGmZx5IKM2r2ldxld03KlfSIlKQZg==
 
-"@tiptap/extension-bubble-menu@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.8.tgz#26d5f2ebc198553c5339d9ea6d06fcb02b6a938f"
-  integrity sha512-Na9Maz20jS+3UrHtAGLkfFt3uu+HD9SSK3+3WyNeylkWciJa/qkZKqwhptHrjpin0IHSF2JNche+ZA+hSmnm2Q==
+"@tiptap/extension-bubble-menu@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.12.tgz#4103a21a6433e58690c8f742ece39fad78dc26eb"
+  integrity sha512-gAGi21EQ4wvLmT7klgariAc2Hf+cIjaNU2NWze3ut6Ku9gUo5ZLqj1t9SKHmNf4d5JG63O8GxpErqpA7lHlRtw==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-bullet-list@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.8.tgz#d9d4ee46d1adb2b70d3b8c19540ebcdd8a1eaaec"
-  integrity sha512-VWj3XZMwJQVb7e4ZM0N+o6o+905lyMMS4C35yw/sxN5CDw4TJpQMSPSAmBVNtK469XUdlGOxeLc/+Q00aU+S8A==
+"@tiptap/extension-bullet-list@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.12.tgz#7c905a577ce30ef2cb335870a23f9d24fd26f6aa"
+  integrity sha512-vtD8vWtNlmAZX8LYqt2yU9w3mU9rPCiHmbp4hDXJs2kBnI0Ju/qAyXFx6iJ3C3XyuMnMbJdDI9ee0spAvFz7cQ==
 
-"@tiptap/extension-code-block-lowlight@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.1.8.tgz#7577ade0e00be3d28629e2f8e6c5e7b9b4155946"
-  integrity sha512-qiUIh8JRfvd2rhDKFjHCxBp+nRy3HedovQoVFX9YEnBbg6so+I1nLE2Eck4t3KhBVfVRBrxBKZPLVb83zQ0s4w==
+"@tiptap/extension-code-block-lowlight@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.1.12.tgz#ccbca5d0d92bee373dc8e2e2ae6c27f62f66437c"
+  integrity sha512-dtIbpI9QrWa9TzNO4v5q/zf7+d83wpy5i9PEccdJAVtRZ0yOI8JIZAWzG5ex3zAoCA0CnQFdsPSVykYSDdxtDA==
 
-"@tiptap/extension-code-block@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.1.8.tgz#d2dccf64a583bfb12e2ebd04b3724b7e9430549d"
-  integrity sha512-EjegLBBz8ATvIuJlqosGrcOsKNu8YveI8rogGfUmnXWMNcPSSqBDoWK2EpLTUzGccPWRxo7yBsr5wItikfPPYA==
+"@tiptap/extension-code-block@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.1.12.tgz#20416baef1b5fc839490a8416e97fdcbb5fdf918"
+  integrity sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==
 
-"@tiptap/extension-code@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.1.8.tgz#c3dccd1a12972cab8d0c98f75a3960bab64905bd"
-  integrity sha512-dQL8aUYzSEkES5P4sBYZ6SiCMnFK1cUKKGruaRV1TJyFu/ClZ8Y+BKS2GCCMcyH0tKjqsibYsNFBWz9/Q5gjEg==
+"@tiptap/extension-code@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.1.12.tgz#86d2eb5f63725af472c5fd858e5a9c7ccae06ef3"
+  integrity sha512-CRiRq5OTC1lFgSx6IMrECqmtb93a0ZZKujEnaRhzWliPBjLIi66va05f/P1vnV6/tHaC3yfXys6dxB5A4J8jxw==
 
-"@tiptap/extension-color@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.1.8.tgz#7692e82c0a50e63d6bb474a6e109852c5d657ea0"
-  integrity sha512-eAfJhUbqqNFTdgWraLcg6O1d7YWj6Ivga0YVfhnBpWmZiS8JXAmgOHq9b7sRrDOMdEp6D2njDBEIWpltHNmi1A==
+"@tiptap/extension-color@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.1.12.tgz#1076833f061c3eabf59aef32cd15f103fd6ec710"
+  integrity sha512-Myd6iSbPJvvclr+NRBEdE0k52QlQrXZnJljk4JKn0b25cl60ERA40FH9QLBjkpTed7SDbI3oX7LWIzTUoCj39w==
 
-"@tiptap/extension-document@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.1.8.tgz#fa4dce27fd5d25b54f7e7e9a93db69606a624b96"
-  integrity sha512-mLPZqd5QUv3FKo+5zOaf7dGqZPci7Myr92U1Y6Vw0V+hCRC9Emm3I/xssQYGsWXmXQuyNJ5WRlpXgag3Ae+CkA==
+"@tiptap/extension-document@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.1.12.tgz#e19e4716dfad60cbeb6abaf2f362fed759963529"
+  integrity sha512-0QNfAkCcFlB9O8cUNSwTSIQMV9TmoEhfEaLz/GvbjwEq4skXK3bU+OQX7Ih07waCDVXIGAZ7YAZogbvrn/WbOw==
 
-"@tiptap/extension-dropcursor@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.8.tgz#f7128aebe9e2bb05cd6508d782deaf436ae3c46e"
-  integrity sha512-KilbUHApYya2Q6brq5qW+B+pPkb6lvgnjRfuFuv6doM/v+lfEdozUE1Ma8C19UXtzl7BmPDut9HRMDL17Pqwyg==
+"@tiptap/extension-dropcursor@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.12.tgz#9da0c275291c9d47497d3db41b4d70d96366b4ff"
+  integrity sha512-0tT/q8nL4NBCYPxr9T0Brck+RQbWuczm9nV0bnxgt0IiQXoRHutfPWdS7GA65PTuVRBS/3LOco30fbjFhkfz/A==
 
-"@tiptap/extension-floating-menu@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.8.tgz#49a7f83c3a0769c044d4e83352aae0f86d63f7c5"
-  integrity sha512-lc8bjHGqWSgXKmoU2HAlBFWzu7wnFKb5Vg0R3PECBrOZ9hXkmNA0mHxrvHglwjLtfe7XOfZf4FLySG/5S+BdeQ==
+"@tiptap/extension-floating-menu@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.12.tgz#68a658b2b9bdd3a0fc1afc5165231838061a8fde"
+  integrity sha512-uo0ydCJNg6AWwLT6cMUJYVChfvw2PY9ZfvKRhh9YJlGfM02jS4RUG/bJBts6R37f+a5FsOvAVwg8EvqPlNND1A==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-gapcursor@^2.1.7", "@tiptap/extension-gapcursor@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.8.tgz#bc7e745fdc8990a8e370c4c728ab8733ba0910c4"
-  integrity sha512-0EQgV/kF2dg2dOpw0fTbwwNaubwS8QNhEPPbnXQP8xqZpupuia+DKKgC+ttzbE9XhS4Sv1fGib52Sr7MMIduhA==
+"@tiptap/extension-gapcursor@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.12.tgz#63844c3abd1a38af915839cf0c097b6d2e5a86fe"
+  integrity sha512-zFYdZCqPgpwoB7whyuwpc8EYLYjUE5QYKb8vICvc+FraBUDM51ujYhFSgJC3rhs8EjI+8GcK8ShLbSMIn49YOQ==
 
-"@tiptap/extension-hard-break@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.8.tgz#b898c3c9c7f96726307bd51b24f557731e25d12e"
-  integrity sha512-K86FTizvZu7779Gz2XigW1IxAjZXduyZ7w0ipwe+5QBa/Lh6Vfl9wa8TgV1lFAkC2VATsAa3aa36llMIDBgeew==
+"@tiptap/extension-hard-break@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.12.tgz#54d0c9996e1173594852394975a9356eec98bc9a"
+  integrity sha512-nqKcAYGEOafg9D+2cy1E4gHNGuL12LerVa0eS2SQOb+PT8vSel9OTKU1RyZldsWSQJ5rq/w4uIjmLnrSR2w6Yw==
 
-"@tiptap/extension-heading@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.8.tgz#d34db2bdfca559567ecb6f741fa4eb5d4d54a897"
-  integrity sha512-6PHWzhGPC/QjfswlflU1Cy2UYZiyzwa639bWW7Dl4BHZgK+e09lbc7RwzPrrex6+jA10K4nlww19xsI590ogBw==
+"@tiptap/extension-heading@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.12.tgz#05ae4684d6f29ae611495ab114038e14a5d1dff6"
+  integrity sha512-MoANP3POAP68Ko9YXarfDKLM/kXtscgp6m+xRagPAghRNujVY88nK1qBMZ3JdvTVN6b/ATJhp8UdrZX96TLV2w==
 
-"@tiptap/extension-highlight@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.1.8.tgz#b2d2d995344e06dd36cd8a395a72113b87981bd7"
-  integrity sha512-OCXtFWCbwsgOHq7IP4Qr02EfjwYeRRcuL1ipv0LojGtMcvnkw7OLhQZ8oocrqi4/6QCOtPLSGlcqrQ6pmN7jww==
+"@tiptap/extension-history@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.1.12.tgz#03bcb9422e8ea2b82dc45207d1a1b0bc0241b055"
+  integrity sha512-6b7UFVkvPjq3LVoCTrYZAczt5sQrQUaoDWAieVClVZoFLfjga2Fwjcfgcie8IjdPt8YO2hG/sar/c07i9vM0Sg==
 
-"@tiptap/extension-history@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.1.8.tgz#68a65b51effc1d612e3862928c3ccede3ce83592"
-  integrity sha512-Cyq4YsmosfgHGlaf2wiiU8VaLweUMG8LHuhZ5A2RAoriy3G09Bqgn6eqLmho8KoU1VgvffXTVBaYKxz9gVgu3w==
+"@tiptap/extension-horizontal-rule@^2.1.11", "@tiptap/extension-horizontal-rule@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.12.tgz#2191d4ff68ed39381d65971ad8e2aa1be43e6d6b"
+  integrity sha512-RRuoK4KxrXRrZNAjJW5rpaxjiP0FJIaqpi7nFbAua2oHXgsCsG8qbW2Y0WkbIoS8AJsvLZ3fNGsQ8gpdliuq3A==
 
-"@tiptap/extension-horizontal-rule@^2.0.4", "@tiptap/extension-horizontal-rule@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.8.tgz#db23468176fd5359240feb8601fd3fcf747d5e6d"
-  integrity sha512-qUNz8p/p3gth0ueYFkmMdVRcRVmtCwQGJsHWwbx23XrF/a7AJ0FSdiW0sk8YD6Dbw+i1cB3cnRyO+qq9XuWdqw==
+"@tiptap/extension-image@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.1.12.tgz#ab035db82f0961b1d906c4d426bf68be563fdcd3"
+  integrity sha512-VCgOTeNLuoR89WoCESLverpdZpPamOd7IprQbDIeG14sUySt7RHNgf2AEfyTYJEHij12rduvAwFzerPldVAIJg==
 
-"@tiptap/extension-image@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.1.8.tgz#99d78ad1d8c6f513f945beae7de352759f30189f"
-  integrity sha512-o+vUIYLvYcJHftIMoIukzZZ+fTTfC/gXXvQIYz51p3f1qeYXszD11FbtkaJCgXYj8BcGCO7QuzcCdQg+wyROZw==
+"@tiptap/extension-italic@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.1.12.tgz#e99480eb77f8b4e5444fc236add8a831d5aa2343"
+  integrity sha512-/XYrW4ZEWyqDvnXVKbgTXItpJOp2ycswk+fJ3vuexyolO6NSs0UuYC6X4f+FbHYL5VuWqVBv7EavGa+tB6sl3A==
 
-"@tiptap/extension-italic@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.1.8.tgz#b559c8d6b387e292e047985acd0def48a80a7aa0"
-  integrity sha512-cR6kSoMraA/dCdwmus8A09WAwpxiZiGG+B0OqsludGF+MdZLilhoGyXDbTeO3aKoKccfqxZGk1YKK13C/gRM1Q==
-
-"@tiptap/extension-link@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.8.tgz#644229c309ef9a91db329126df23cba083ec3c61"
-  integrity sha512-f3yPNbbo3rNuusEX+Xh/oKUWkq/P1yyVip6ZmtUJVrrG4PFeq/w+f1vEVnlC+uZk3qoC4o8J1DTAOrlrZehx/g==
+"@tiptap/extension-link@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.12.tgz#a18f83a0b54342e6274ff9e5a5907ef7f15aa723"
+  integrity sha512-Sti5hhlkCqi5vzdQjU/gbmr8kb578p+u0J4kWS+SSz3BknNThEm/7Id67qdjBTOQbwuN07lHjDaabJL0hSkzGQ==
   dependencies:
     linkifyjs "^4.1.0"
 
-"@tiptap/extension-list-item@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.8.tgz#b5dc1e04bfb96ca10a0821821ade5014fa188dbb"
-  integrity sha512-fiYVRhHvcXMcVuuiXBx/0AFWwGoKzs9784VSuVUeSSzSuH6vOchM1kZCH+v6acs7vltFKNDrluyEiwGIz1b8qA==
+"@tiptap/extension-list-item@^2.1.11", "@tiptap/extension-list-item@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.12.tgz#3eb28dc998490a98f14765783770b3cf6587d39e"
+  integrity sha512-Gk7hBFofAPmNQ8+uw8w5QSsZOMEGf7KQXJnx5B022YAUJTYYxO3jYVuzp34Drk9p+zNNIcXD4kc7ff5+nFOTrg==
 
-"@tiptap/extension-ordered-list@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.8.tgz#f489ac85ccd93ad811318bed6af7906c035ba313"
-  integrity sha512-qTVSWTlSjFNRwPNmWmfe9TsW9XL3LQCNJsfaBxtVZfhDN9rhoIZ6rPTBO7f2TTiPK1+uyLTvK+znWYvU9RtD5A==
+"@tiptap/extension-mention@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.1.12.tgz#a395e7757b45630ec3047f14b0ba2dde8e1c9c93"
+  integrity sha512-Nc8wFlyPp+/48IpOFPk2O3hYsF465wizcM3aihMvZM96Ahic7dvv9yVptyOfoOwgpExl2FIn1QPjRDXF60VAUg==
 
-"@tiptap/extension-paragraph@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.1.8.tgz#f337c3f84cbfddd1ea16860e934f2049c46211ce"
-  integrity sha512-ZuwvwKaG5GeoYRgeh96PToLk2TjxsLiZKnLN6rkUCsW6aLoseK7/8/7vm3dP2N9dAUN35ESw0/pRk2Q/VK1/+g==
+"@tiptap/extension-ordered-list@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.12.tgz#f41a45bc66b4d19e379d4833f303f2e0cd6b9d60"
+  integrity sha512-tF6VGl+D2avCgn9U/2YLJ8qVmV6sPE/iEzVAFZuOSe6L0Pj7SQw4K6AO640QBob/d8VrqqJFHCb6l10amJOnXA==
 
-"@tiptap/extension-placeholder@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.1.8.tgz#5ead71aca842c17cdc9cff6fff8809a1f327119d"
-  integrity sha512-4yhyvvqsXTzXtJs+39cgvsld4df3ppbajCoxkzHYntKoonm3DtgFTSh+lbdEVCQgDmIfIt1o6DKY1n8NAJRQUQ==
+"@tiptap/extension-paragraph@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.1.12.tgz#922447b2aa1c7184787d351ceec593a74d24ed03"
+  integrity sha512-hoH/uWPX+KKnNAZagudlsrr4Xu57nusGekkJWBcrb5MCDE91BS+DN2xifuhwXiTHxnwOMVFjluc0bPzQbkArsw==
 
-"@tiptap/extension-strike@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.1.8.tgz#ba6966a9afb9493d8bd30d4c617ffe6966b90379"
-  integrity sha512-JGPiGudEZAKTiOirua9gtDG+HILHEx4CGODW5PDBMA1xYDfyo7ZJk5xgfJWZ1SOo7YviF26HSY4KKV9ThINq2Q==
+"@tiptap/extension-placeholder@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.1.12.tgz#f6267a563d17a5ae8a04da32231eac8d8868519e"
+  integrity sha512-K52o7B1zkP4vaVy3z4ZwHn+tQy6KlXtedj1skLg+796ImwH2GYS5z6MFOTfKzBO2hLncUzLco/s0C5PLCD6SDw==
+
+"@tiptap/extension-strike@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.1.12.tgz#2b049aedf2985e9c9e3c3f1cc0b203a574c85bd8"
+  integrity sha512-HlhrzIjYUT8oCH9nYzEL2QTTn8d1ECnVhKvzAe6x41xk31PjLMHTUy8aYjeQEkWZOWZ34tiTmslV1ce6R3Dt8g==
 
 "@tiptap/extension-table-cell@^2.1.6":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.1.8.tgz#2e28bb008de979943f5efbf5f48f58d26728e6ad"
-  integrity sha512-cUI3vMfRZ6Utmjsu+aAF8BsH3r3YzWaLJWW5SuH8784K6ImclCwGTyi/HJqsRDHM7ujvtjjc+vmFtSD/eqF15Q==
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.1.12.tgz#b13938d345065a3750610c66a81ea107edbbcea7"
+  integrity sha512-hextcfVTdwX8G7s8Q/V6LW2aUhGvPgu1dfV+kVVO42AFHxG+6PIkDOUuHphGajG3Nrs129bjMDWb8jphj38dUg==
 
 "@tiptap/extension-table-header@^2.1.6":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.1.8.tgz#ae4a081f2dc7754078fbc7ba11043da8726d5f4a"
-  integrity sha512-oUYaQaAowbVLYyeYmAwqoe0ZHZS1XP6qV4EyOig/mOElASwBB6xAfydMncRKTxsT9Zq6z/CC6qnH0xlld/KAfQ==
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.1.12.tgz#87ac2efa073a212c6114e0b137cf4afc3d75c35f"
+  integrity sha512-a4WZ5Z7gqQ/QlK8cK2d1ONYdma/J5+yH/0SNtQhkfELoS45GsLJh89OyKO0W0FnY6Mg0RoH1FsoBD+cqm0yazA==
 
 "@tiptap/extension-table-row@^2.1.6":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.1.8.tgz#d1113e7362f675faaef88cc1fb32c29d37855a09"
-  integrity sha512-rjMCZjaemC3x4T3fUExi8J8ffo1I29u9e8rSHRIna2ObTRq4PeI48uVTET5EREBD5/CbfX6zHFgkZfUZeR0g+A==
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.1.12.tgz#27bee7d046b2bea4fe6bf46260e0d89305b75663"
+  integrity sha512-0kPr+zngQC1YQRcU6+Fl3CpIW/SdJhVJ5qOLpQleXrLPdjmZQd3Z1DXvOSDphYjXCowGPCxeUa++6bo7IoEMJw==
 
 "@tiptap/extension-table@^2.1.6":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.1.8.tgz#1c777498caf7b649be26cba8eecbd3ebd623e673"
-  integrity sha512-n+89XGTYmZgKFrvZrqgCG2SbRbIi8xX61KLptLD2DF/w4y0bR4Cr2pJBep/MMEZh3N2CIDQ3mS7eIfASJHk5hQ==
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.1.12.tgz#173cc4eac75c650b440dfcae433d3c74e78aa1bc"
+  integrity sha512-q/DuKZ4j1ycRfuFdb9rBJ3MglGNxlM2BQ1csScX/BrVIsAQI5B8sdzy1BrIlepQ6DRu4DCzHcKMI8u4/edUSWA==
 
-"@tiptap/extension-task-item@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.1.8.tgz#2036360be6702ab753cbc77b60ab24fb33ff20a6"
-  integrity sha512-PoY2PDiYEQC44qDQLubzDuhZ3f6OL7sui89960M1HUQR2URnPvToOBaa5veNY8VyACdAolm+LwTpseBKKkcpmw==
+"@tiptap/extension-task-item@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.1.12.tgz#944eacf6f0ed1a430d807217d62b49ccef3956e1"
+  integrity sha512-uqrDTO4JwukZUt40GQdvB6S+oDhdp4cKNPMi0sbteWziQugkSMLlkYvxU0Hfb/YeziaWWwFI7ssPu/hahyk6dQ==
 
-"@tiptap/extension-task-list@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.1.8.tgz#993c415d85d414039baf7379df7c3b19b1d342d9"
-  integrity sha512-PmEPJHTOgy0AveE6YoxY6w09+bh5OqkrMI/sluY88291cnSPPEf9sFWmBHOrONNj54Ti6ua37arudUY5mqxOCA==
+"@tiptap/extension-task-list@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.1.12.tgz#adbfb5a5b990d6f189c776b45de2d2c5bb77e963"
+  integrity sha512-BUpYlEWK+Q3kw9KIiOqvhd0tUPhMcOf1+fJmCkluJok+okAxMbP1umAtCEQ3QkoCwLr+vpHJov7h3yi9+dwgeQ==
 
-"@tiptap/extension-text-style@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.1.8.tgz#42e9fa179f76d4e88f73f2c66aee3b06162e659b"
-  integrity sha512-xnx/Pq5ttt2/gOQPmqVQIBz/jo3MErtYdYk22fUaOyu1xT36X4BDJYsrLyWhcs3aWR/tv1/XylbNOFvhrDOHoQ==
+"@tiptap/extension-text-style@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.1.12.tgz#ec6a025fc6785246c9fcf78e34088759c1d2b213"
+  integrity sha512-nfjWXX0JSRHLcscfiMESh+RN+Z7bG8nio/C9+8yQASM90VxU9f8oKgF8HnnSYsSrD4lLf44Q6XjmB7aMVUuikg==
 
-"@tiptap/extension-text@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.8.tgz#7f537d0c490feab8b800644e2ad24b6478c67044"
-  integrity sha512-ha7oTtUdcJdTVLr8CrxbNMucbAmOBCi83MLxdKZclVf1VpdIVpE3NTojfH2mnZCVMvtPhj4PILQp2hGO95SFig==
+"@tiptap/extension-text@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.12.tgz#466e3244bdd9b2db2304c0c9a1d51ce59f5327d0"
+  integrity sha512-rCNUd505p/PXwU9Jgxo4ZJv4A3cIBAyAqlx/dtcY6cjztCQuXJhuQILPhjGhBTOLEEL4kW2wQtqzCmb7O8i2jg==
 
-"@tiptap/extension-underline@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.1.8.tgz#a2f0904805f57e118c2f0b165929abe41b5c1fbf"
-  integrity sha512-vsmdyR8z40xNPZzTSNGLcCMaIf8Tgm9OzsZb1qWILe+PYuv/mIM1LogBbfouEzVpG5sPoxwFTDgxnC+M3Ohgzg==
+"@tiptap/extension-underline@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.1.12.tgz#abd59c4b6c8434dbadb4ff9bff23eefcc6bc095e"
+  integrity sha512-NwwdhFT8gDD0VUNLQx85yFBhP9a8qg8GPuxlGzAP/lPTV8Ubh3vSeQ5N9k2ZF/vHlEvnugzeVCbmYn7wf8vn1g==
 
-"@tiptap/pm@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.8.tgz#9108af0365fd653d64d620d45016e7079961bebc"
-  integrity sha512-H3NGAu5xdH1PpXa6OQlvecaWJIZR/9tVkc1mdpLanvG7mW85DuY+5fC36Xnv9SPMVcO3zWXS6Ii4os6HbdP6bQ==
+"@tiptap/pm@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.12.tgz#88a4b19be0eabb13d42ddd540c19ba1bbe74b322"
+  integrity sha512-Q3MXXQABG4CZBesSp82yV84uhJh/W0Gag6KPm2HRWPimSFELM09Z9/5WK9RItAYE0aLhe4Krnyiczn9AAa1tQQ==
   dependencies:
     prosemirror-changeset "^2.2.0"
     prosemirror-collab "^1.3.0"
@@ -2379,60 +2554,65 @@
     prosemirror-transform "^1.7.0"
     prosemirror-view "^1.28.2"
 
-"@tiptap/react@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.1.8.tgz#50a834a9b76b36eebb33e71dcb765aa9cb80f276"
-  integrity sha512-yTjlin4tOfYNwBdpX4+2CmNxybq2Ms50rX0RIRLABbnCTqhBIKko/eBLFq7DCot/Dwdw6c5Y098/fayKywfJWg==
-  dependencies:
-    "@tiptap/extension-bubble-menu" "^2.1.8"
-    "@tiptap/extension-floating-menu" "^2.1.8"
+"@tiptap/prosemirror-tables@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@tiptap/prosemirror-tables/-/prosemirror-tables-1.1.4.tgz#e123978f13c9b5f980066ba660ec5df857755916"
+  integrity sha512-O2XnDhZV7xTHSFxMMl8Ei3UVeCxuMlbGYZ+J2QG8CzkK8mxDpBa66kFr5DdyAhvdi1ptpcH9u7/GMwItQpN4sA==
 
-"@tiptap/starter-kit@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.1.8.tgz#d33f04478cd7b4956cb312335bcbed109269b651"
-  integrity sha512-LfCQgENw501XyTbCEcmiKt1d7XQi+6nTrQQfI16cCwc7lqp+LREz9EOFidkjTtrKuUHwlTaZzS7C76Cfc87mXA==
+"@tiptap/react@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.1.12.tgz#23566c7992b9642137171b282335e646922ae559"
+  integrity sha512-RMO4QmmpL7sPR7w8o1Wq0hrUe/ttHzsn5I/eWwqg1d3fGx5y9mOdfCoQ9XBtm49Xzdejy3QVzt4zYp9fX0X/xg==
   dependencies:
-    "@tiptap/core" "^2.1.8"
-    "@tiptap/extension-blockquote" "^2.1.8"
-    "@tiptap/extension-bold" "^2.1.8"
-    "@tiptap/extension-bullet-list" "^2.1.8"
-    "@tiptap/extension-code" "^2.1.8"
-    "@tiptap/extension-code-block" "^2.1.8"
-    "@tiptap/extension-document" "^2.1.8"
-    "@tiptap/extension-dropcursor" "^2.1.8"
-    "@tiptap/extension-gapcursor" "^2.1.8"
-    "@tiptap/extension-hard-break" "^2.1.8"
-    "@tiptap/extension-heading" "^2.1.8"
-    "@tiptap/extension-history" "^2.1.8"
-    "@tiptap/extension-horizontal-rule" "^2.1.8"
-    "@tiptap/extension-italic" "^2.1.8"
-    "@tiptap/extension-list-item" "^2.1.8"
-    "@tiptap/extension-ordered-list" "^2.1.8"
-    "@tiptap/extension-paragraph" "^2.1.8"
-    "@tiptap/extension-strike" "^2.1.8"
-    "@tiptap/extension-text" "^2.1.8"
+    "@tiptap/extension-bubble-menu" "^2.1.12"
+    "@tiptap/extension-floating-menu" "^2.1.12"
 
-"@tiptap/suggestion@^2.0.4":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.1.8.tgz#ffd61c13aa11c4b51e50a9c83f0813f71ab0881b"
-  integrity sha512-3QypKFCeZSRrjgSz0n0JE5SimisolaxDZn45GGtkXuJWmKGCmsJw9UsXeH3S9ZuP3pvPImL0P9uAHlhRReRw1w==
+"@tiptap/starter-kit@^2.1.10":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.1.12.tgz#2bf28091ed08dc8f7b903ba92925e4ffe06257ea"
+  integrity sha512-+RoP1rWV7rSCit2+3wl2bjvSRiePRJE/7YNKbvH8Faz/+AMO23AFegHoUFynR7U0ouGgYDljGkkj35e0asbSDA==
+  dependencies:
+    "@tiptap/core" "^2.1.12"
+    "@tiptap/extension-blockquote" "^2.1.12"
+    "@tiptap/extension-bold" "^2.1.12"
+    "@tiptap/extension-bullet-list" "^2.1.12"
+    "@tiptap/extension-code" "^2.1.12"
+    "@tiptap/extension-code-block" "^2.1.12"
+    "@tiptap/extension-document" "^2.1.12"
+    "@tiptap/extension-dropcursor" "^2.1.12"
+    "@tiptap/extension-gapcursor" "^2.1.12"
+    "@tiptap/extension-hard-break" "^2.1.12"
+    "@tiptap/extension-heading" "^2.1.12"
+    "@tiptap/extension-history" "^2.1.12"
+    "@tiptap/extension-horizontal-rule" "^2.1.12"
+    "@tiptap/extension-italic" "^2.1.12"
+    "@tiptap/extension-list-item" "^2.1.12"
+    "@tiptap/extension-ordered-list" "^2.1.12"
+    "@tiptap/extension-paragraph" "^2.1.12"
+    "@tiptap/extension-strike" "^2.1.12"
+    "@tiptap/extension-text" "^2.1.12"
+
+"@tiptap/suggestion@^2.0.4", "@tiptap/suggestion@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.1.12.tgz#a13782d1e625ec03b3f61b6839ecc95b6b685d3f"
+  integrity sha512-rhlLWwVkOodBGRMK0mAmE34l2a+BqM2Y7q1ViuQRBhs/6sZ8d83O4hARHKVwqT5stY4i1l7d7PoemV3uAGI6+g==
 
 "@types/debug@^4.0.0":
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
-  integrity sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.10.tgz#f23148a6eb771a34c466a4fc28379d8101e84494"
+  integrity sha512-tOSCru6s732pofZ+sMv9o4o3Zc+Sa8l3bxd/tweTQudFn06vAzb13ZX46Zi6m6EJ+RUbRTHvgQJ1gBtSgkaUYA==
   dependencies:
     "@types/ms" "*"
 
 "@types/dom4@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
-  integrity sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.3.tgz#bd084dbd4c15bee49442c5cd231acdcd14efbe90"
+  integrity sha512-xQT2XxtDGP1WFfTB/Lti629HpguNrfZ3dg84bWXASd6JUay6WgR73Wb6DG3kmr2/iGAWZ7NNLceGVWYWfgPX0g==
 
 "@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
-  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.4.tgz#d9748f5742171b26218516cf1828b8eafaf8a9fa"
+  integrity sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -2448,29 +2628,36 @@
     "@types/node" "*"
 
 "@types/hast@^2.0.0":
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.5.tgz#08caac88b44d0fdd04dc17a19142355f43bd8a7a"
-  integrity sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.7.tgz#5e9bd7ab4452d5313aeec9d38fbc193a70f8d810"
+  integrity sha512-EVLigw5zInURhzfXUM65eixfadfsHKomGKUakToXo84t8gGIJuTcD2xooM2See7GyQ7DRtYjhCHnSUQez8JaLw==
   dependencies:
     "@types/unist" "^2"
 
-"@types/hoist-non-react-statics@^3.3.0":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/hast@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.2.tgz#e6c1126a33955cb9493a5074ddf1873fb48248c7"
+  integrity sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.4.tgz#cc477ce0283bb9d19ea0cbfa2941fe2c8493a1be"
+  integrity sha512-ZchYkbieA+7tnxwX/SCBySx9WwvWR8TaP5tb2jRAzwvLb/rWchGw3v0w3pqUbUvj0GCwW2Xz/AVPSk6kUGctXQ==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
 "@types/js-cookie@^3.0.2", "@types/js-cookie@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
-  integrity sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.5.tgz#5eba4033a4f17fb2b29d975892694315194eca33"
+  integrity sha512-dtLshqoiGRDHbHueIT9sjkd2F4tW1qPSX2xKAQK8p1e6pM+Z913GM1shv7dOqqasEMYbC5zEaClJomQe8OtQLA==
 
 "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
-  version "7.0.12"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
-  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.14.tgz#74a97a5573980802f32c8e47b663530ab3b6b7d1"
+  integrity sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -2478,21 +2665,21 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/linkify-it@*":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.3.tgz#15a0712296c5041733c79efe233ba17ae5a7587b"
-  integrity sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.4.tgz#def6a9bb0ce78140860602f16ace37a9997f086a"
+  integrity sha512-hPpIeeHb/2UuCw06kSNAOVWgehBLXEo0/fUs0mw3W2qhqX89PI2yvok83MnuctYGCPrabGIoi0fFso4DQ+sNUQ==
 
 "@types/lodash.debounce@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
-  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.8.tgz#d5fe36a35aa57773e05d960b3e3c703fd9ffb8b3"
+  integrity sha512-REumepIJjQFSOaBUoj81U5ZzF9YIhovzE2Lm6ejUbycmwx597k2ivG1cVfPtAj4eVuSbGoZDkJR0sRIahsE6/Q==
   dependencies:
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.14.198"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.198.tgz#4d27465257011aedc741a809f1269941fa2c5d4c"
-  integrity sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==
+  version "4.14.200"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.200.tgz#435b6035c7eba9cdf1e039af8212c9e9281e7149"
+  integrity sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==
 
 "@types/markdown-it@^12.2.3":
   version "12.2.3"
@@ -2503,16 +2690,16 @@
     "@types/mdurl" "*"
 
 "@types/mdast@^3.0.0":
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
-  integrity sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.14.tgz#0735473a5b35be032b9f2685b7413cbab1b8a639"
+  integrity sha512-gVZ04PGgw1qLZKsnWnyFv4ORnaJ+DXLdHTVSFbU8yX6xZ34Bjg4Q32yPkmveUP1yItXReKfB0Aknlh/3zxTKAw==
   dependencies:
     "@types/unist" "^2"
 
 "@types/mdurl@*":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
-  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.4.tgz#574bfbec51eb41ab5f444116c8555bc4347feba5"
+  integrity sha512-ARVxjAEX5TARFRzpDRVC6cEk0hUIXCCwaMhz8y7S1/PxU6zZS1UMjyobz7q4w/D/R552r4++EhwmXK1N2rAy0A==
 
 "@types/minimatch@*":
   version "5.1.2"
@@ -2520,14 +2707,16 @@
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/ms@*":
-  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
-  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.33.tgz#80bf1da64b15f21fd8c1dc387c31929317d99ee9"
+  integrity sha512-AuHIyzR5Hea7ij0P9q7vx7xu4z0C28ucwjAZC0ja7JhINyCnOw8/DnvAPQQ9TfOlCtZAmCERKQX9+o1mgQhuOQ==
 
-"@types/node@*":
-  version "20.6.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.6.0.tgz#9d7daa855d33d4efec8aea88cd66db1c2f0ebe16"
-  integrity sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==
+"@types/node@*", "@types/node@^20.5.2":
+  version "20.8.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.10.tgz#a5448b895c753ae929c26ce85cab557c6d4a365e"
+  integrity sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==
+  dependencies:
+    undici-types "~5.26.4"
 
 "@types/node@18.0.6":
   version "18.0.6"
@@ -2539,50 +2728,48 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.14.1.tgz#90dad8476f1e42797c49d6f8b69aaf9f876fc69f"
   integrity sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==
 
+"@types/node@18.15.3":
+  version "18.15.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
+  integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==
+
 "@types/nprogress@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
-  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.2.tgz#c73bf540ac7926fb1b6d03f9d2725e07b3848d65"
+  integrity sha512-2wLrSJXLztGmr7wXwM0hA/wuIOY9DznVdd+ZFofHOiXcj9JnVt+2ZeLRJ7v5ZVlmheSkUOSg3Q3O4Ce7yji79A==
 
 "@types/object.omit@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.1.tgz#1b9de058cf94344b9284308a41b17e3a356ed18e"
-  integrity sha512-24XD34UeRWw505TsMNBrQ4bES2s8IxiFC59mmNUFhTz9IX2hAtA7gQ8wVww1i17QmhBYILg5iqYP2y7aqA3pwQ==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.2.tgz#13d23915cc16fa54b0d4cfbcb79840f4fe1474d9"
+  integrity sha512-BxWU36cMP+FKD3OLFluQaj2cBev2sx2LJaHELuphHwnleq+xnEhTmuYYYx4pOT/1U/ZoR6B+RdvxWh2FD6lGGA==
 
 "@types/object.pick@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.2.tgz#9eb28118240ad8f658b9c9c6caf35359fdb37150"
-  integrity sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.3.tgz#f4d4a76e9ef1161e965b963d2bb33c3f6c300125"
+  integrity sha512-qZqHmdGEALeSATMB1djT1S5szv6Wtpb7DKpHrt2XG4iyKlV7C2Xk8GmDXr1KXakOqUfX6ohw7ceruYt4NVmB1Q==
 
 "@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.1.tgz#27f7559836ad796cea31acb63163b203756a5b4e"
+  integrity sha512-3YmXzzPAdOTVljVMkTMBdBEvlOLg2cDQaDhnnhT3nT9uDbnJzjWhKlzb+desT12Y7tGqaN6d+AbozcKzyL36Ng==
 
-"@types/prop-types@*", "@types/prop-types@^15.0.0":
-  version "15.7.5"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
-  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+"@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.9":
+  version "15.7.9"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
+  integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
 
-"@types/react-beautiful-dnd@^13.1.2":
-  version "13.1.4"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz#bcec72da719c18c0d8b4a7cb00e7fb443211d6d7"
-  integrity sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-color@^3.0.6":
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
-  integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
+"@types/react-color@^3.0.6", "@types/react-color@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.9.tgz#8dbb0d798f2979c3d7e2e26dd46321e80da950b4"
+  integrity sha512-Ojyc6jySSKvM6UYQrZxaYe0JZXtgHHXwR2q9H4MhcNCswFdeZH1owYZCvPtdHtMOfh7t8h1fY0Gd0nvU1JGDkQ==
   dependencies:
     "@types/react" "*"
     "@types/reactcss" "*"
 
 "@types/react-datepicker@^4.8.0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.0.tgz#24a9c03e79ab4b232b346edd006cfb6060b0fb43"
-  integrity sha512-kr10s8ex4+MmCJmzdhA9kfmoMQBmsW5uDYDlH+8f/PgStrp7rRaz23Y/cvTiMgvESVq8ujDh4SOo6jlSwEw13g==
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.19.1.tgz#c7102c015eb0f63b0f1707e34799d289408654be"
+  integrity sha512-HV52yjxuRi49psAVuHTFXXr+RSrCbIFDn9ayei0YH8xVVAXCO+5GwHAGKeREAmNbneweN0ySGoByr90yJCAnrQ==
   dependencies:
     "@popperjs/core" "^2.9.2"
     "@types/react" "*"
@@ -2596,68 +2783,40 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@18.0.6":
-  version "18.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
-  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+"@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" "*"
 
-"@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.14":
+  version "18.2.14"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.14.tgz#c01ba40e5bb57fc1dc41569bb3ccdb19eab1c539"
+  integrity sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==
   dependencies:
     "@types/react" "*"
 
-"@types/react-redux@^7.1.20":
-  version "7.1.26"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.26.tgz#84149f5614e40274bb70fcbe8f7cae6267d548b1"
-  integrity sha512-UKPo7Cm7rswYU6PH6CmTNCRv5NYF3HrgKuHEYTK8g/3czYLrUux50gQ2pkxc9c7ZpQZi+PNhgmI8oNIRoiVIxg==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
-"@types/react-transition-group@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
-  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+"@types/react-transition-group@^4.4.8":
+  version "4.4.8"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.8.tgz#46f87d80512959cac793ecc610a93d80ef241ccf"
+  integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.17":
-  version "18.2.21"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
-  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.15":
-  version "18.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
-  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.28":
-  version "18.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
-  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
+"@types/react@*", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.2.35", "@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==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/reactcss@*":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
-  integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.8.tgz#8c2342f5f650cc5f9e8bea73199c17ba747b9126"
+  integrity sha512-IzxChTOxOFWZb1RhXoNZ7oEi3BtUdLQIFheoOurvu6iu0X9kwhoFe73DW9EVFxVFTKnd8bb8b1dKtO0tokM3eA==
   dependencies:
     "@types/react" "*"
 
@@ -2669,14 +2828,14 @@
     "@types/node" "*"
 
 "@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.5.tgz#4751153abbf8d6199babb345a52e1eb4167d64af"
+  integrity sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==
 
 "@types/semver@^7.3.12":
-  version "7.5.2"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.2.tgz#31f6eec1ed7ec23f4f05608d3a2d381df041f564"
-  integrity sha512-7aqorHYgdNO4DM36stTiGO3DvKoex9TQRwsJU6vMaFGyqpBA1MNZkz+PG3gaNUPpTAOYhT1WR7M1JyA3fbS9Cw==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.4.tgz#0a41252ad431c473158b22f9bfb9a63df7541cff"
+  integrity sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==
 
 "@types/throttle-debounce@^2.1.0":
   version "2.1.0"
@@ -2684,14 +2843,24 @@
   integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
 
 "@types/trusted-types@^2.0.2":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.4.tgz#2b38784cd16957d3782e8e2b31c03bc1d13b4d65"
-  integrity sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.5.tgz#5cac7e7df3275bb95f79594f192d97da3b4fd5fe"
+  integrity sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==
+
+"@types/unist@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.1.tgz#778652d02ddec1bfc9e5e938fec8d407b8e56cba"
+  integrity sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==
 
 "@types/unist@^2", "@types/unist@^2.0.0":
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.8.tgz#bb197b9639aa1a04cf464a617fe800cccd92ad5c"
-  integrity sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.9.tgz#72e164381659a49557b0a078b28308f2c6a3e1ce"
+  integrity sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==
+
+"@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"
@@ -2699,11 +2868,11 @@
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@types/uuid@^9.0.1":
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.3.tgz#6cdd939b4316b4f81625de9f06028d848c4a1533"
-  integrity sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.6.tgz#c91ae743d8344a54b2b0c691195f5ff5265f6dfb"
+  integrity sha512-BT2Krtx4xaO6iwzwMFUYvWBWkV2pr37zD68Vmp1CDV196MzczBRxuEpD6Pr395HAgebC/co7hOphs53r8V7jew==
 
-"@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==
@@ -2787,6 +2956,11 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
 acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2798,9 +2972,9 @@ acorn@^7.4.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.8.2, acorn@^8.9.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
-  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
 agent-base@6:
   version "6.0.2"
@@ -2895,7 +3069,7 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^5.1.3:
+aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -2910,7 +3084,7 @@ array-buffer-byte-length@^1.0.0:
     call-bind "^1.0.2"
     is-array-buffer "^3.0.1"
 
-array-includes@^3.1.5, array-includes@^3.1.6:
+array-includes@^3.1.5, array-includes@^3.1.6, array-includes@^3.1.7:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
   integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
@@ -2938,7 +3112,7 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
-array.prototype.findlastindex@^1.2.2:
+array.prototype.findlastindex@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
   integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
@@ -2949,7 +3123,7 @@ array.prototype.findlastindex@^1.2.2:
     es-shim-unscopables "^1.0.0"
     get-intrinsic "^1.2.1"
 
-array.prototype.flat@^1.3.1:
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
   integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
@@ -2959,7 +3133,7 @@ array.prototype.flat@^1.3.1:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1:
+array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
   integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
@@ -2980,7 +3154,7 @@ array.prototype.tosorted@^1.1.1:
     es-shim-unscopables "^1.0.0"
     get-intrinsic "^1.2.1"
 
-arraybuffer.prototype.slice@^1.0.1:
+arraybuffer.prototype.slice@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
   integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
@@ -2993,10 +3167,10 @@ arraybuffer.prototype.slice@^1.0.1:
     is-array-buffer "^3.0.2"
     is-shared-array-buffer "^1.0.2"
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
 astral-regex@^2.0.0:
   version "2.0.0"
@@ -3004,9 +3178,9 @@ astral-regex@^2.0.0:
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 async@^3.2.3:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
-  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
+  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
 
 asynciterator.prototype@^1.0.0:
   version "1.0.0"
@@ -3030,14 +3204,14 @@ attr-accept@^2.2.2:
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
-autoprefixer@^10.4.15:
-  version "10.4.15"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.15.tgz#a1230f4aeb3636b89120b34a1f513e2f6834d530"
-  integrity sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==
+autoprefixer@^10.4.14, autoprefixer@^10.4.15:
+  version "10.4.16"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
+  integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
   dependencies:
     browserslist "^4.21.10"
-    caniuse-lite "^1.0.30001520"
-    fraction.js "^4.2.0"
+    caniuse-lite "^1.0.30001538"
+    fraction.js "^4.3.6"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
@@ -3047,21 +3221,21 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.6.2:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.1.tgz#6948854183ee7e7eae336b9877c5bafa027998ea"
-  integrity sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==
+axe-core@=4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
 axios@^1.1.3, axios@^1.3.4:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
-  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102"
+  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^3.1.1:
+axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
   integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
@@ -3092,29 +3266,29 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz#8097b4cb4af5b64a1d11332b6fb72ef5e64a054c"
-  integrity sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==
+babel-plugin-polyfill-corejs2@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313"
+  integrity sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==
   dependencies:
     "@babel/compat-data" "^7.22.6"
-    "@babel/helper-define-polyfill-provider" "^0.4.2"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
     semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz#b4f719d0ad9bb8e0c23e3e630c0c8ec6dd7a1c52"
-  integrity sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==
+babel-plugin-polyfill-corejs3@^0.8.5:
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz#25c2d20002da91fe328ff89095c85a391d6856cf"
+  integrity sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.2"
-    core-js-compat "^3.31.0"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
+    core-js-compat "^3.33.1"
 
-babel-plugin-polyfill-regenerator@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz#80d0f3e1098c080c8b5a65f41e9427af692dc326"
-  integrity sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==
+babel-plugin-polyfill-regenerator@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz#d4c49e4b44614607c13fb769bcd85c72bb26a4a5"
+  integrity sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.2"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
 
 bail@^2.0.0:
   version "2.0.2"
@@ -3172,15 +3346,15 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.10, browserslist@^4.21.9:
-  version "4.21.10"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
-  integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
+browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.22.1:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
   dependencies:
-    caniuse-lite "^1.0.30001517"
-    electron-to-chromium "^1.4.477"
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
     node-releases "^2.0.13"
-    update-browserslist-db "^1.0.11"
+    update-browserslist-db "^1.0.13"
 
 buffer-from@^1.0.0:
   version "1.1.2"
@@ -3200,13 +3374,33 @@ 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==
 
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+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:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
+    load-tsconfig "^0.2.0"
+
+bundle-require@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-4.0.2.tgz#65fc74ff14eabbba36d26c9a6161bd78fff6b29e"
+  integrity sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==
+  dependencies:
+    load-tsconfig "^0.2.3"
+
+cac@^6.7.12:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
+call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.4, call-bind@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513"
+  integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==
+  dependencies:
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.1"
+    set-function-length "^1.1.1"
 
 callsites@^3.0.0:
   version "3.1.0"
@@ -3226,10 +3420,10 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
-  version "1.0.30001534"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz#f24a9b2a6d39630bac5c132b5dff89b39a12e7dd"
-  integrity sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
+  version "1.0.30001561"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz#752f21f56f96f1b1a52e97aae98c57c562d5d9da"
+  integrity sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -3293,7 +3487,7 @@ character-entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
-chokidar@^3.5.3:
+chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3313,6 +3507,13 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+class-variance-authority@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522"
+  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+  dependencies:
+    clsx "2.0.0"
+
 classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
@@ -3330,11 +3531,16 @@ client-only@^0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^2.0.0:
+clsx@2.0.0, clsx@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 cmdk@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.0.tgz#53c52d56d8776c8bb8ced1055b5054100c388f7c"
@@ -3434,27 +3640,27 @@ constant-case@^3.0.4:
     tslib "^2.0.3"
     upper-case "^2.0.2"
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.5.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
-cookie@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
-  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
 cookie@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-core-js-compat@^3.31.0:
-  version "3.32.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.2.tgz#8047d1a8b3ac4e639f0d4f66d4431aa3b16e004c"
-  integrity sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ==
+core-js-compat@^3.31.0, core-js-compat@^3.33.1:
+  version "3.33.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.2.tgz#3ea4563bfd015ad4e4b52442865b02c62aba5085"
+  integrity sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
   dependencies:
-    browserslist "^4.21.10"
+    browserslist "^4.22.1"
 
 cosmiconfig@^7.0.0:
   version "7.1.0"
@@ -3472,7 +3678,7 @@ crelt@^1.0.0:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
-cross-spawn@^7.0.2:
+cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3486,7 +3692,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.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==
@@ -3621,7 +3827,7 @@ date-fns@^2.0.1, date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3676,10 +3882,10 @@ deepmerge@^4.2.2, deepmerge@^4.3.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
-define-data-property@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.0.tgz#0db13540704e1d8d479a0656cf781267531b9451"
-  integrity sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==
+define-data-property@^1.0.1, define-data-property@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
   dependencies:
     get-intrinsic "^1.2.1"
     gopd "^1.0.1"
@@ -3732,6 +3938,13 @@ detect-node-es@^1.1.0:
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
+devlop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
+  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
+  dependencies:
+    dequal "^2.0.0"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -3806,10 +4019,10 @@ ejs@^3.1.6:
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.477:
-  version "1.4.520"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.520.tgz#c19c25a10d87bd88a9aae2b76cae9235a50c2994"
-  integrity sha512-Frfus2VpYADsrh1lB3v/ft/WVFlVzOIm+Q0p7U7VqHI6qr7NWHYKe+Wif3W50n7JAFoBsWVsoU0+qDks6WQ60g==
+electron-to-chromium@^1.4.535:
+  version "1.4.576"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz#0c6940fdc0d60f7e34bd742b29d8fa847c9294d1"
+  integrity sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3862,25 +4075,25 @@ error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 es-abstract@^1.22.1:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"
-  integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
+  version "1.22.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
+  integrity sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==
   dependencies:
     array-buffer-byte-length "^1.0.0"
-    arraybuffer.prototype.slice "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.2"
     available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    call-bind "^1.0.5"
     es-set-tostringtag "^2.0.1"
     es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.5"
-    get-intrinsic "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.2"
     get-symbol-description "^1.0.0"
     globalthis "^1.0.3"
     gopd "^1.0.1"
-    has "^1.0.3"
     has-property-descriptors "^1.0.0"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
+    hasown "^2.0.0"
     internal-slot "^1.0.5"
     is-array-buffer "^3.0.2"
     is-callable "^1.2.7"
@@ -3888,25 +4101,25 @@ es-abstract@^1.22.1:
     is-regex "^1.1.4"
     is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
-    is-typed-array "^1.1.10"
+    is-typed-array "^1.1.12"
     is-weakref "^1.0.2"
-    object-inspect "^1.12.3"
+    object-inspect "^1.13.1"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.0"
-    safe-array-concat "^1.0.0"
+    regexp.prototype.flags "^1.5.1"
+    safe-array-concat "^1.0.1"
     safe-regex-test "^1.0.0"
-    string.prototype.trim "^1.2.7"
-    string.prototype.trimend "^1.0.6"
-    string.prototype.trimstart "^1.0.6"
+    string.prototype.trim "^1.2.8"
+    string.prototype.trimend "^1.0.7"
+    string.prototype.trimstart "^1.0.7"
     typed-array-buffer "^1.0.0"
     typed-array-byte-length "^1.0.0"
     typed-array-byte-offset "^1.0.0"
     typed-array-length "^1.0.4"
     unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.10"
+    which-typed-array "^1.1.13"
 
-es-iterator-helpers@^1.0.12:
+es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
   integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
@@ -3927,20 +4140,20 @@ es-iterator-helpers@^1.0.12:
     safe-array-concat "^1.0.1"
 
 es-set-tostringtag@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
-  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz#11f7cc9f63376930a5f20be4915834f4bc74f9c9"
+  integrity sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==
   dependencies:
-    get-intrinsic "^1.1.3"
-    has "^1.0.3"
+    get-intrinsic "^1.2.2"
     has-tostringtag "^1.0.0"
+    hasown "^2.0.0"
 
 es-shim-unscopables@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
-  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
   dependencies:
-    has "^1.0.3"
+    hasown "^2.0.0"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
@@ -3951,6 +4164,161 @@ 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"
+  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.18.20"
+    "@esbuild/android-arm64" "0.18.20"
+    "@esbuild/android-x64" "0.18.20"
+    "@esbuild/darwin-arm64" "0.18.20"
+    "@esbuild/darwin-x64" "0.18.20"
+    "@esbuild/freebsd-arm64" "0.18.20"
+    "@esbuild/freebsd-x64" "0.18.20"
+    "@esbuild/linux-arm" "0.18.20"
+    "@esbuild/linux-arm64" "0.18.20"
+    "@esbuild/linux-ia32" "0.18.20"
+    "@esbuild/linux-loong64" "0.18.20"
+    "@esbuild/linux-mips64el" "0.18.20"
+    "@esbuild/linux-ppc64" "0.18.20"
+    "@esbuild/linux-riscv64" "0.18.20"
+    "@esbuild/linux-s390x" "0.18.20"
+    "@esbuild/linux-x64" "0.18.20"
+    "@esbuild/netbsd-x64" "0.18.20"
+    "@esbuild/openbsd-x64" "0.18.20"
+    "@esbuild/sunos-x64" "0.18.20"
+    "@esbuild/win32-arm64" "0.18.20"
+    "@esbuild/win32-ia32" "0.18.20"
+    "@esbuild/win32-x64" "0.18.20"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -4011,19 +4379,34 @@ eslint-config-next@13.2.1:
     eslint-plugin-react "^7.31.7"
     eslint-plugin-react-hooks "^4.5.0"
 
+eslint-config-next@13.2.4:
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.2.4.tgz#8aa4d42da3a575a814634ba9c88c8d25266c5fdd"
+  integrity sha512-lunIBhsoeqw6/Lfkd6zPt25w1bn0znLA/JCL+au1HoEpSb4/PpsOYsYtgV/q+YPsoKIOzFyU5xnb04iZnXjUvg==
+  dependencies:
+    "@next/eslint-plugin-next" "13.2.4"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.42.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
+
 eslint-config-prettier@^8.3.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
   integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
 
 eslint-config-turbo@latest:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.13.tgz#3743def3c76e27c3969c16222137f5bd913a10e2"
-  integrity sha512-Ffa0SxkRCPMtfUX/HDanEqsWoLwZTQTAXO9W4IsOtycb2MzJDrVcLmoFW5sMwCrg7gjqbrC4ZJoD+1SPPzIVqg==
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.16.tgz#175cabd8eb1ec5fb8e254abcb09df3955fe476a1"
+  integrity sha512-O3NQI72bQHV7FvSC6lWj66EGx8drJJjuT1kuInn6nbMLOHdMBhSUX/8uhTAlHRQdlxZk2j9HtgFCIzSc93w42g==
   dependencies:
-    eslint-plugin-turbo "1.10.13"
+    eslint-plugin-turbo "1.10.16"
 
-eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
+eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
   integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
@@ -4044,9 +4427,9 @@ eslint-import-resolver-typescript@^2.7.1:
     tsconfig-paths "^3.14.1"
 
 eslint-import-resolver-typescript@^3.5.2:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.0.tgz#36f93e1eb65a635e688e16cae4bead54552e3bbd"
-  integrity sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
+  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
   dependencies:
     debug "^4.3.4"
     enhanced-resolve "^5.12.0"
@@ -4064,49 +4447,49 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
-  version "2.28.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4"
-  integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155"
+  integrity sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==
   dependencies:
-    array-includes "^3.1.6"
-    array.prototype.findlastindex "^1.2.2"
-    array.prototype.flat "^1.3.1"
-    array.prototype.flatmap "^1.3.1"
+    array-includes "^3.1.7"
+    array.prototype.findlastindex "^1.2.3"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.7"
+    eslint-import-resolver-node "^0.3.9"
     eslint-module-utils "^2.8.0"
-    has "^1.0.3"
-    is-core-module "^2.13.0"
+    hasown "^2.0.0"
+    is-core-module "^2.13.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.fromentries "^2.0.6"
-    object.groupby "^1.0.0"
-    object.values "^1.1.6"
+    object.fromentries "^2.0.7"
+    object.groupby "^1.0.1"
+    object.values "^1.1.7"
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
 eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
-  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
   dependencies:
-    "@babel/runtime" "^7.20.7"
-    aria-query "^5.1.3"
-    array-includes "^3.1.6"
-    array.prototype.flatmap "^1.3.1"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.6.2"
-    axobject-query "^3.1.1"
+    "@babel/runtime" "^7.23.2"
+    aria-query "^5.3.0"
+    array-includes "^3.1.7"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "=4.7.0"
+    axobject-query "^3.2.1"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.3"
-    language-tags "=1.0.5"
+    es-iterator-helpers "^1.0.15"
+    hasown "^2.0.0"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
     minimatch "^3.1.2"
-    object.entries "^1.1.6"
-    object.fromentries "^2.0.6"
-    semver "^6.3.0"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
 
 eslint-plugin-react-hooks@^4.5.0:
   version "4.6.0"
@@ -4155,10 +4538,10 @@ eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-turbo@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.13.tgz#d2c14c7e733ee1462c94d79dce29d75f42ced275"
-  integrity sha512-el4AAmn0zXmvHEyp1h0IQMfse10Vy8g5Vbg4IU3+vD9CSj5sDbX07iFVt8sCKg7og9Q5FAa9mXzlCf7t4vYgzg==
+eslint-plugin-turbo@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.16.tgz#368723f2140617f273c60f65b09267f73b496cd9"
+  integrity sha512-ZjrR88MTN64PNGufSEcM0tf+V1xFYVbeiMeuIqr0aiABGomxFLo4DBkQ7WI4WzkZtWQSIA2sP+yxqSboEfL9MQ==
   dependencies:
     dotenv "16.0.3"
 
@@ -4252,6 +4635,52 @@ eslint@8.34.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
+eslint@8.36.0:
+  version "8.36.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf"
+  integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@eslint/eslintrc" "^2.0.1"
+    "@eslint/js" "8.36.0"
+    "@humanwhocodes/config-array" "^0.11.8"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.5.0"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
 eslint@^7.23.0, eslint@^7.32.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
@@ -4299,17 +4728,18 @@ eslint@^7.23.0, eslint@^7.32.0:
     v8-compile-cache "^2.0.3"
 
 eslint@^8.31.0:
-  version "8.49.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.49.0.tgz#09d80a89bdb4edee2efcf6964623af1054bf6d42"
-  integrity sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==
+  version "8.53.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.53.0.tgz#14f2c8244298fcae1f46945459577413ba2697ce"
+  integrity sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.2"
-    "@eslint/js" "8.49.0"
-    "@humanwhocodes/config-array" "^0.11.11"
+    "@eslint/eslintrc" "^2.1.3"
+    "@eslint/js" "8.53.0"
+    "@humanwhocodes/config-array" "^0.11.13"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
     ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -4350,7 +4780,7 @@ espree@^7.3.0, espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
-espree@^9.4.0, espree@^9.6.0, espree@^9.6.1:
+espree@^9.4.0, espree@^9.5.0, espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
@@ -4403,6 +4833,26 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventsource-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/eventsource-parser/-/eventsource-parser-0.1.0.tgz#4a6b84751ca8e704040e6f7f50e7d77344fa1b7c"
+  integrity sha512-M9QjFtEIkwytUarnx113HGmgtk52LSn3jNAtnWKi3V+b9rqSfQeVdLsaD5AG/O4IrGQwmAAHBIsqbmURPTd2rA==
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
 expand-template@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
@@ -4423,7 +4873,7 @@ fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1:
+fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -4525,23 +4975,23 @@ find-up@^5.0.0:
     path-exists "^4.0.0"
 
 flat-cache@^3.0.4:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.0.tgz#0e54ab4a1a60fe87e2946b6b00657f1c99e1af3f"
-  integrity sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.1.tgz#a02a15fdec25a8f844ff7cc658f03dd99eb4609b"
+  integrity sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==
   dependencies:
-    flatted "^3.2.7"
+    flatted "^3.2.9"
     keyv "^4.5.3"
     rimraf "^3.0.2"
 
-flatted@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
-  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+flatted@^3.2.9:
+  version "3.2.9"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
+  integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
 follow-redirects@^1.15.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -4564,10 +5014,10 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
-fraction.js@^4.2.0:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.6.tgz#e9e3acec6c9a28cf7bc36cbe35eea4ceb2c5c92d"
-  integrity sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==
+fraction.js@^4.3.6:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 framework-utils@^1.1.0:
   version "1.1.0"
@@ -4599,12 +5049,12 @@ fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.5:
+function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
   integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
@@ -4630,22 +5080,22 @@ gensync@^1.0.0-beta.2:
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
 gesto@^1.19.0, gesto@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.19.1.tgz#b2a29730663eecf77b248982bbff929e79d4a461"
-  integrity sha512-ofWVEdqmnpFm3AFf7aoclhoayseb3OkwSiXbXusKYu/99iN5HgeWP+SWqdghQ5TFlOgP5Zlz+6SY8mP2V0kFaQ==
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.19.2.tgz#1f5ab5cf49bd5a1ec2ee3805f35e77161343ea7b"
+  integrity sha512-i6OGsrR2GN7n2dQaUhY+LZ+AAZgBNg5/1kest/ST5VRRflfVl5bSfvOkJMDmKEUrGbKF6eIDkFz/DnCXJD4UMA==
   dependencies:
     "@daybrush/utils" "^1.13.0"
     "@scena/event-emitter" "^1.0.2"
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
-  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
+  integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
   dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    function-bind "^1.1.2"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
+    hasown "^2.0.0"
 
 get-nonce@^1.0.0:
   version "1.0.1"
@@ -4657,6 +5107,11 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-symbol-description@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
@@ -4666,9 +5121,9 @@ get-symbol-description@^1.0.0:
     get-intrinsic "^1.1.1"
 
 get-tsconfig@^4.5.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.0.tgz#06ce112a1463e93196aa90320c35df5039147e34"
-  integrity sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.2.tgz#0dcd6fb330391d46332f4c6c1bf89a6514c2ddce"
+  integrity sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
@@ -4744,9 +5199,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0, globals@^13.6.0, globals@^13.9.0:
-  version "13.21.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.21.0.tgz#163aae12f34ef502f5153cfbdd3600f36c63c571"
-  integrity sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==
+  version "13.23.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
+  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
   dependencies:
     type-fest "^0.20.2"
 
@@ -4757,7 +5212,7 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
-globby@^11.0.4, globby@^11.1.0:
+globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -4823,11 +5278,11 @@ has-flag@^4.0.0:
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
 has-property-descriptors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
-  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz#52ba30b6c5ec87fd89fa574bc1c39125c6f65340"
+  integrity sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==
   dependencies:
-    get-intrinsic "^1.1.1"
+    get-intrinsic "^1.2.2"
 
 has-proto@^1.0.1:
   version "1.0.1"
@@ -4846,12 +5301,12 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
   dependencies:
-    function-bind "^1.1.1"
+    function-bind "^1.1.2"
 
 hast-util-whitespace@^2.0.0:
   version "2.0.1"
@@ -4866,7 +5321,12 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
-highlight.js@^11.8.0, highlight.js@~11.8.0:
+highlight.js@^11.8.0, highlight.js@~11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
+highlight.js@~11.8.0:
   version "11.8.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
   integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
@@ -4886,6 +5346,11 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
 idb@^7.0.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
@@ -4948,12 +5413,12 @@ inline-style-parser@0.1.1:
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
 internal-slot@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
-  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
+  integrity sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==
   dependencies:
-    get-intrinsic "^1.2.0"
-    has "^1.0.3"
+    get-intrinsic "^1.2.2"
+    hasown "^2.0.0"
     side-channel "^1.0.4"
 
 internmap@^1.0.0:
@@ -5034,12 +5499,12 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.9.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
-  integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
   dependencies:
-    has "^1.0.3"
+    hasown "^2.0.0"
 
 is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
@@ -5205,7 +5670,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.9:
+is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.9:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
   integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
@@ -5286,10 +5751,15 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.18.2:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
-  integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
+jiti@^1.19.1:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
+joycon@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
+  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
 js-cookie@^3.0.1:
   version "3.0.5"
@@ -5387,7 +5857,7 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
   integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
@@ -5397,6 +5867,13 @@ jsonpointer@^5.0.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+jsx-dom-cjs@^8.0.3:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/jsx-dom-cjs/-/jsx-dom-cjs-8.0.7.tgz#098c54680ebf5bb6f6d12cdea5cde3799c172212"
+  integrity sha512-dQWnuQ+bTm7o72ZlJU4glzeMX8KLxx5U+ZwmEAzVP1+roL7BSM0MrkWdHjdsuNgmxobZCJ+qgiot9EgbJPOoEg==
+  dependencies:
+    csstype "^3.1.2"
+
 keycode@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.1.tgz#09c23b2be0611d26117ea2501c2c391a01f39eff"
@@ -5413,9 +5890,9 @@ keycon@^1.2.0:
     keycode "^2.2.0"
 
 keyv@^4.5.3:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.3.tgz#00873d2b046df737963157bd04f294ca818c9c25"
-  integrity sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
   dependencies:
     json-buffer "3.0.1"
 
@@ -5424,17 +5901,17 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
-language-subtag-registry@~0.3.2:
+language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@=1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
   dependencies:
-    language-subtag-registry "~0.3.2"
+    language-subtag-registry "^0.3.20"
 
 leven@^3.1.0:
   version "3.1.0"
@@ -5478,6 +5955,11 @@ 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.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==
+
 loader-utils@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@@ -5571,6 +6053,15 @@ lowlight@^2.9.0:
     fault "^2.0.0"
     highlight.js "~11.8.0"
 
+lowlight@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.1.0.tgz#aa394c5f3a7689fce35fa49a7c850ba3ead4f590"
+  integrity sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    devlop "^1.0.0"
+    highlight.js "~11.9.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -5585,20 +6076,20 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lru_map@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
-  integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
+lucide-react@^0.244.0:
+  version "0.244.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b"
+  integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg==
 
 lucide-react@^0.263.1:
   version "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"
@@ -5632,9 +6123,9 @@ markdown-it-task-lists@^2.1.1:
   integrity sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==
 
 markdown-it@^13.0.1:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
-  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.2.tgz#1bc22e23379a6952e5d56217fbed881e0c94d536"
+  integrity sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==
   dependencies:
     argparse "^2.0.1"
     entities "~3.0.1"
@@ -5700,10 +6191,10 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
-memoize-one@^5.1.1:
-  version "5.2.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"
@@ -5929,6 +6420,11 @@ mime-types@^2.1.12, mime-types@^2.1.27:
   dependencies:
     mime-db "1.52.0"
 
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
 mimic-response@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
@@ -5966,9 +6462,9 @@ mkdirp@^0.5.5:
     minimist "^1.2.6"
 
 mobx-react-lite@^4.0.3:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.4.tgz#eee3c55dfa6841365d5a7764971c456db12570fb"
-  integrity sha512-68uNYvQC/5Dazs3sIBv+bnpzRwcWde8y4ujHiLizhq8yeQtJ2tlNUGSh4r40gyE5M0utACIofBDsAj2hplcovQ==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
+  integrity sha512-StfB2wxE8imKj1f6T8WWPf4lVMx3cYH9Iy60bbKXEs21+HQ4tvvfIBZfSmMXgQAefi8xYEwQIz4GN9s0d2h7dg==
   dependencies:
     use-sync-external-store "^1.2.0"
 
@@ -6002,9 +6498,9 @@ mz@^2.7.0:
     thenify-all "^1.0.0"
 
 nanoid@^3.3.4, nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 napi-build-utils@^1.0.1:
   version "1.0.2"
@@ -6081,9 +6577,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-abi@^3.3.0:
-  version "3.47.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.47.0.tgz#6cbfa2916805ae25c2b7156ca640131632eb05e8"
-  integrity sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==
+  version "3.51.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.51.0.tgz#970bf595ef5a26a271307f8a4befa02823d4e87d"
+  integrity sha512-SQkEP4hmNWjlniS5zdnfIXTk1x7Ome85RDzHlTbBtzE97Gfwz/Ipw4v/Ryk20DWIy3yCNVLVlGKApCnmvYoJbA==
   dependencies:
     semver "^7.3.5"
 
@@ -6119,6 +6615,13 @@ normalize.css@^8.0.1:
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
   integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
 
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
@@ -6134,10 +6637,10 @@ object-hash@^3.0.0:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.12.3, object-inspect@^1.9.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
-  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+object-inspect@^1.13.1, object-inspect@^1.9.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
 object-is@^1.0.1:
   version "1.1.5"
@@ -6162,7 +6665,7 @@ object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5, object.entries@^1.1.6:
+object.entries@^1.1.5, object.entries@^1.1.6, object.entries@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
   integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
@@ -6171,7 +6674,7 @@ object.entries@^1.1.5, object.entries@^1.1.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-object.fromentries@^2.0.5, object.fromentries@^2.0.6:
+object.fromentries@^2.0.5, object.fromentries@^2.0.6, object.fromentries@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
   integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
@@ -6180,7 +6683,7 @@ object.fromentries@^2.0.5, object.fromentries@^2.0.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-object.groupby@^1.0.0:
+object.groupby@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
   integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
@@ -6212,7 +6715,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.5, object.values@^1.1.6:
+object.values@^1.1.5, object.values@^1.1.6, object.values@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
   integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
@@ -6228,6 +6731,13 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 optionator@^0.9.1, optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
@@ -6346,7 +6856,7 @@ path-is-inside@^1.0.2:
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
 
-path-key@^3.1.0:
+path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -6426,6 +6936,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"
@@ -6471,10 +6989,10 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.23, postcss@^8.4.29:
-  version "8.4.29"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
-  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
+postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.29:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -6503,12 +7021,17 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-tailwindcss@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.4.tgz#ebfacbcb90e2ca1df671ffe4083e99f81d72040d"
-  integrity sha512-QZzzB1bID6qPsKHTeA9qPo1APmmxfFrA5DD3LQ+vbTmAnY40eJI7t9Q1ocqel2EKMWNPLJqdTDWZj1hKYgqSgg==
+prettier-plugin-tailwindcss@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz#8299b307c7f6467f52732265579ed9375be6c818"
+  integrity sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==
 
-prettier@^2.8.7:
+prettier-plugin-tailwindcss@^0.5.4:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.6.tgz#8e511857a49bf127f078985f52b04a70e8e92285"
+  integrity sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg==
+
+prettier@^2.8.7, prettier@^2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
@@ -6538,9 +7061,9 @@ prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2,
     react-is "^16.13.1"
 
 property-information@^6.0.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
-  integrity sha512-gVNZ74nqhRMiIUYWGQdosYetaKc83x8oT41a0LlV3AAFCAZwCpg4vmGkq8t34+cUhp3cnM4XDiU/7xlgK7HGrg==
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.4.0.tgz#6bc4c618b0c2d68b3bb8b552cbb97f8e300a0f82"
+  integrity sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==
 
 prosemirror-changeset@^2.2.0:
   version "2.2.1"
@@ -6628,14 +7151,7 @@ prosemirror-menu@^1.2.1:
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.8.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
-  integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
-  dependencies:
-    orderedmap "^2.0.0"
-
-prosemirror-model@^1.19.0:
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
   version "1.19.3"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
   integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
@@ -6688,16 +7204,16 @@ prosemirror-trailing-node@^2.0.2:
     escape-string-regexp "^4.0.0"
 
 prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.0, prosemirror-transform@^1.7.3:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.5.tgz#c62aac8645bd4f8cf447d6d53dda80abe8489f03"
-  integrity sha512-U/fWB6frEzY7dzwJUo+ir8dU1JEanaI/RwL12Imy9js/527N0v/IRUKewocP1kTq998JNT18IGtThaDLwLOBxQ==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz#a47c64a3c373c1bd0ff46e95be3210c8dda0cd11"
+  integrity sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==
   dependencies:
     prosemirror-model "^1.0.0"
 
 prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.28.2, prosemirror-view@^1.31.0:
-  version "1.31.8"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.31.8.tgz#01c566a1c26c5a082ca4c04c017b832e1ea45b1f"
-  integrity sha512-VQrEIdiPJ4YV65Ifj2kWISwaiqocMHy7cpUKVQYt19C/87FepoqnwVW3kMKRpeY/nQzED8L+vyOaYDBn0WqT7w==
+  version "1.32.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.32.3.tgz#9019151211f685e553f681837435cae4885beece"
+  integrity sha512-tP7AUTxisM0m3PDxs6vDWgTjgcbFo4fnwg2M/5NHlgMqUJgBNOqSUZETBZKmLD7AxGN3GZ5yqEzQv9r9VCZKrg==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
@@ -6717,9 +7233,9 @@ pump@^3.0.0:
     once "^1.3.1"
 
 punycode@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
-  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -6731,7 +7247,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.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==
@@ -6753,19 +7269,6 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-beautiful-dnd@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
-  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-color@^2.19.3:
   version "2.19.3"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
@@ -6788,9 +7291,9 @@ react-css-styled@^1.1.9:
     framework-utils "^1.1.0"
 
 react-datepicker@^4.8.0:
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.17.0.tgz#1b3eb5d1d60709e991e4c46b049e97911993193c"
-  integrity sha512-z50H44XbnkYlns7gVHzHK4jWAzLfvQehh5Lvindb09J97yVJKIbsmHs98D0f77tdZc3dSYM7oAqsFY55dBeOGQ==
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.21.0.tgz#09b2ba3e53654a8563b22c9f649835716c8456d3"
+  integrity sha512-z0DtuRrKMz9i7dcTusW29VacbM9pn08g1yw0cG+Y5GpodJDxSWv7zUMxl3IwKN9Ap/AMphiepvmT5P+iNCgEiA==
   dependencies:
     "@popperjs/core" "^2.11.8"
     classnames "^2.2.6"
@@ -6822,20 +7325,15 @@ react-fast-compare@^3.0.1:
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
 react-hook-form@^7.38.0:
-  version "7.46.1"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.46.1.tgz#39347dbff19d980cb41087ac32a57abdc6045bb3"
-  integrity sha512-0GfI31LRTBd5tqbXMGXT1Rdsv3rnvy0FjEk8Gn9/4tp6+s77T7DPZuGEpBRXOauL+NhyGT5iaXzdIM2R6F/E+w==
+  version "7.48.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.48.2.tgz#01150354d2be61412ff56a030b62a119283b9935"
+  integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -6867,10 +7365,10 @@ react-markdown@^8.0.7:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-react-moveable@^0.54.1:
-  version "0.54.1"
-  resolved "https://registry.yarnpkg.com/react-moveable/-/react-moveable-0.54.1.tgz#3c69748c444184700e6999501b0da953c934205e"
-  integrity sha512-Kj2ifw9nk3LZvu7ezhst8Z5WBPRr+yVv9oROwrBirFlHmwGHHZXUGk5Gaezu+JGqqNRsQJncVMW5Uf68KSSOvg==
+react-moveable@^0.54.2:
+  version "0.54.2"
+  resolved "https://registry.yarnpkg.com/react-moveable/-/react-moveable-0.54.2.tgz#87ce9af3499dc1c8218bce7e174b10264c1bbecf"
+  integrity sha512-NGaVLbn0i9pb3+BWSKGWFqI/Mgm4+WMeWHxXXQ4Qi1tHxWCXrUrbGvpxEpt69G/hR7dez+/m68ex+fabjnvcUg==
   dependencies:
     "@daybrush/utils" "^1.13.0"
     "@egjs/agent" "^2.2.1"
@@ -6912,17 +7410,17 @@ react-popper@^2.2.5, react-popper@^2.3.0:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-redux@^7.2.0:
-  version "7.2.9"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
-  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+react-redux@^8.1.1:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
+  integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
   dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
+    "@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"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
 
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
@@ -7006,7 +7504,7 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-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==
@@ -7026,9 +7524,9 @@ reflect.getprototypeof@^1.0.4:
     which-builtin-type "^1.1.3"
 
 regenerate-unicode-properties@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
-  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
+  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
   dependencies:
     regenerate "^1.4.2"
 
@@ -7049,7 +7547,7 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.5.0:
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
   integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
@@ -7111,26 +7609,31 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-pkg-maps@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.4:
-  version "1.22.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
-  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
+resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
     is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
 resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
-  version "2.0.0-next.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
-  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
   dependencies:
-    is-core-module "^2.9.0"
+    is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
@@ -7170,13 +7673,20 @@ 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==
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^3.2.5:
+  version "3.29.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
+  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rope-sequence@^1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
@@ -7196,7 +7706,7 @@ sade@^1.7.3:
   dependencies:
     mri "^1.1.0"
 
-safe-array-concat@^1.0.0, safe-array-concat@^1.0.1:
+safe-array-concat@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
   integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
@@ -7296,6 +7806,16 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+set-function-length@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
+  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+  dependencies:
+    define-data-property "^1.1.1"
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
 set-function-name@^2.0.0, set-function-name@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
@@ -7306,9 +7826,9 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
     has-property-descriptors "^1.0.0"
 
 sharp@^0.32.1:
-  version "0.32.5"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.5.tgz#9ddc78ead6446094f51e50355a2d4ec6e7220cd4"
-  integrity sha512-0dap3iysgDkNaPOaOL4X/0akdu0ma62GcdC2NBQ+93eqpePdDdr2/LM0sFdDSMmN7yS+odyZtPsb7tx/cYBKnQ==
+  version "0.32.6"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
+  integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==
   dependencies:
     color "^4.2.3"
     detect-libc "^2.0.2"
@@ -7340,6 +7860,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
 simple-concat@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
@@ -7383,11 +7908,6 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
-sonner@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/sonner/-/sonner-0.6.2.tgz#d87420e80d8b25b6d2bd6aabcc28465f03962bdc"
-  integrity sha512-bh4FWhYoNN481ZIW94W4e0kSLBTMGislYg2YXvDS1px1AJJz4erQe9jHV8s5pS1VMVDgfh3CslNSFLaU6Ldrnw==
-
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -7406,6 +7926,13 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map@0.8.0-beta.0, source-map@^0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
 source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -7416,13 +7943,6 @@ source-map@^0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.8.0-beta.0:
-  version "0.8.0-beta.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
-  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
-  dependencies:
-    whatwg-url "^7.0.0"
-
 sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -7446,9 +7966,9 @@ stacktrace-parser@^0.1.10:
     type-fest "^0.7.1"
 
 streamx@^2.15.0:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.1.tgz#396ad286d8bc3eeef8f5cea3f029e81237c024c6"
-  integrity sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==
+  version "2.15.2"
+  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.2.tgz#680eacebdc9c43ede7362c2e6695b34dd413c741"
+  integrity sha512-b62pAV/aeMjUoRN2C/9F0n+G8AfcJjNC0zw/ZmOHeFsIe4m4GzjVW9m6VHXVjk536NbdU9JRwKMJRfkc+zUFTg==
   dependencies:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
@@ -7477,7 +7997,7 @@ string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.proto
     set-function-name "^2.0.0"
     side-channel "^1.0.4"
 
-string.prototype.trim@^1.2.7:
+string.prototype.trim@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
   integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
@@ -7486,7 +8006,7 @@ string.prototype.trim@^1.2.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-string.prototype.trimend@^1.0.6:
+string.prototype.trimend@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
   integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
@@ -7495,7 +8015,7 @@ string.prototype.trimend@^1.0.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-string.prototype.trimstart@^1.0.6:
+string.prototype.trimstart@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
   integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
@@ -7537,6 +8057,11 @@ strip-comments@^2.0.1:
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
   integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
 
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -7548,9 +8073,9 @@ strip-json-comments@~2.0.1:
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
 style-to-object@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.2.tgz#a8247057111dea8bd3b8a1a66d2d0c9cf9218a54"
-  integrity sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
+  integrity sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==
   dependencies:
     inline-style-parser "0.1.1"
 
@@ -7564,7 +8089,7 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-sucrase@^3.32.0:
+sucrase@^3.20.3, sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
   integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
@@ -7604,9 +8129,9 @@ supports-preserve-symlinks-flag@^1.0.0:
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 swr@^2.1.3, swr@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.2.tgz#abcb1f9c97e10527789884169d58b878472d4c98"
-  integrity sha512-CbR41AoMD4TQBQw9ic3GTXspgfM9Y8Mdhb5Ob4uIKXhWqnRLItwA5fpGvB7SmSw3+zEjb0PdhiEumtUvYoQ+bQ==
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
+  integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
   dependencies:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
@@ -7627,25 +8152,25 @@ tailwind-merge@^1.14.0:
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
-tailwindcss-animate@^1.0.7:
+tailwindcss-animate@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwindcss@^3.2.7, tailwindcss@^3.3.3:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
+  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.19.1"
     lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
@@ -7731,9 +8256,9 @@ terser-webpack-plugin@^5.3.3:
     terser "^5.16.8"
 
 terser@^5.0.0, terser@^5.16.8:
-  version "5.19.4"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.4.tgz#941426fa482bf9b40a0308ab2b3cd0cf7c775ebd"
-  integrity sha512-6p1DjHeuluwxDXcuT9VR8p64klWJKo1ILiy19s6C9+0Bh2+NWTX6nD9EPppiER4ICkHDVB1RkVpin/YW2nQn/g==
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.24.0.tgz#4ae50302977bca4831ccc7b4fef63a3c04228364"
+  integrity sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -7782,20 +8307,15 @@ tippy.js@^6.3.7:
     "@popperjs/core" "^2.9.0"
 
 tiptap-markdown@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.2.tgz#93d42ef6225042d8bfe77861b93450aab184d67b"
-  integrity sha512-RyfpnH475+FYVh1fCiWF9+wBvA8T6X3PqxZR1MApEewxkoQ5kREQFiVwjZiez9qUQk/Bxu3RerFSJot65V6cbQ==
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.3.tgz#51e93aad3c603c75a91111494ef4fd04115165fe"
+  integrity sha512-RULu1OXFTHdTJCHwdUOvDk0nDoH8YdgXulR0f+8XBd/x+SuT+EafdQuEKz2ggFlW1Mvl5niKGT5lAHTeXYFmaw==
   dependencies:
     "@types/markdown-it" "^12.2.3"
     markdown-it "^13.0.1"
     markdown-it-task-lists "^2.1.1"
     prosemirror-markdown "^1.11.1"
 
-tlds@^1.238.0:
-  version "1.242.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.242.0.tgz#da136a9c95b0efa1a4cd57dca8ef240c08ada4b7"
-  integrity sha512-aP3dXawgmbfU94mA32CJGHmJUE1E58HCB1KmlKRhBNtqBL27mSQcAEmcaMaQ1Za9kIVvOdbxJD3U5ycDy7nJ3w==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -7820,6 +8340,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 trim-lines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
@@ -7850,7 +8375,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, "tslib@^2.4.1 || ^1.9.3":
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@~2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -7860,6 +8385,46 @@ 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"
+  integrity sha512-vDHlczXbgUvY3rWvqFEbSqmC1L7woozbzngMqTtL2PGBODTtWlRwGDDawhvWzr5c1QjKe4OAKqJGfE1xeXUvtQ==
+  dependencies:
+    bundle-require "^4.0.0"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.18.2"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^4.0.1"
+    resolve-from "^5.0.0"
+    rollup "^3.2.5"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -7874,47 +8439,47 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.13.tgz#7abc33838bf74c7e7ba2955cb6acc40342d6964c"
-  integrity sha512-vmngGfa2dlYvX7UFVncsNDMuT4X2KPyPJ2Jj+xvf5nvQnZR/3IeDEGleGVuMi/hRzdinoxwXqgk9flEmAYp0Xw==
+turbo-darwin-64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.16.tgz#5a8717c1372f2a75e8cfe0b4b6455119ce410b19"
+  integrity sha512-+Jk91FNcp9e9NCLYlvDDlp2HwEDp14F9N42IoW3dmHI5ZkGSXzalbhVcrx3DOox3QfiNUHxzWg4d7CnVNCuuMg==
 
-turbo-darwin-arm64@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.13.tgz#89f2d14a28789e5eaf276a17fecd4116d61fd16d"
-  integrity sha512-eMoJC+k7gIS4i2qL6rKmrIQGP6Wr9nN4odzzgHFngLTMimok2cGLK3qbJs5O5F/XAtEeRAmuxeRnzQwTl/iuAw==
+turbo-darwin-arm64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.16.tgz#19b5b63acf7ee0fce7e1fe5850e093c2ac9c73f5"
+  integrity sha512-jqGpFZipIivkRp/i+jnL8npX0VssE6IAVNKtu573LXtssZdV/S+fRGYA16tI46xJGxSAivrZ/IcgZrV6Jk80bw==
 
-turbo-linux-64@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.13.tgz#803e2b351984ec81034dc4b6935cdfb0a7d7d572"
-  integrity sha512-0CyYmnKTs6kcx7+JRH3nPEqCnzWduM0hj8GP/aodhaIkLNSAGAa+RiYZz6C7IXN+xUVh5rrWTnU2f1SkIy7Gdg==
+turbo-linux-64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.16.tgz#ee97c0011553a96bd7995e7bcc6e65aab8996798"
+  integrity sha512-PpqEZHwLoizQ6sTUvmImcRmACyRk9EWLXGlqceogPZsJ1jTRK3sfcF9fC2W56zkSIzuLEP07k5kl+ZxJd8JMcg==
 
-turbo-linux-arm64@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.13.tgz#92439a927ec98801be1be266016736be5730e40c"
-  integrity sha512-0iBKviSGQQlh2OjZgBsGjkPXoxvRIxrrLLbLObwJo3sOjIH0loGmVIimGS5E323soMfi/o+sidjk2wU1kFfD7Q==
+turbo-linux-arm64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.16.tgz#2723cc2a846d89df7484002161b25673f4f04009"
+  integrity sha512-TMjFYz8to1QE0fKVXCIvG/4giyfnmqcQIwjdNfJvKjBxn22PpbjeuFuQ5kNXshUTRaTJihFbuuCcb5OYFNx4uw==
 
-turbo-windows-64@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.13.tgz#870815cdcb20f2480296c208778f9127be61eec6"
-  integrity sha512-S5XySRfW2AmnTeY1IT+Jdr6Goq7mxWganVFfrmqU+qqq3Om/nr0GkcUX+KTIo9mPrN0D3p5QViBRzulwB5iuUQ==
+turbo-windows-64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.16.tgz#87c46a78502a86dec73634b255a6b3471285969b"
+  integrity sha512-+jsf68krs0N66FfC4/zZvioUap/Tq3sPFumnMV+EBo8jFdqs4yehd6+MxIwYTjSQLIcpH8KoNMB0gQYhJRLZzw==
 
-turbo-windows-arm64@1.10.13:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.13.tgz#2da38b71b1716732541dfc5bd7475dc0903921f8"
-  integrity sha512-nKol6+CyiExJIuoIc3exUQPIBjP9nIq5SkMJgJuxsot2hkgGrafAg/izVDRDrRduQcXj2s8LdtxJHvvnbI8hEQ==
+turbo-windows-arm64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.16.tgz#a6208c2bc27e5e6ef0aa4a3e64389c4285c3f274"
+  integrity sha512-sKm3hcMM1bl0B3PLG4ifidicOGfoJmOEacM5JtgBkYM48ncMHjkHfFY7HrJHZHUnXM4l05RQTpLFoOl/uIo2HQ==
 
-turbo@latest:
-  version "1.10.13"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.13.tgz#8050bcd09f8a20d5a626f41e86cd8760e49a0df6"
-  integrity sha512-vOF5IPytgQPIsgGtT0n2uGZizR2N3kKuPIn4b5p5DdeLoI0BV7uNiydT7eSzdkPRpdXNnO8UwS658VaI4+YSzQ==
+turbo@^1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.16.tgz#51601a65a3aa56d1b9d9cb9a2ab3a5a2eab41e19"
+  integrity sha512-2CEaK4FIuSZiP83iFa9GqMTQhroW2QryckVqUydmg4tx78baftTOS0O+oDAhvo9r9Nit4xUEtC1RAHoqs6ZEtg==
   optionalDependencies:
-    turbo-darwin-64 "1.10.13"
-    turbo-darwin-arm64 "1.10.13"
-    turbo-linux-64 "1.10.13"
-    turbo-linux-arm64 "1.10.13"
-    turbo-windows-64 "1.10.13"
-    turbo-windows-arm64 "1.10.13"
+    turbo-darwin-64 "1.10.16"
+    turbo-darwin-arm64 "1.10.16"
+    turbo-linux-64 "1.10.16"
+    turbo-linux-arm64 "1.10.16"
+    turbo-windows-64 "1.10.16"
+    turbo-windows-arm64 "1.10.16"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -8012,6 +8577,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -8099,19 +8669,19 @@ unist-util-visit@^4.0.0:
     unist-util-visit-parents "^5.1.1"
 
 universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
 upath@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-browserslist-db@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
@@ -8158,7 +8728,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.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==
@@ -8171,7 +8741,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==
@@ -8310,13 +8880,13 @@ which-collection@^1.0.1:
     is-weakmap "^2.0.1"
     is-weakset "^2.0.1"
 
-which-typed-array@^1.1.10, which-typed-array@^1.1.11, which-typed-array@^1.1.9:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a"
-  integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==
+which-typed-array@^1.1.11, which-typed-array@^1.1.13, which-typed-array@^1.1.9:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36"
+  integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==
   dependencies:
     available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    call-bind "^1.0.4"
     for-each "^0.3.3"
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
@@ -8512,15 +9082,15 @@ 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==
 
 yaml@^2.1.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
-  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2"
+  integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==
 
 yocto-queue@^0.1.0:
   version "0.1.0"