Merge branch 'develop' of github.com:makeplane/plane into dev/api_logging

2024-06-14 14:31:34 +00:00 · 2024-03-11 21:09:41 +05:30 · 2024-03-11 21:09:41 +05:30 · 171b664fe7
commit 171b664fe7
parent 7f67fe12af 4a06572f73
115 changed files with 2362 additions and 757 deletions
--- a/apiserver/.env.example
+++ b/apiserver/.env.example
@ -14,10 +14,6 @@ POSTGRES_HOST="plane-db"
 POSTGRES_DB="plane"
 DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}/${POSTGRES_DB}

-# Oauth variables
-GOOGLE_CLIENT_ID=""
-GITHUB_CLIENT_ID=""
-GITHUB_CLIENT_SECRET=""

 # Redis Settings
 REDIS_HOST="plane-redis"
@ -34,11 +30,6 @@ AWS_S3_BUCKET_NAME="uploads"
 # Maximum file upload limit
 FILE_SIZE_LIMIT=5242880

-# GPT settings
-OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
-OPENAI_API_KEY="sk-" # deprecated
-GPT_ENGINE="gpt-3.5-turbo" # deprecated
-
 # Settings related to Docker
 DOCKERIZED=1 # deprecated

@ -48,16 +39,6 @@ USE_MINIO=1
 # Nginx Configuration
 NGINX_PORT=80

-
-# SignUps
-ENABLE_SIGNUP="1"
-
-# Enable Email/Password Signup
-ENABLE_EMAIL_PASSWORD="1"
-
-# Enable Magic link Login
-ENABLE_MAGIC_LINK_LOGIN="0"
-
 # Email redirections and minio domain settings
 WEB_URL="http://localhost"

--- a/apiserver/bin/takeoff
+++ b/apiserver/bin/takeoff
@ -22,10 +22,14 @@ export MACHINE_SIGNATURE=$SIGNATURE

 # Register instance
 python manage.py register_instance "$MACHINE_SIGNATURE"
+
 # Load the configuration variable
 python manage.py configure_instance

 # Create the default bucket
 python manage.py create_bucket

+# Clear Cache before starting to remove stale values
+python manage.py clear_cache
+
 exec gunicorn -w "$GUNICORN_WORKERS" -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:"${PORT:-8000}" --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
--- a/apiserver/bin/takeoff.local
+++ b/apiserver/bin/takeoff.local
@ -21,12 +21,15 @@ SIGNATURE=$(echo "$HOSTNAME$MAC_ADDRESS$CPU_INFO$MEMORY_INFO$DISK_INFO" | sha256
 export MACHINE_SIGNATURE=$SIGNATURE

 # Register instance
-python manage.py register_instance $MACHINE_SIGNATURE
+python manage.py register_instance "$MACHINE_SIGNATURE"
 # Load the configuration variable
 python manage.py configure_instance

 # Create the default bucket
 python manage.py create_bucket

+# Clear Cache before starting to remove stale values
+python manage.py clear_cache
+
 python manage.py runserver 0.0.0.0:8000 --settings=plane.settings.local

--- a/apiserver/plane/app/serializers/module.py
+++ b/apiserver/plane/app/serializers/module.py
@ -215,9 +215,10 @@ class ModuleSerializer(DynamicBaseSerializer):

 class ModuleDetailSerializer(ModuleSerializer):
    link_module = ModuleLinkSerializer(read_only=True, many=True)
+    sub_issues = serializers.IntegerField(read_only=True)

    class Meta(ModuleSerializer.Meta):
-        fields = ModuleSerializer.Meta.fields + ["link_module"]
+        fields = ModuleSerializer.Meta.fields + ["link_module", "sub_issues"]


 class ModuleFavoriteSerializer(BaseSerializer):
--- a/apiserver/plane/app/serializers/project.py
+++ b/apiserver/plane/app/serializers/project.py
@ -102,6 +102,12 @@ class ProjectLiteSerializer(BaseSerializer):


 class ProjectListSerializer(DynamicBaseSerializer):
+    total_issues = serializers.IntegerField(read_only=True)
+    archived_issues = serializers.IntegerField(read_only=True)
+    archived_sub_issues = serializers.IntegerField(read_only=True)
+    draft_issues = serializers.IntegerField(read_only=True)
+    draft_sub_issues = serializers.IntegerField(read_only=True)
+    sub_issues = serializers.IntegerField(read_only=True)
    is_favorite = serializers.BooleanField(read_only=True)
    total_members = serializers.IntegerField(read_only=True)
    total_cycles = serializers.IntegerField(read_only=True)
--- a/apiserver/plane/app/views/cycle/base.py
+++ b/apiserver/plane/app/views/cycle/base.py
@ -106,15 +106,6 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                )
            )
            .annotate(is_favorite=Exists(favorite_subquery))
-            .annotate(
-                total_issues=Count(
-                    "issue_cycle",
-                    filter=Q(
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                )
-            )
            .annotate(
                completed_issues=Count(
                    "issue_cycle__issue__state__group",
@ -232,7 +223,6 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                "progress_snapshot",
                # meta fields
                "is_favorite",
-                "total_issues",
                "cancelled_issues",
                "completed_issues",
                "started_issues",
@ -327,13 +317,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                }

                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"],
+                    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)
@ -356,7 +346,6 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
            "progress_snapshot",
            # meta fields
            "is_favorite",
-            "total_issues",
            "cancelled_issues",
            "completed_issues",
            "started_issues",
@ -402,7 +391,6 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                        "progress_snapshot",
                        # meta fields
                        "is_favorite",
-                        "total_issues",
                        "cancelled_issues",
                        "completed_issues",
                        "started_issues",
@ -474,7 +462,6 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                "progress_snapshot",
                # meta fields
                "is_favorite",
-                "total_issues",
                "cancelled_issues",
                "completed_issues",
                "started_issues",
@ -487,10 +474,42 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    def retrieve(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(pk=pk)
+        queryset = (
+            self.get_queryset()
+            .filter(pk=pk)
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+        )
        data = (
            self.get_queryset()
            .filter(pk=pk)
+            .annotate(
+                total_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("project_id"),
+                    parent__isnull=True,
+                    issue_cycle__cycle_id=pk,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("project_id"),
+                    parent__isnull=False,
+                    issue_cycle__cycle_id=pk,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
            .values(
                # necessary fields
                "id",
@ -507,6 +526,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                "external_source",
                "external_id",
                "progress_snapshot",
+                "sub_issues",
                # meta fields
                "is_favorite",
                "total_issues",
--- a/apiserver/plane/app/views/module/base.py
+++ b/apiserver/plane/app/views/module/base.py
@ -3,7 +3,7 @@ import json

 # Django Imports
 from django.utils import timezone
-from django.db.models import Prefetch, F, OuterRef, Exists, Count, Q
+from django.db.models import Prefetch, F, OuterRef, Exists, Count, Q, Func
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
 from django.db.models import Value, UUIDField
@ -79,15 +79,6 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                    ),
                )
            )
-            .annotate(
-                total_issues=Count(
-                    "issue_module",
-                    filter=Q(
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                ),
-            )
            .annotate(
                completed_issues=Count(
                    "issue_module__issue__state__group",
@ -183,7 +174,6 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                    "external_id",
                    # computed fields
                    "is_favorite",
-                    "total_issues",
                    "cancelled_issues",
                    "completed_issues",
                    "started_issues",
@ -225,7 +215,6 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                "external_id",
                # computed fields
                "is_favorite",
-                "total_issues",
                "cancelled_issues",
                "completed_issues",
                "started_issues",
@ -237,7 +226,30 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
        return Response(modules, status=status.HTTP_200_OK)

    def retrieve(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(pk=pk)
+        queryset = (
+            self.get_queryset()
+            .filter(pk=pk)
+            .annotate(
+                total_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("project_id"),
+                    parent__isnull=True,
+                    issue_module__module_id=pk,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("project_id"),
+                    parent__isnull=False,
+                    issue_module__module_id=pk,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )

        assignee_distribution = (
            Issue.objects.filter(
@ -380,7 +392,6 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                "external_id",
                # computed fields
                "is_favorite",
-                "total_issues",
                "cancelled_issues",
                "completed_issues",
                "started_issues",
--- a/apiserver/plane/app/views/project/base.py
+++ b/apiserver/plane/app/views/project/base.py
@ -46,9 +46,11 @@ from plane.db.models import (
    Inbox,
    ProjectDeployBoard,
    IssueProperty,
+    Issue,
 )
 from plane.utils.cache import cache_response

+
 class ProjectViewSet(WebhookMixin, BaseViewSet):
    serializer_class = ProjectListSerializer
    model = Project
@ -171,6 +173,73 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
        ).data
        return Response(projects, status=status.HTTP_200_OK)

+    def retrieve(self, request, slug, pk):
+        project = (
+            self.get_queryset()
+            .filter(pk=pk)
+            .annotate(
+                total_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    parent__isnull=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    parent__isnull=False,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                archived_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    archived_at__isnull=False,
+                    parent__isnull=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                archived_sub_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    archived_at__isnull=False,
+                    parent__isnull=False,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                draft_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    is_draft=True,
+                    parent__isnull=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                draft_sub_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    is_draft=True,
+                    parent__isnull=False,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        ).first()
+
+        serializer = ProjectListSerializer(project)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
    def create(self, request, slug):
        try:
            workspace = Workspace.objects.get(slug=slug)
@ -471,6 +540,7 @@ class ProjectPublicCoverImagesEndpoint(BaseAPIView):
    permission_classes = [
        AllowAny,
    ]
+
    # Cache the below api for 24 hours
    @cache_response(60 * 60 * 24, user=False)
    def get(self, request):
--- a/apiserver/plane/db/management/commands/clear_cache.py
+++ b/apiserver/plane/db/management/commands/clear_cache.py
@ -0,0 +1,17 @@
+# Django imports
+from django.core.cache import cache
+from django.core.management import BaseCommand
+
+
+class Command(BaseCommand):
+    help = "Clear Cache before starting the server to remove stale values"
+
+    def handle(self, *args, **options):
+        try:
+            cache.clear()
+            self.stdout.write(self.style.SUCCESS("Cache Cleared"))
+            return
+        except Exception:
+            # Another ClientError occurred
+            self.stdout.write(self.style.ERROR("Failed to clear cache"))
+            return
--- a/apiserver/plane/utils/cache.py
+++ b/apiserver/plane/utils/cache.py
@ -1,7 +1,11 @@
-from django.core.cache import cache
-# from django.utils.encoding import force_bytes
-# import hashlib
+# Python imports
 from functools import wraps
+
+# Django imports
+from django.conf import settings
+from django.core.cache import cache
+
+# Third party imports
 from rest_framework.response import Response


@ -22,21 +26,20 @@ def cache_response(timeout=60 * 60, path=None, user=True):
        def _wrapped_view(instance, request, *args, **kwargs):
            # Function to generate cache key
            auth_header = (
-                None if request.user.is_anonymous else str(request.user.id) if user else None
+                None
+                if request.user.is_anonymous
+                else str(request.user.id) if user else None
            )
            custom_path = path if path is not None else request.get_full_path()
            key = generate_cache_key(custom_path, auth_header)
            cached_result = cache.get(key)
            if cached_result is not None:
-                print("Cache Hit")
                return Response(
                    cached_result["data"], status=cached_result["status"]
                )
-
-            print("Cache Miss")
            response = view_func(instance, request, *args, **kwargs)

-            if response.status_code == 200:
+            if response.status_code == 200 and not settings.DEBUG:
                cache.set(
                    key,
                    {"data": response.data, "status": response.status_code},
@ -71,11 +74,12 @@ def invalidate_cache(path=None, url_params=False, user=True):
                )

            auth_header = (
-                None if request.user.is_anonymous else str(request.user.id) if user else None
+                None
+                if request.user.is_anonymous
+                else str(request.user.id) if user else None
            )
            key = generate_cache_key(custom_path, auth_header)
            cache.delete(key)
-            print("Invalidating cache")
            # Execute the view function
            return view_func(instance, request, *args, **kwargs)

--- a/deploy/selfhost/docker-compose.yml
+++ b/deploy/selfhost/docker-compose.yml
@ -5,14 +5,8 @@ x-app-env: &app-env
    - NGINX_PORT=${NGINX_PORT:-80}
    - WEB_URL=${WEB_URL:-http://localhost}
    - DEBUG=${DEBUG:-0}
-    - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.production} # deprecated
-    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces} # deprecated
    - SENTRY_DSN=${SENTRY_DSN:-""}
    - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
-    - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:-""}
-    - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-""}
-    - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
-    - DOCKERIZED=${DOCKERIZED:-1} # deprecated
    - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS:-""}
    # Gunicorn Workers
    - GUNICORN_WORKERS=${GUNICORN_WORKERS:-2}
@ -28,20 +22,6 @@ x-app-env: &app-env
    - REDIS_HOST=${REDIS_HOST:-plane-redis}
    - REDIS_PORT=${REDIS_PORT:-6379}
    - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
-    # EMAIL SETTINGS - Deprecated can be configured through admin panel
-    - 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 <team@mailer.plane.so>"}
-    - 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}
-    # LOGIN/SIGNUP SETTINGS - Deprecated can be configured through admin panel
-    - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
-    - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
-    - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
    # Application secret
    - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
    # DATA STORE SETTINGS
--- a/deploy/selfhost/variables.env
+++ b/deploy/selfhost/variables.env
@ -7,13 +7,8 @@ API_REPLICAS=1
 NGINX_PORT=80
 WEB_URL=http://localhost
 DEBUG=0
-NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
 SENTRY_DSN=
 SENTRY_ENVIRONMENT=production
-GOOGLE_CLIENT_ID=
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-DOCKERIZED=1 # deprecated
 CORS_ALLOWED_ORIGINS=http://localhost

 #DB SETTINGS
@ -30,19 +25,7 @@ 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
-
-# LOGIN/SIGNUP SETTINGS
-ENABLE_SIGNUP=1
-ENABLE_EMAIL_PASSWORD=1
-ENABLE_MAGIC_LINK_LOGIN=0
+# Secret Key
 SECRET_KEY=60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5

 # DATA STORE SETTINGS
--- a/packages/editor/core/src/lib/utils.ts
+++ b/packages/editor/core/src/lib/utils.ts
@ -1,3 +1,4 @@
+import { Selection } from "@tiptap/pm/state";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 interface EditorClassNames {
@ -18,6 +19,19 @@ export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
 }

+// Helper function to find the parent node of a specific type
+export function findParentNodeOfType(selection: Selection, typeName: string) {
+  let depth = selection.$anchor.depth;
+  while (depth > 0) {
+    const node = selection.$anchor.node(depth);
+    if (node.type.name === typeName) {
+      return { node, pos: selection.$anchor.start(depth) - 1 };
+    }
+    depth--;
+  }
+  return null;
+}
+
 export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
  while (node !== null && node.nodeName !== "TABLE") {
    node = node.parentNode;
--- a/packages/editor/core/src/ui/components/editor-container.tsx
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/react";
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";

 interface EditorContainerProps {
  editor: Editor | null;
@ -8,17 +8,54 @@ interface EditorContainerProps {
  hideDragHandle?: () => void;
 }

-export const EditorContainer = ({ editor, editorClassNames, hideDragHandle, children }: EditorContainerProps) => (
-  <div
-    id="editor-container"
-    onClick={() => {
-      editor?.chain().focus(undefined, { scrollIntoView: false }).run();
-    }}
-    onMouseLeave={() => {
-      hideDragHandle?.();
-    }}
-    className={`cursor-text ${editorClassNames}`}
-  >
-    {children}
-  </div>
-);
+export const EditorContainer: FC<EditorContainerProps> = (props) => {
+  const { editor, editorClassNames, hideDragHandle, children } = props;
+
+  const handleContainerClick = () => {
+    if (!editor) return;
+    if (!editor.isEditable) return;
+    if (editor.isFocused) return; // If editor is already focused, do nothing
+
+    const { selection } = editor.state;
+    const currentNode = selection.$from.node();
+
+    editor?.chain().focus("end", { scrollIntoView: false }).run(); // Focus the editor at the end
+
+    if (
+      currentNode.content.size === 0 && // Check if the current node is empty
+      !(
+        editor.isActive("orderedList") ||
+        editor.isActive("bulletList") ||
+        editor.isActive("taskItem") ||
+        editor.isActive("table") ||
+        editor.isActive("blockquote") ||
+        editor.isActive("codeBlock")
+      ) // Check if it's an empty node within an orderedList, bulletList, taskItem, table, quote or code block
+    ) {
+      return;
+    }
+
+    // Insert a new paragraph at the end of the document
+    const endPosition = editor?.state.doc.content.size;
+    editor?.chain().insertContentAt(endPosition, { type: "paragraph" }).run();
+
+    // Focus the newly added paragraph for immediate editing
+    editor
+      .chain()
+      .setTextSelection(endPosition + 1)
+      .run();
+  };
+
+  return (
+    <div
+      id="editor-container"
+      onClick={handleContainerClick}
+      onMouseLeave={() => {
+        hideDragHandle?.();
+      }}
+      className={`cursor-text ${editorClassNames}`}
+    >
+      {children}
+    </div>
+  );
+};
--- a/packages/editor/core/src/ui/components/editor-content.tsx
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@ -1,17 +1,28 @@
 import { Editor, EditorContent } from "@tiptap/react";
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { ImageResizer } from "src/ui/extensions/image/image-resize";

 interface EditorContentProps {
  editor: Editor | null;
  editorContentCustomClassNames: string | undefined;
  children?: ReactNode;
+  tabIndex?: number;
 }

-export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = "", children }: EditorContentProps) => (
-  <div className={`contentEditor ${editorContentCustomClassNames}`}>
-    <EditorContent editor={editor} />
-    {editor?.isActive("image") && editor?.isEditable && <ImageResizer editor={editor} />}
-    {children}
-  </div>
-);
+export const EditorContentWrapper: FC<EditorContentProps> = (props) => {
+  const { editor, editorContentCustomClassNames = "", tabIndex, children } = props;
+
+  return (
+    <div
+      className={`contentEditor ${editorContentCustomClassNames}`}
+      tabIndex={tabIndex}
+      onFocus={() => {
+        editor?.chain().focus(undefined, { scrollIntoView: false }).run();
+      }}
+    >
+      <EditorContent editor={editor} />
+      {editor?.isActive("image") && editor?.isEditable && <ImageResizer editor={editor} />}
+      {children}
+    </div>
+  );
+};
--- a/packages/editor/core/src/ui/extensions/image/index.tsx
+++ b/packages/editor/core/src/ui/extensions/image/index.tsx
@ -5,6 +5,8 @@ import ImageExt from "@tiptap/extension-image";
 import { onNodeDeleted, onNodeRestored } from "src/ui/plugins/delete-image";
 import { DeleteImage } from "src/types/delete-image";
 import { RestoreImage } from "src/types/restore-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";

 interface ImageNode extends ProseMirrorNode {
  attrs: {
@ -18,6 +20,12 @@ const IMAGE_NODE_TYPE = "image";

 export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => any) =>
  ImageExt.extend({
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertLineBelowImageAction,
+        ArrowUp: insertLineAboveImageAction,
+      };
+    },
    addProseMirrorPlugins() {
      return [
        UploadImagesPlugin(cancelUploadImage),
--- a/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts
+++ b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts
@ -0,0 +1,45 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { KeyboardShortcutCommand } from "@tiptap/core";
+
+export const insertLineAboveImageAction: KeyboardShortcutCommand = ({ editor }) => {
+  const { selection, doc } = editor.state;
+  const { $from, $to } = selection;
+
+  let imageNode: ProseMirrorNode | null = null;
+  let imagePos: number | null = null;
+
+  // Check if the selection itself is an image node
+  doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+    if (node.type.name === "image") {
+      imageNode = node;
+      imagePos = pos;
+      return false; // Stop iterating once an image node is found
+    }
+    return true;
+  });
+
+  if (imageNode === null || imagePos === null) return false;
+
+  // Since we want to insert above the image, we use the imagePos directly
+  const insertPos = imagePos;
+
+  if (insertPos < 0) return false;
+
+  // Check for an existing node immediately before the image
+  if (insertPos === 0) {
+    // If the previous node doesn't exist or isn't a paragraph, create and insert a new empty node there
+    editor.chain().insertContentAt(insertPos, { type: "paragraph" }).run();
+    editor.chain().setTextSelection(insertPos).run();
+  } else {
+    const prevNode = doc.nodeAt(insertPos);
+
+    if (prevNode && prevNode.type.name === "paragraph") {
+      // If the previous node is a paragraph, move the cursor there
+      editor.chain().setTextSelection(insertPos).run();
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+};
--- a/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts
+++ b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts
@ -0,0 +1,46 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { KeyboardShortcutCommand } from "@tiptap/core";
+
+export const insertLineBelowImageAction: KeyboardShortcutCommand = ({ editor }) => {
+  const { selection, doc } = editor.state;
+  const { $from, $to } = selection;
+
+  let imageNode: ProseMirrorNode | null = null;
+  let imagePos: number | null = null;
+
+  // Check if the selection itself is an image node
+  doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+    if (node.type.name === "image") {
+      imageNode = node;
+      imagePos = pos;
+      return false; // Stop iterating once an image node is found
+    }
+    return true;
+  });
+
+  if (imageNode === null || imagePos === null) return false;
+
+  const guaranteedImageNode: ProseMirrorNode = imageNode;
+  const nextNodePos = imagePos + guaranteedImageNode.nodeSize;
+
+  // Check for an existing node immediately after the image
+  const nextNode = doc.nodeAt(nextNodePos);
+
+  if (nextNode && nextNode.type.name === "paragraph") {
+    // If the next node is a paragraph, move the cursor there
+    const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+    editor.chain().setTextSelection(endOfParagraphPos).run();
+  } else if (!nextNode) {
+    // If the next node doesn't exist i.e. we're at the end of the document, create and insert a new empty node there
+    editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
+    editor
+      .chain()
+      .setTextSelection(nextNodePos + 1)
+      .run();
+  } else {
+    // If the next node is not a paragraph, do not proceed
+    return false;
+  }
+
+  return true;
+};
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@ -27,7 +27,7 @@ import { RestoreImage } from "src/types/restore-image";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
 import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
 import { CustomTypographyExtension } from "src/ui/extensions/typography";
-import { CustomHorizontalRule } from "./horizontal-rule/horizontal-rule";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";

 export const CoreEditorExtensions = (
  mentionConfig: {
@ -66,7 +66,6 @@ export const CoreEditorExtensions = (
  CustomQuoteExtension.configure({
    HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
  }),
-
  CustomHorizontalRule.configure({
    HTMLAttributes: { class: "mt-4 mb-4" },
  }),
--- a/packages/editor/core/src/ui/extensions/table/table/table.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@ -25,6 +25,8 @@ import { tableControls } from "src/ui/extensions/table/table/table-controls";
 import { TableView } from "src/ui/extensions/table/table/table-view";
 import { createTable } from "src/ui/extensions/table/table/utilities/create-table";
 import { deleteTableWhenAllCellsSelected } from "src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected";
+import { insertLineBelowTableAction } from "./utilities/insert-line-below-table-action";
+import { insertLineAboveTableAction } from "./utilities/insert-line-above-table-action";

 export interface TableOptions {
  HTMLAttributes: Record<string, any>;
@ -231,6 +233,8 @@ export const Table = Node.create({
      "Mod-Backspace": deleteTableWhenAllCellsSelected,
      Delete: deleteTableWhenAllCellsSelected,
      "Mod-Delete": deleteTableWhenAllCellsSelected,
+      ArrowDown: insertLineBelowTableAction,
+      ArrowUp: insertLineAboveTableAction,
    };
  },

--- a/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-above-table-action.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-above-table-action.ts
@ -0,0 +1,50 @@
+import { KeyboardShortcutCommand } from "@tiptap/core";
+import { findParentNodeOfType } from "src/lib/utils";
+
+export const insertLineAboveTableAction: KeyboardShortcutCommand = ({ editor }) => {
+  // Check if the current selection or the closest node is a table
+  if (!editor.isActive("table")) return false;
+
+  // Get the current selection
+  const { selection } = editor.state;
+
+  // Find the table node and its position
+  const tableNode = findParentNodeOfType(selection, "table");
+  if (!tableNode) return false;
+
+  const tablePos = tableNode.pos;
+
+  // Determine if the selection is in the first row of the table
+  const firstRow = tableNode.node.child(0);
+  const selectionPath = (selection.$anchor as any).path;
+  const selectionInFirstRow = selectionPath.includes(firstRow);
+
+  if (!selectionInFirstRow) return false;
+
+  // Check if the table is at the very start of the document or its parent node
+  if (tablePos === 0) {
+    // The table is at the start, so just insert a paragraph at the current position
+    editor.chain().insertContentAt(tablePos, { type: "paragraph" }).run();
+    editor
+      .chain()
+      .setTextSelection(tablePos + 1)
+      .run();
+  } else {
+    // The table is not at the start, check for the node immediately before the table
+    const prevNodePos = tablePos - 1;
+
+    if (prevNodePos <= 0) return false;
+
+    const prevNode = editor.state.doc.nodeAt(prevNodePos - 1);
+
+    if (prevNode && prevNode.type.name === "paragraph") {
+      // If there's a paragraph before the table, move the cursor to the end of that paragraph
+      const endOfParagraphPos = tablePos - prevNode.nodeSize;
+      editor.chain().setTextSelection(endOfParagraphPos).run();
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+};
--- a/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-below-table-action.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-below-table-action.ts
@ -0,0 +1,48 @@
+import { KeyboardShortcutCommand } from "@tiptap/core";
+import { findParentNodeOfType } from "src/lib/utils";
+
+export const insertLineBelowTableAction: KeyboardShortcutCommand = ({ editor }) => {
+  // Check if the current selection or the closest node is a table
+  if (!editor.isActive("table")) return false;
+
+  // Get the current selection
+  const { selection } = editor.state;
+
+  // Find the table node and its position
+  const tableNode = findParentNodeOfType(selection, "table");
+  if (!tableNode) return false;
+
+  const tablePos = tableNode.pos;
+  const table = tableNode.node;
+
+  // Determine if the selection is in the last row of the table
+  const rowCount = table.childCount;
+  const lastRow = table.child(rowCount - 1);
+  const selectionPath = (selection.$anchor as any).path;
+  const selectionInLastRow = selectionPath.includes(lastRow);
+
+  if (!selectionInLastRow) return false;
+
+  // Calculate the position immediately after the table
+  const nextNodePos = tablePos + table.nodeSize;
+
+  // Check for an existing node immediately after the table
+  const nextNode = editor.state.doc.nodeAt(nextNodePos);
+
+  if (nextNode && nextNode.type.name === "paragraph") {
+    // If the next node is an paragraph, move the cursor there
+    const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+    editor.chain().setTextSelection(endOfParagraphPos).run();
+  } else if (!nextNode) {
+    // If the next node doesn't exist i.e. we're at the end of the document, create and insert a new empty node there
+    editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
+    editor
+      .chain()
+      .setTextSelection(nextNodePos + 1)
+      .run();
+  } else {
+    return false;
+  }
+
+  return true;
+};
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@ -5,7 +5,6 @@ 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 "src/ui/extensions/table/table-header/table-header";
 import { Table } from "src/ui/extensions/table/table";
@ -17,6 +16,11 @@ import { isValidHttpUrl } from "src/lib/utils";
 import { Mentions } from "src/ui/mentions";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
+import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";

 export const CoreReadOnlyEditorExtensions = (mentionConfig: {
  mentionSuggestions: IMentionSuggestion[];
@ -38,36 +42,31 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
        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",
-      },
-    },
+    code: false,
    codeBlock: false,
-    horizontalRule: {
-      HTMLAttributes: { class: "mt-4 mb-4" },
-    },
-    dropcursor: {
-      color: "rgba(var(--color-text-100))",
-      width: 2,
-    },
+    horizontalRule: false,
+    blockquote: false,
+    dropcursor: false,
    gapcursor: false,
  }),
-  Gapcursor,
+  CustomQuoteExtension.configure({
+    HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
+  }),
+  CustomHorizontalRule.configure({
+    HTMLAttributes: { class: "mt-4 mb-4" },
+  }),
  CustomLinkExtension.configure({
+    openOnClick: true,
+    autolink: true,
+    linkOnPaste: true,
    protocols: ["http", "https"],
-    validate: (url) => isValidHttpUrl(url),
+    validate: (url: string) => isValidHttpUrl(url),
    HTMLAttributes: {
      class:
        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
    },
  }),
+  CustomTypographyExtension,
  ReadOnlyImageExtension.configure({
    HTMLAttributes: {
      class: "rounded-lg border border-custom-border-300",
@ -87,6 +86,8 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
    },
    nested: true,
  }),
+  CustomCodeBlockExtension,
+  CustomCodeInlineExtension,
  Markdown.configure({
    html: true,
    transformCopiedText: true,
--- a/packages/editor/document-editor/src/ui/components/content-browser.tsx
+++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx
@ -19,7 +19,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {

  return (
    <div className="flex h-full flex-col overflow-hidden">
-      <h2 className="font-medium">Table of Contents</h2>
+      <h2 className="font-medium">Outline</h2>
      <div className="h-full overflow-y-auto">
        {markings.length !== 0 ? (
          markings.map((marking) =>
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@ -29,11 +29,13 @@ type IPageRenderer = {
  editorContentCustomClassNames?: string;
  hideDragHandle?: () => void;
  readonly: boolean;
+  tabIndex?: number;
 };

 export const PageRenderer = (props: IPageRenderer) => {
  const {
    documentDetails,
+    tabIndex,
    editor,
    editorClassNames,
    editorContentCustomClassNames,
@ -152,7 +154,7 @@ export const PageRenderer = (props: IPageRenderer) => {
  );

  return (
-    <div className="w-full pb-64 md:pl-7 pl-3 pt-5 page-renderer">
+    <div className="w-full h-full pb-20 pl-7 pt-5 page-renderer">
      {!readonly ? (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
@ -169,7 +171,11 @@ export const PageRenderer = (props: IPageRenderer) => {
      )}
      <div className="flex relative h-full w-full flex-col pr-5 editor-renderer" onMouseOver={handleLinkHover}>
        <EditorContainer hideDragHandle={hideDragHandle} editor={editor} editorClassNames={editorClassNames}>
-          <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+          <EditorContentWrapper
+            tabIndex={tabIndex}
+            editor={editor}
+            editorContentCustomClassNames={editorContentCustomClassNames}
+          />
        </EditorContainer>
      </div>
      {isOpen && linkViewProps && coordinates && (
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@ -47,6 +47,8 @@ interface IDocumentEditor {
  duplicationConfig?: IDuplicationConfig;
  pageLockConfig?: IPageLockConfig;
  pageArchiveConfig?: IPageArchiveConfig;
+
+  tabIndex?: number;
 }
 interface DocumentEditorProps extends IDocumentEditor {
  forwardedRef?: React.Ref<EditorHandle>;
@ -79,6 +81,7 @@ const DocumentEditor = ({
  cancelUploadImage,
  onActionCompleteHandler,
  rerenderOnPropsChange,
+  tabIndex,
 }: IDocumentEditor) => {
  const { markings, updateMarkings } = useEditorMarkings();
  const [sidePeekVisible, setSidePeekVisible] = useState(true);
@ -160,6 +163,7 @@ const DocumentEditor = ({
        </div>
        <div className="h-full w-full md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
          <PageRenderer
+            tabIndex={tabIndex}
            onActionCompleteHandler={onActionCompleteHandler}
            hideDragHandle={hideDragHandleOnMouseLeave}
            readonly={false}
--- a/packages/editor/document-editor/src/ui/readonly/index.tsx
+++ b/packages/editor/document-editor/src/ui/readonly/index.tsx
@ -28,6 +28,7 @@ interface IDocumentReadOnlyEditor {
    message: string;
    type: "success" | "error" | "warning" | "info";
  }) => void;
+  tabIndex?: number;
 }

 interface DocumentReadOnlyEditorProps extends IDocumentReadOnlyEditor {
@ -51,6 +52,7 @@ const DocumentReadOnlyEditor = ({
  pageArchiveConfig,
  rerenderOnPropsChange,
  onActionCompleteHandler,
+  tabIndex,
 }: DocumentReadOnlyEditorProps) => {
  const router = useRouter();
  const [sidePeekVisible, setSidePeekVisible] = useState(true);
@ -108,9 +110,10 @@ const DocumentReadOnlyEditor = ({
        </div>
        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
          <PageRenderer
+            tabIndex={tabIndex}
            onActionCompleteHandler={onActionCompleteHandler}
            updatePageTitle={() => Promise.resolve()}
-            readonly={true}
+            readonly
            editor={editor}
            editorClassNames={editorClassNames}
            documentDetails={documentDetails}
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@ -42,6 +42,7 @@ interface ILiteTextEditor {
  mentionHighlights?: string[];
  mentionSuggestions?: IMentionSuggestion[];
  submitButton?: React.ReactNode;
+  tabIndex?: number;
 }

 interface LiteTextEditorProps extends ILiteTextEditor {
@ -74,6 +75,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
    mentionHighlights,
    mentionSuggestions,
    submitButton,
+    tabIndex,
  } = props;

  const editor = useEditor({
@ -103,7 +105,11 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
  return (
    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
      <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
        <div className="mt-4 w-full">
          <FixedMenu
            editor={editor}
--- a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@ -8,6 +8,7 @@ interface ICoreReadOnlyEditor {
  borderOnFocus?: boolean;
  customClassName?: string;
  mentionHighlights: string[];
+  tabIndex?: number;
 }

 interface EditorCoreProps extends ICoreReadOnlyEditor {
@ -27,6 +28,7 @@ const LiteReadOnlyEditor = ({
  value,
  forwardedRef,
  mentionHighlights,
+  tabIndex,
 }: EditorCoreProps) => {
  const editor = useReadOnlyEditor({
    value,
@ -45,7 +47,11 @@ const LiteReadOnlyEditor = ({
  return (
    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
      <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
      </div>
    </EditorContainer>
  );
--- a/packages/editor/rich-text-editor/src/ui/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@ -36,6 +36,7 @@ export type IRichTextEditor = {
  debouncedUpdatesEnabled?: boolean;
  mentionHighlights?: string[];
  mentionSuggestions?: IMentionSuggestion[];
+  tabIndex?: number;
 };

 export interface RichTextEditorProps extends IRichTextEditor {
@ -68,6 +69,7 @@ const RichTextEditor = ({
  mentionHighlights,
  rerenderOnPropsChange,
  mentionSuggestions,
+  tabIndex,
 }: RichTextEditorProps) => {
  const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});

@ -100,17 +102,21 @@ const RichTextEditor = ({
    customClassName,
  });

-  React.useEffect(() => {
-    if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
-  }, [editor, initialValue]);
-
+  // React.useEffect(() => {
+  //   if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
+  // }, [editor, initialValue]);
+  //
  if (!editor) return null;

  return (
    <EditorContainer hideDragHandle={hideDragHandleOnMouseLeave} editor={editor} editorClassNames={editorClassNames}>
      {editor && <EditorBubbleMenu editor={editor} />}
      <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
      </div>
    </EditorContainer>
  );
--- 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
@ -121,7 +121,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
              <button
                key={item.name}
                type="button"
-                onClick={item.command}
+                onClick={(e) => {
+                  item.command();
+                  e.stopPropagation();
+                }}
                className={cn(
                  "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
                  {
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@ -33,8 +33,9 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
          "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={() => {
+        onClick={(e) => {
          setIsOpen(!isOpen);
+          e.stopPropagation();
        }}
      >
        <p className="text-base">↗</p>
@ -60,6 +61,9 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
            ref={inputRef}
            type="url"
            placeholder="Paste a link"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
            className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
            defaultValue={editor.getAttributes("link").href || ""}
          />
@ -67,9 +71,10 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
            <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={() => {
+              onClick={(e) => {
                unsetLinkEditor(editor);
                setIsOpen(false);
+                e.stopPropagation();
              }}
            >
              <Trash className="h-4 w-4" />
@ -78,7 +83,8 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
            <button
              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
              type="button"
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                onLinkSubmit();
              }}
            >
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@ -47,7 +47,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
    <div className="relative h-full">
      <button
        type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={(e) => {
+          setIsOpen(!isOpen);
+          e.stopPropagation();
+        }}
        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>
@ -60,9 +63,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
            <button
              key={item.name}
              type="button"
-              onClick={() => {
+              onClick={(e) => {
                item.command();
                setIsOpen(false);
+                e.stopPropagation();
              }}
              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",
--- a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@ -9,6 +9,7 @@ interface IRichTextReadOnlyEditor {
  borderOnFocus?: boolean;
  customClassName?: string;
  mentionHighlights?: string[];
+  tabIndex?: number;
 }

 interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {
--- a/packages/types/src/cycle/cycle.d.ts
+++ b/packages/types/src/cycle/cycle.d.ts
@ -1,11 +1,7 @@
 import type { TIssue, IIssueFilterOptions } from "@plane/types";

-export type TCycleView = "all" | "active" | "upcoming" | "completed" | "draft";
-
 export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";

-export type TCycleLayout = "list" | "board" | "gantt";
-
 export interface ICycle {
  backlog_issues: number;
  cancelled_issues: number;
@ -30,6 +26,7 @@ export interface ICycle {
  sort_order: number;
  start_date: string | null;
  started_issues: number;
+  sub_issues: number;
  total_issues: number;
  unstarted_issues: number;
  updated_at: Date;
--- a/packages/types/src/cycle/cycle_filters.d.ts
+++ b/packages/types/src/cycle/cycle_filters.d.ts
@ -0,0 +1,19 @@
+export type TCycleTabOptions = "active" | "all";
+
+export type TCycleLayoutOptions = "list" | "board" | "gantt";
+
+export type TCycleDisplayFilters = {
+  active_tab?: TCycleTabOptions;
+  layout?: TCycleLayoutOptions;
+};
+
+export type TCycleFilters = {
+  end_date?: string[] | null;
+  start_date?: string[] | null;
+  status?: string[] | null;
+};
+
+export type TCycleStoredFilters = {
+  display_filters?: TCycleDisplayFilters;
+  filters?: TCycleFilters;
+};
--- a/packages/types/src/cycle/index.ts
+++ b/packages/types/src/cycle/index.ts
@ -0,0 +1,2 @@
+export * from "./cycle_filters";
+export * from "./cycle";
--- a/packages/types/src/index.d.ts
+++ b/packages/types/src/index.d.ts
@ -1,6 +1,6 @@
 export * from "./users";
 export * from "./workspace";
-export * from "./cycles";
+export * from "./cycle";
 export * from "./dashboard";
 export * from "./projects";
 export * from "./state";
--- a/packages/types/src/modules.d.ts
+++ b/packages/types/src/modules.d.ts
@ -30,6 +30,7 @@ export interface IModule {
  name: string;
  project_id: string;
  sort_order: number;
+  sub_issues: number;
  start_date: string | null;
  started_issues: number;
  status: TModuleStatus;
--- a/packages/types/src/projects.d.ts
+++ b/packages/types/src/projects.d.ts
@ -23,6 +23,8 @@ export type TProjectLogoProps = {

 export interface IProject {
  archive_in: number;
+  archived_issues: number;
+  archived_sub_issues: number;
  close_in: number;
  created_at: Date;
  created_by: string;
@ -35,6 +37,8 @@ export interface IProject {
  default_assignee: IUser | string | null;
  default_state: string | null;
  description: string;
+  draft_issues: number;
+  draft_sub_issues: number;
  estimate: string | null;
  id: string;
  identifier: string;
@ -48,7 +52,9 @@ export interface IProject {
  network: number;
  project_lead: IUserLite | string | null;
  sort_order: number | null;
+  sub_issues: number;
  total_cycles: number;
+  total_issues: number;
  total_members: number;
  total_modules: number;
  updated_at: Date;
--- a/packages/ui/.eslintrc.js
+++ b/packages/ui/.eslintrc.js
@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-};
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -14,7 +14,6 @@
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts --external react --minify",
    "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"
  },
  "dependencies": {
--- a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
@ -4,7 +4,7 @@ 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="5.33333" stroke="currentColor" strokeLinecap="round" />
    <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
  </svg>
 );
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@ -127,7 +127,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
      <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
        <Tab.Panel
          as="div"
-          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+          className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
        >
          {distribution?.assignees.length > 0 ? (
            distribution.assignees.map((assignee, index) => {
@ -187,7 +187,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
        </Tab.Panel>
        <Tab.Panel
          as="div"
-          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+          className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
        >
          {distribution?.labels.length > 0 ? (
            distribution.labels.map((label, index) => (
@ -230,7 +230,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
        </Tab.Panel>
        <Tab.Panel
          as="div"
-          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+          className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
        >
          {Object.keys(groupedIssues).map((group, index) => (
            <SingleProgressStats
--- a/web/components/cycles/active-cycle/index.ts
+++ b/web/components/cycles/active-cycle/index.ts
@ -0,0 +1,4 @@
+export * from "./root";
+export * from "./stats";
+export * from "./upcoming-cycles-list-item";
+export * from "./upcoming-cycles-list";
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import useSWR from "swr";
 // hooks
-import { useCycle, useIssues, useMember, useProject } from "hooks/store";
+import { useCycle, useCycleFilter, useIssues, useMember, useProject } from "hooks/store";
 // ui
 import { SingleProgressStats } from "components/core";
 import {
@ -17,10 +17,11 @@ import {
  Avatar,
  CycleGroupIcon,
  setPromiseToast,
+  getButtonStyling,
 } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
-import { ActiveCycleProgressStats } from "components/cycles";
+import { ActiveCycleProgressStats, UpcomingCyclesList } from "components/cycles";
 import { StateDropdown } from "components/dropdowns";
 import { EmptyState } from "components/empty-state";
 // icons
@ -28,6 +29,7 @@ import { ArrowRight, CalendarCheck, CalendarDays, Star, Target } from "lucide-re
 // helpers
 import { renderFormattedDate, findHowManyDaysLeft, renderFormattedDateWithoutYear } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
+import { cn } from "helpers/common.helper";
 // types
 import { ICycle, TCycleGroups } from "@plane/types";
 // constants
@ -41,30 +43,34 @@ interface IActiveCycleDetails {
  projectId: string;
 }

-export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props) => {
+export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
  // props
  const { workspaceSlug, projectId } = props;
+  // store hooks
  const {
    issues: { fetchActiveCycleIssues },
  } = useIssues(EIssuesStoreType.CYCLE);
  const {
-    fetchActiveCycle,
    currentProjectActiveCycleId,
+    currentProjectUpcomingCycleIds,
+    fetchActiveCycle,
    getActiveCycleById,
    addCycleToFavorites,
    removeCycleFromFavorites,
  } = useCycle();
  const { currentProjectDetails } = useProject();
  const { getUserDetails } = useMember();
-
+  // cycle filters hook
+  const { updateDisplayFilters } = useCycleFilter();
+  // derived values
+  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
+  const cycleOwnerDetails = activeCycle ? getUserDetails(activeCycle.owned_by_id) : undefined;
+  // fetch active cycle details
  const { isLoading } = useSWR(
    workspaceSlug && projectId ? `PROJECT_ACTIVE_CYCLE_${projectId}` : null,
    workspaceSlug && projectId ? () => fetchActiveCycle(workspaceSlug, projectId) : null
  );
-
-  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
-  const cycleOwnerDetails = activeCycle ? getUserDetails(activeCycle.owned_by_id) : undefined;
-
+  // fetch active cycle issues
  const { data: activeCycleIssues } = useSWR(
    workspaceSlug && projectId && currentProjectActiveCycleId
      ? CYCLE_ISSUES_WITH_PARAMS(currentProjectActiveCycleId, { priority: "urgent,high" })
@ -73,7 +79,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
      ? () => fetchActiveCycleIssues(workspaceSlug, projectId, currentProjectActiveCycleId)
      : null
  );
-
+  // show loader if active cycle is loading
  if (!activeCycle && isLoading)
    return (
      <Loader>
@ -81,10 +87,44 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
      </Loader>
    );

-  if (!activeCycle) return <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />;
+  if (!activeCycle) {
+    // show empty state if no active cycle is present
+    if (currentProjectUpcomingCycleIds?.length === 0)
+      return <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />;
+    // show upcoming cycles list, if present
+    else
+      return (
+        <>
+          <div className="h-52 w-full grid place-items-center mb-6">
+            <div className="text-center">
+              <h5 className="text-xl font-medium mb-1">No active cycle</h5>
+              <p className="text-custom-text-400 text-base">
+                Create new cycles to find them here or check
+                <br />
+                {"'"}All{"'"} cycles tab to see all cycles or{" "}
+                <button
+                  type="button"
+                  className="text-custom-primary-100 font-medium"
+                  onClick={() =>
+                    updateDisplayFilters(projectId, {
+                      active_tab: "all",
+                    })
+                  }
+                >
+                  click here
+                </button>
+              </p>
+            </div>
+          </div>
+          <UpcomingCyclesList />
+        </>
+      );
+  }

  const endDate = new Date(activeCycle.end_date ?? "");
  const startDate = new Date(activeCycle.start_date ?? "");
+  const daysLeft = findHowManyDaysLeft(activeCycle.end_date) ?? 0;
+  const cycleStatus = activeCycle.status.toLowerCase() as TCycleGroups;

  const groupedIssues: any = {
    backlog: activeCycle.backlog_issues,
@ -94,8 +134,6 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
    cancelled: activeCycle.cancelled_issues,
  };

-  const cycleStatus = activeCycle.status.toLowerCase() as TCycleGroups;
-
  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (!workspaceSlug || !projectId) return;
@ -148,8 +186,6 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
    color: group.color,
  }));

-  const daysLeft = findHowManyDaysLeft(activeCycle.end_date) ?? 0;
-
  return (
    <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
@ -203,27 +239,15 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props

              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2.5 text-custom-text-200">
-                  {cycleOwnerDetails?.avatar && cycleOwnerDetails?.avatar !== "" ? (
-                    <img
-                      src={cycleOwnerDetails?.avatar}
-                      height={16}
-                      width={16}
-                      className="rounded-full"
-                      alt={cycleOwnerDetails?.display_name}
-                    />
-                  ) : (
-                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
-                      {cycleOwnerDetails?.display_name.charAt(0)}
-                    </span>
-                  )}
+                  <Avatar src={cycleOwnerDetails?.avatar} name={cycleOwnerDetails?.display_name} />
                  <span className="text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
                </div>

                {activeCycle.assignee_ids.length > 0 && (
                  <div className="flex items-center gap-1 text-custom-text-200">
                    <AvatarGroup>
-                      {activeCycle.assignee_ids.map((assigne_id) => {
-                        const member = getUserDetails(assigne_id);
+                      {activeCycle.assignee_ids.map((assignee_id) => {
+                        const member = getUserDetails(assignee_id);
                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
                      })}
                    </AvatarGroup>
@ -233,7 +257,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props

              <div className="flex items-center gap-4 text-custom-text-200">
                <div className="flex gap-2">
-                  <LayersIcon className="h-4 w-4 flex-shrink-0" />
+                  <LayersIcon className="h-3.5 w-3.5 flex-shrink-0" />
                  {activeCycle.total_issues} issues
                </div>
                <div className="flex items-center gap-2">
@ -244,9 +268,9 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props

              <Link
                href={`/${workspaceSlug}/projects/${projectId}/cycles/${activeCycle.id}`}
-                className="w-min text-nowrap rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90"
+                className={cn(getButtonStyling("primary", "lg"), "w-min whitespace-nowrap")}
              >
-                View Cycle
+                View cycle
              </Link>
            </div>
          </div>
@ -287,11 +311,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
      </div>
      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
        <div className="flex max-h-60 flex-col gap-3 overflow-hidden p-4">
-          <div className="text-custom-primary">High Priority Issues</div>
+          <div className="text-custom-primary">High priority issues</div>
          <div className="flex h-full flex-col gap-2.5 overflow-y-scroll rounded-md">
            {activeCycleIssues ? (
              activeCycleIssues.length > 0 ? (
-                activeCycleIssues.map((issue: any) => (
+                activeCycleIssues.map((issue) => (
                  <Link
                    key={issue.id}
                    href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
@ -314,9 +338,9 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                    </div>
                    <div className="flex flex-shrink-0 items-center gap-1.5">
                      <StateDropdown
-                        value={issue.state_id ?? undefined}
+                        value={issue.state_id}
                        onChange={() => {}}
-                        projectId={projectId?.toString() ?? ""}
+                        projectId={projectId}
                        disabled
                        buttonVariant="background-with-text"
                      />
@ -359,10 +383,10 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
            </div>
            <div className="flex items-center gap-1">
              <span>
-                <LayersIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
+                <LayersIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />
              </span>
              <span>
-                Pending Issues -{" "}
+                Pending issues-{" "}
                {activeCycle.total_issues - (activeCycle.completed_issues + activeCycle.cancelled_issues)}
              </span>
            </div>
--- a/web/components/cycles/active-cycle/stats.tsx
+++ b/web/components/cycles/active-cycle/stats.tsx
@ -134,7 +134,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
        </Tab.Panels>
      ) : (
        <div className="mt-4 grid place-items-center text-center text-sm text-custom-text-200">
-          There are no high priority issues present in this cycle.
+          There are no issues present in this cycle.
        </div>
      )}
    </Tab.Group>
--- a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
+++ b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
@ -0,0 +1,135 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react";
+import { Star, User2 } from "lucide-react";
+// hooks
+import { useCycle, useEventTracker, useMember } from "hooks/store";
+// components
+import { CycleQuickActions } from "components/cycles";
+// ui
+import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
+// helpers
+import { renderFormattedDate } from "helpers/date-time.helper";
+// constants
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
+
+type Props = {
+  cycleId: string;
+};
+
+export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
+  const { cycleId } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store hooks
+  const { captureEvent } = useEventTracker();
+  const { addCycleToFavorites, getCycleById, removeCycleFromFavorites } = useCycle();
+  const { getUserDetails } = useMember();
+  // derived values
+  const cycle = getCycleById(cycleId);
+
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      () => {
+        captureEvent(CYCLE_FAVORITED, {
+          cycle_id: cycleId,
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding cycle to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the cycle to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    ).then(() => {
+      captureEvent(CYCLE_UNFAVORITED, {
+        cycle_id: cycleId,
+        element: "List layout",
+        state: "SUCCESS",
+      });
+    });
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing cycle from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the cycle from favorites. Please try again.",
+      },
+    });
+  };
+
+  if (!cycle) return null;
+
+  return (
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`}
+      className="py-5 px-2 flex items-center justify-between gap-2 hover:bg-custom-background-90"
+    >
+      <h6 className="font-medium text-base">{cycle.name}</h6>
+      <div className="flex items-center gap-4">
+        {cycle.start_date && cycle.end_date && (
+          <div className="text-xs text-custom-text-300">
+            {renderFormattedDate(cycle.start_date)} - {renderFormattedDate(cycle.end_date)}
+          </div>
+        )}
+        {cycle.assignee_ids?.length > 0 ? (
+          <AvatarGroup showTooltip={false}>
+            {cycle.assignee_ids?.map((assigneeId) => {
+              const member = getUserDetails(assigneeId);
+              return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+            })}
+          </AvatarGroup>
+        ) : (
+          <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+            <User2 className="h-4 w-4 text-custom-text-400" />
+          </span>
+        )}
+
+        {cycle.is_favorite ? (
+          <button type="button" onClick={handleRemoveFromFavorites}>
+            <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+          </button>
+        ) : (
+          <button type="button" onClick={handleAddToFavorites}>
+            <Star className="h-3.5 w-3.5 text-custom-text-200" />
+          </button>
+        )}
+
+        {workspaceSlug && projectId && (
+          <CycleQuickActions
+            cycleId={cycleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        )}
+      </div>
+    </Link>
+  );
+});
--- a/web/components/cycles/active-cycle/upcoming-cycles-list.tsx
+++ b/web/components/cycles/active-cycle/upcoming-cycles-list.tsx
@ -0,0 +1,25 @@
+import { observer } from "mobx-react";
+// hooks
+import { useCycle } from "hooks/store";
+// components
+import { UpcomingCycleListItem } from "components/cycles";
+
+export const UpcomingCyclesList = observer(() => {
+  // store hooks
+  const { currentProjectUpcomingCycleIds } = useCycle();
+
+  if (!currentProjectUpcomingCycleIds) return null;
+
+  return (
+    <div>
+      <div className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded inline-block">
+        Upcoming cycles
+      </div>
+      <div className="mt-2 divide-y-[0.5px] divide-custom-border-200 border-b-[0.5px] border-custom-border-200">
+        {currentProjectUpcomingCycleIds.map((cycleId) => (
+          <UpcomingCycleListItem key={cycleId} cycleId={cycleId} />
+        ))}
+      </div>
+    </div>
+  );
+});
--- a/web/components/cycles/applied-filters/date.tsx
+++ b/web/components/cycles/applied-filters/date.tsx
@ -0,0 +1,55 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// helpers
+import { renderFormattedDate } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { editable, 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)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <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>
+      ))}
+    </>
+  );
+});
--- a/web/components/cycles/applied-filters/index.ts
+++ b/web/components/cycles/applied-filters/index.ts
@ -0,0 +1,3 @@
+export * from "./date";
+export * from "./root";
+export * from "./status";
--- a/web/components/cycles/applied-filters/root.tsx
+++ b/web/components/cycles/applied-filters/root.tsx
@ -0,0 +1,90 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// hooks
+import { useUser } from "hooks/store";
+// components
+import { AppliedDateFilters, AppliedStatusFilters } from "components/cycles";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TCycleFilters } from "@plane/types";
+// constants
+import { EUserProjectRoles } from "constants/project";
+
+type Props = {
+  appliedFilters: TCycleFilters;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TCycleFilters, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+};
+
+const DATE_FILTERS = ["start_date", "end_date"];
+
+export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  if (!appliedFilters) return null;
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TCycleFilters;
+
+        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <div className="flex flex-wrap items-center gap-1">
+              {filterKey === "status" && (
+                <AppliedStatusFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("status", val)}
+                  values={value}
+                />
+              )}
+              {DATE_FILTERS.includes(filterKey) && (
+                <AppliedDateFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {isEditingAllowed && (
+                <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>
+        );
+      })}
+      {isEditingAllowed && (
+        <button
+          type="button"
+          onClick={handleClearAllFilters}
+          className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        >
+          Clear all
+          <X size={12} strokeWidth={2} />
+        </button>
+      )}
+    </div>
+  );
+});
--- a/web/components/cycles/applied-filters/status.tsx
+++ b/web/components/cycles/applied-filters/status.tsx
@ -0,0 +1,43 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+import { CYCLE_STATUS } from "constants/cycle";
+import { cn } from "helpers/common.helper";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((status) => {
+        const statusDetails = CYCLE_STATUS.find((s) => s.value === status);
+        return (
+          <div
+            key={status}
+            className={cn(
+              "flex items-center gap-1 rounded p-1 text-xs",
+              statusDetails?.bgColor,
+              statusDetails?.textColor
+            )}
+          >
+            {statusDetails?.title}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(status)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
--- a/web/components/cycles/board/cycles-board-card.tsx
+++ b/web/components/cycles/board/cycles-board-card.tsx
@ -1,22 +1,12 @@
-import { FC, MouseEvent, useState } from "react";
+import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
 // components
-import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
-import {
-  Avatar,
-  AvatarGroup,
-  CustomMenu,
-  Tooltip,
-  LayersIcon,
-  CycleGroupIcon,
-  TOAST_TYPE,
-  setToast,
-  setPromiseToast,
-} from "@plane/ui";
-import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+import { Info, Star } from "lucide-react";
+import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
+import { CycleQuickActions } from "components/cycles";
 // ui
 // icons
 // helpers
@ -24,7 +14,6 @@ import { CYCLE_STATUS } from "constants/cycle";
 import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 import { EUserWorkspaceRoles } from "constants/workspace";
 import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
 // constants
 import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
 //.types
@ -38,13 +27,10 @@ export interface ICyclesBoardCard {

 export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
  const { cycleId, workspaceSlug, projectId } = props;
-  // states
-  const [updateModal, setUpdateModal] = useState(false);
-  const [deleteModal, setDeleteModal] = useState(false);
  // router
  const router = useRouter();
  // store
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
  const {
    membership: { currentProjectRole },
  } = useUser();
@ -56,7 +42,6 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
  if (!cycleDetails) return null;

  const cycleStatus = cycleDetails.status.toLocaleLowerCase();
-  const isCompleted = cycleStatus === "completed";
  const endDate = new Date(cycleDetails.end_date ?? "");
  const startDate = new Date(cycleDetails.start_date ?? "");
  const isDateValid = cycleDetails.start_date || cycleDetails.end_date;
@ -78,24 +63,10 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
    ? cycleTotalIssues === 0
      ? "0 Issue"
      : cycleTotalIssues === cycleDetails.completed_issues
-        ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-        : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
+      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+      : `${cycleDetails.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/${cycleId}`).then(() => {
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
-
  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (!workspaceSlug || !projectId) return;
@ -152,20 +123,6 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
    });
  };

-  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page grid layout");
-    setUpdateModal(true);
-  };
-
-  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page grid layout");
-    setDeleteModal(true);
-  };
-
  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
    const { query } = router;
    e.preventDefault();
@ -181,22 +138,6 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {

  return (
    <div>
-      <CycleCreateUpdateModal
-        data={cycleDetails}
-        isOpen={updateModal}
-        handleClose={() => setUpdateModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-
-      <CycleDeleteModal
-        cycle={cycleDetails}
-        isOpen={deleteModal}
-        handleClose={() => setDeleteModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-
      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
          <div className="flex items-center justify-between gap-2">
@ -288,30 +229,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
                    </button>
                  ))}
-                <CustomMenu ellipsis className="z-10">
-                  {!isCompleted && isEditingAllowed && (
-                    <>
-                      <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>
+
+                <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
              </div>
            </div>
          </div>
--- a/web/components/cycles/board/cycles-board-map.tsx
+++ b/web/components/cycles/board/cycles-board-map.tsx
@ -0,0 +1,25 @@
+// components
+import { CyclesBoardCard } from "components/cycles";
+
+type Props = {
+  cycleIds: string[];
+  peekCycle: string | undefined;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CyclesBoardMap: React.FC<Props> = (props) => {
+  const { cycleIds, peekCycle, projectId, workspaceSlug } = props;
+
+  return (
+    <div
+      className={`w-full grid grid-cols-1 gap-6 ${
+        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`}
+    >
+      {cycleIds.map((cycleId) => (
+        <CyclesBoardCard key={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
+      ))}
+    </div>
+  );
+};
--- a/web/components/cycles/board/index.ts
+++ b/web/components/cycles/board/index.ts
@ -0,0 +1,3 @@
+export * from "./cycles-board-card";
+export * from "./cycles-board-map";
+export * from "./root";
--- a/web/components/cycles/board/root.tsx
+++ b/web/components/cycles/board/root.tsx
@ -0,0 +1,60 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { Disclosure } from "@headlessui/react";
+import { ChevronRight } from "lucide-react";
+// components
+import { CyclePeekOverview, CyclesBoardMap } from "components/cycles";
+// helpers
+import { cn } from "helpers/common.helper";
+
+export interface ICyclesBoard {
+  completedCycleIds: string[];
+  cycleIds: string[];
+  workspaceSlug: string;
+  projectId: string;
+  peekCycle: string | undefined;
+}
+
+export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
+  const { completedCycleIds, cycleIds, workspaceSlug, projectId, peekCycle } = props;
+
+  return (
+    <div className="h-full w-full">
+      <div className="flex h-full w-full justify-between">
+        <div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg">
+          <CyclesBoardMap
+            cycleIds={cycleIds}
+            peekCycle={peekCycle}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+          {completedCycleIds.length !== 0 && (
+            <Disclosure as="div" className="space-y-4">
+              <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1">
+                {({ open }) => (
+                  <>
+                    Completed cycles ({completedCycleIds.length})
+                    <ChevronRight
+                      className={cn("h-3 w-3 transition-all", {
+                        "rotate-90": open,
+                      })}
+                    />
+                  </>
+                )}
+              </Disclosure.Button>
+              <Disclosure.Panel>
+                <CyclesBoardMap
+                  cycleIds={completedCycleIds}
+                  peekCycle={peekCycle}
+                  projectId={projectId}
+                  workspaceSlug={workspaceSlug}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+          )}
+        </div>
+        <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} />
+      </div>
+    </div>
+  );
+});
--- a/web/components/cycles/cycles-board.tsx
+++ b/web/components/cycles/cycles-board.tsx
@ -1,47 +0,0 @@
-import { FC } from "react";
-import { observer } from "mobx-react-lite";
-// components
-import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
-import { EmptyState } from "components/empty-state";
-// constants
-import { EMPTY_STATE_DETAILS } from "constants/empty-state";
-
-export interface ICyclesBoard {
-  cycleIds: string[];
-  filter: string;
-  workspaceSlug: string;
-  projectId: string;
-  peekCycle: string | undefined;
-}
-
-export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
-  const { cycleIds, filter, workspaceSlug, projectId, peekCycle } = props;
-
-  return (
-    <>
-      {cycleIds?.length > 0 ? (
-        <div className="h-full w-full">
-          <div className="flex h-full w-full justify-between">
-            <div
-              className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
-                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  vertical-scrollbar scrollbar-lg`}
-            >
-              {cycleIds.map((cycleId) => (
-                <CyclesBoardCard key={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
-              ))}
-            </div>
-            <CyclePeekOverview
-              projectId={projectId?.toString() ?? ""}
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-            />
-          </div>
-        </div>
-      ) : (
-        <EmptyState type={`project-cycle-${filter}` as keyof typeof EMPTY_STATE_DETAILS} size="sm" />
-      )}
-    </>
-  );
-});
--- a/web/components/cycles/cycles-list.tsx
+++ b/web/components/cycles/cycles-list.tsx
@ -1,57 +0,0 @@
-import { FC } from "react";
-import { observer } from "mobx-react-lite";
-// components
-import { CyclePeekOverview, CyclesListItem } from "components/cycles";
-import { EmptyState } from "components/empty-state";
-// ui
-import { Loader } from "@plane/ui";
-// constants
-import { EMPTY_STATE_DETAILS } from "constants/empty-state";
-
-export interface ICyclesList {
-  cycleIds: string[];
-  filter: string;
-  workspaceSlug: string;
-  projectId: string;
-}
-
-export const CyclesList: FC<ICyclesList> = observer((props) => {
-  const { cycleIds, filter, workspaceSlug, projectId } = props;
-
-  return (
-    <>
-      {cycleIds ? (
-        <>
-          {cycleIds.length > 0 ? (
-            <div className="h-full overflow-y-auto">
-              <div className="flex h-full w-full justify-between">
-                <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
-                  {cycleIds.map((cycleId) => (
-                    <CyclesListItem
-                      key={cycleId}
-                      cycleId={cycleId}
-                      workspaceSlug={workspaceSlug}
-                      projectId={projectId}
-                    />
-                  ))}
-                </div>
-                <CyclePeekOverview
-                  projectId={projectId?.toString() ?? ""}
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                />
-              </div>
-            </div>
-          ) : (
-            <EmptyState type={`project-cycle-${filter}` as keyof typeof EMPTY_STATE_DETAILS} size="sm" />
-          )}
-        </>
-      ) : (
-        <Loader className="space-y-4">
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-        </Loader>
-      )}
-    </>
-  );
-});
--- a/web/components/cycles/cycles-view-header.tsx
+++ b/web/components/cycles/cycles-view-header.tsx
@ -0,0 +1,164 @@
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { Tab } from "@headlessui/react";
+import { ListFilter, Search, X } from "lucide-react";
+// hooks
+import { useCycleFilter } from "hooks/store";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { CycleFiltersSelection } from "components/cycles";
+import { FiltersDropdown } from "components/issues";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { TCycleFilters } from "@plane/types";
+// constants
+import { CYCLE_TABS_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+
+type Props = {
+  projectId: string;
+};
+
+export const CyclesViewHeader: React.FC<Props> = observer((props) => {
+  const { projectId } = props;
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const {
+    currentProjectDisplayFilters,
+    currentProjectFilters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useCycleFilter();
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TCycleFilters, value: string | string[]) => {
+      const newValues = currentProjectFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      else {
+        if (currentProjectFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId, { [key]: newValues });
+    },
+    [currentProjectFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else setIsSearchOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-custom-border-200 px-4 sm:px-5 sm:pb-0">
+      <Tab.List as="div" className="flex items-center overflow-x-scroll">
+        {CYCLE_TABS_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>
+      {currentProjectDisplayFilters?.active_tab !== "active" && (
+        <div className="hidden h-full sm:flex items-center gap-3 self-end">
+          {!isSearchOpen && (
+            <button
+              type="button"
+              className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+              onClick={() => {
+                setIsSearchOpen(true);
+                inputRef.current?.focus();
+              }}
+            >
+              <Search className="h-3.5 w-3.5" />
+            </button>
+          )}
+          <div
+            className={cn(
+              "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+              {
+                "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              }
+            )}
+          >
+            <Search className="h-3.5 w-3.5" />
+            <input
+              ref={inputRef}
+              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              onChange={(e) => updateSearchQuery(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+            />
+            {isSearchOpen && (
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  updateSearchQuery("");
+                  setIsSearchOpen(false);
+                }}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+          <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+            <CycleFiltersSelection filters={currentProjectFilters ?? {}} handleFiltersUpdate={handleFilters} />
+          </FiltersDropdown>
+          <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+            {CYCLE_VIEW_LAYOUTS.map((layout) => (
+              <Tooltip key={layout.key} tooltipContent={layout.title}>
+                <button
+                  type="button"
+                  className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
+                    currentProjectDisplayFilters?.layout == layout.key
+                      ? "bg-custom-background-100 shadow-custom-shadow-2xs"
+                      : ""
+                  }`}
+                  onClick={() =>
+                    updateDisplayFilters(projectId, {
+                      layout: layout.key,
+                    })
+                  }
+                >
+                  <layout.icon
+                    strokeWidth={2}
+                    className={`h-3.5 w-3.5 ${
+                      currentProjectDisplayFilters?.layout == layout.key
+                        ? "text-custom-text-100"
+                        : "text-custom-text-200"
+                    }`}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
--- a/web/components/cycles/cycles-view.tsx
+++ b/web/components/cycles/cycles-view.tsx
@ -1,43 +1,35 @@
 import { FC } from "react";
+import Image from "next/image";
 import { observer } from "mobx-react-lite";
 // hooks
+import { useCycle, useCycleFilter } from "hooks/store";
 // components
 import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles";
-// ui components
+// ui
 import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "components/ui";
-import { useCycle } from "hooks/store";
+// assets
+import NameFilterImage from "public/empty-state/cycle/name-filter.svg";
+import AllFiltersImage from "public/empty-state/cycle/all-filters.svg";
 // types
-import { TCycleLayout, TCycleView } from "@plane/types";
+import { TCycleLayoutOptions } from "@plane/types";

 export interface ICyclesView {
-  filter: TCycleView;
-  layout: TCycleLayout;
+  layout: TCycleLayoutOptions;
  workspaceSlug: string;
  projectId: string;
  peekCycle: string | undefined;
 }

 export const CyclesView: FC<ICyclesView> = observer((props) => {
-  const { filter, layout, workspaceSlug, projectId, peekCycle } = props;
+  const { layout, workspaceSlug, projectId, peekCycle } = props;
  // store hooks
-  const {
-    currentProjectCompletedCycleIds,
-    currentProjectDraftCycleIds,
-    currentProjectUpcomingCycleIds,
-    currentProjectCycleIds,
-    loader,
-  } = useCycle();
+  const { getFilteredCycleIds, getFilteredCompletedCycleIds, loader } = useCycle();
+  const { searchQuery } = useCycleFilter();
+  // derived values
+  const filteredCycleIds = getFilteredCycleIds(projectId);
+  const filteredCompletedCycleIds = getFilteredCompletedCycleIds(projectId);

-  const cyclesList =
-    filter === "completed"
-      ? currentProjectCompletedCycleIds
-      : filter === "draft"
-        ? currentProjectDraftCycleIds
-        : filter === "upcoming"
-          ? currentProjectUpcomingCycleIds
-          : currentProjectCycleIds;
-
-  if (loader || !cyclesList)
+  if (loader || !filteredCycleIds)
    return (
      <>
        {layout === "list" && <CycleModuleListLayout />}
@ -46,23 +38,45 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
      </>
    );

+  if (filteredCycleIds.length === 0 && filteredCompletedCycleIds?.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching cycles"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching cycles</h5>
+          <p className="text-custom-text-400 text-base">
+            {searchQuery.trim() === ""
+              ? "Remove the filters to see all cycles"
+              : "Remove the search criteria to see all cycles"}
+          </p>
+        </div>
+      </div>
+    );
+
  return (
    <>
      {layout === "list" && (
-        <CyclesList cycleIds={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
+        <CyclesList
+          completedCycleIds={filteredCompletedCycleIds ?? []}
+          cycleIds={filteredCycleIds}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+        />
      )}
-
      {layout === "board" && (
        <CyclesBoard
-          cycleIds={cyclesList}
-          filter={filter}
+          completedCycleIds={filteredCompletedCycleIds ?? []}
+          cycleIds={filteredCycleIds}
          workspaceSlug={workspaceSlug}
          projectId={projectId}
          peekCycle={peekCycle}
        />
      )}
-
-      {layout === "gantt" && <CyclesListGanttChartView cycleIds={cyclesList} workspaceSlug={workspaceSlug} />}
+      {layout === "gantt" && <CyclesListGanttChartView cycleIds={filteredCycleIds} workspaceSlug={workspaceSlug} />}
    </>
  );
 });
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@ -103,7 +103,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20">
                          <AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
                        </div>
-                        <div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
+                        <div className="text-xl font-medium 2xl:text-2xl">Delete cycle</div>
                      </div>
                      <span>
                        <p className="text-sm text-custom-text-200">
@ -118,8 +118,8 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                          Cancel
                        </Button>

-                        <Button variant="danger" size="sm" tabIndex={1} onClick={formSubmit}>
-                          {loader ? "Deleting..." : "Delete Cycle"}
+                        <Button variant="danger" size="sm" tabIndex={1} onClick={formSubmit} loading={loader}>
+                          {loader ? "Deleting" : "Delete"}
                        </Button>
                      </div>
                    </div>
--- a/web/components/cycles/dropdowns/filters/end-date.tsx
+++ b/web/components/cycles/dropdowns/filters/end-date.tsx
@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { DateFilterModal } from "components/core";
+import { FilterHeader, FilterOption } from "components/issues";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterEndDate: 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={`Due 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 italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
--- a/web/components/cycles/dropdowns/filters/index.ts
+++ b/web/components/cycles/dropdowns/filters/index.ts
@ -0,0 +1,4 @@
+export * from "./end-date";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
--- a/web/components/cycles/dropdowns/filters/root.tsx
+++ b/web/components/cycles/dropdowns/filters/root.tsx
@ -0,0 +1,69 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+// components
+import { FilterEndDate, FilterStartDate, FilterStatus } from "components/cycles";
+// types
+import { TCycleFilters, TCycleGroups } from "@plane/types";
+
+type Props = {
+  filters: TCycleFilters;
+  handleFiltersUpdate: (key: keyof TCycleFilters, value: string | string[]) => void;
+};
+
+export const CycleFiltersSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFiltersUpdate } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            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="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+        {/* cycle status */}
+        <div className="py-2">
+          <FilterStatus
+            appliedFilters={(filters.status as TCycleGroups[]) ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("status", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* end date */}
+        <div className="py-2">
+          <FilterEndDate
+            appliedFilters={filters.end_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("end_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/web/components/cycles/dropdowns/filters/start-date.tsx
+++ b/web/components/cycles/dropdowns/filters/start-date.tsx
@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { DateFilterModal } from "components/core";
+import { FilterHeader, FilterOption } from "components/issues";
+// 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 italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
--- a/web/components/cycles/dropdowns/filters/status.tsx
+++ b/web/components/cycles/dropdowns/filters/status.tsx
@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TCycleGroups } from "@plane/types";
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
+
+type Props = {
+  appliedFilters: TCycleGroups[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = CYCLE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status of the cycle${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                title={status.title}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
--- a/web/components/cycles/dropdowns/index.ts
+++ b/web/components/cycles/dropdowns/index.ts
@ -0,0 +1 @@
+export * from "./filters";
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@ -4,8 +4,7 @@ import { useRouter } from "next/router";
 // hooks
 import { CycleGanttBlock } from "components/cycles";
 import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
-import { EUserProjectRoles } from "constants/project";
-import { useCycle, useUser } from "hooks/store";
+import { useCycle } from "hooks/store";
 // components
 // types
 import { ICycle } from "@plane/types";
@ -22,9 +21,6 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
  const router = useRouter();
  const { workspaceSlug } = router.query;
  // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
  const { getCycleById, updateCycleDetails } = useCycle();

  const handleCycleUpdate = async (cycle: ICycle, data: IBlockUpdateData) => {
@ -52,9 +48,6 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
    return structuredBlocks;
  };

-  const isAllowed =
-    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
-
  return (
    <div className="h-full w-full overflow-y-auto">
      <GanttChartRoot
@ -67,7 +60,7 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
        enableBlockLeftResize={false}
        enableBlockRightResize={false}
        enableBlockMove={false}
-        enableReorder={isAllowed}
+        enableReorder={false}
      />
    </div>
  );
--- a/web/components/cycles/index.ts
+++ b/web/components/cycles/index.ts
@ -1,17 +1,16 @@
-export * from "./cycles-view";
-export * from "./active-cycle-details";
-export * from "./active-cycle-stats";
+export * from "./active-cycle";
+export * from "./applied-filters";
+export * from "./board/";
+export * from "./dropdowns";
 export * from "./gantt-chart";
+export * from "./list";
+export * from "./cycle-peek-overview";
+export * from "./cycles-view-header";
 export * from "./cycles-view";
+export * from "./delete-modal";
 export * from "./form";
 export * from "./modal";
+export * from "./quick-actions";
 export * from "./sidebar";
 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";
--- a/web/components/cycles/list/cycles-list-item.tsx
+++ b/web/components/cycles/list/cycles-list-item.tsx
@ -1,26 +1,14 @@
-import { FC, MouseEvent, useState } from "react";
+import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
-import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
-import {
-  CustomMenu,
-  Tooltip,
-  CircularProgressIndicator,
-  CycleGroupIcon,
-  AvatarGroup,
-  Avatar,
-  TOAST_TYPE,
-  setToast,
-  setPromiseToast,
-} from "@plane/ui";
-import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+import { Check, Info, Star, User2 } from "lucide-react";
+import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
+import { CycleQuickActions } from "components/cycles";
 import { CYCLE_STATUS } from "constants/cycle";
 import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
-import { EUserWorkspaceRoles } from "constants/workspace";
 import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
 import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
 // components
 // ui
@ -29,6 +17,7 @@ import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
 // constants
 // types
 import { TCycleGroups } from "@plane/types";
+import { EUserProjectRoles } from "constants/project";

 type TCyclesListItem = {
  cycleId: string;
@ -42,33 +31,16 @@ type TCyclesListItem = {

 export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
  const { cycleId, workspaceSlug, projectId } = props;
-  // states
-  const [updateModal, setUpdateModal] = useState(false);
-  const [deleteModal, setDeleteModal] = useState(false);
  // router
  const router = useRouter();
  // store hooks
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
  const {
    membership: { currentProjectRole },
  } = useUser();
  const { getCycleById, addCycleToFavorites, removeCycleFromFavorites } = useCycle();
  const { getUserDetails } = useMember();

-  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/${cycleId}`).then(() => {
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
-
  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (!workspaceSlug || !projectId) return;
@ -125,20 +97,6 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
    });
  };

-  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page list layout");
-    setUpdateModal(true);
-  };
-
-  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page list layout");
-    setDeleteModal(true);
-  };
-
  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
    const { query } = router;
    e.preventDefault();
@ -161,7 +119,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
  const endDate = new Date(cycleDetails.end_date ?? "");
  const startDate = new Date(cycleDetails.start_date ?? "");

-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;

  const cycleTotalIssues =
    cycleDetails.backlog_issues +
@ -184,20 +142,6 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {

  return (
    <>
-      <CycleCreateUpdateModal
-        data={cycleDetails}
-        isOpen={updateModal}
-        handleClose={() => setUpdateModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-      <CycleDeleteModal
-        cycle={cycleDetails}
-        isOpen={deleteModal}
-        handleClose={() => setDeleteModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 md:flex-row">
          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
@ -246,7 +190,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
              </div>
            )}
          </div>
-          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 overflow-hidden md:w-auto md:flex-shrink-0 md:justify-end ">
+          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 overflow-hidden md:w-auto md:flex-shrink-0 md:justify-end">
            <div className="text-xs text-custom-text-300">
              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
            </div>
@ -256,8 +200,8 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                <div className="flex w-10 cursor-default items-center justify-center">
                  {cycleDetails.assignee_ids?.length > 0 ? (
                    <AvatarGroup showTooltip={false}>
-                      {cycleDetails.assignee_ids?.map((assigne_id) => {
-                        const member = getUserDetails(assigne_id);
+                      {cycleDetails.assignee_ids?.map((assignee_id) => {
+                        const member = getUserDetails(assignee_id);
                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
                      })}
                    </AvatarGroup>
@ -281,30 +225,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                    </button>
                  )}

-                  <CustomMenu ellipsis>
-                    {!isCompleted && isEditingAllowed && (
-                      <>
-                        <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>
+                  <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
                </>
              )}
            </div>
--- a/web/components/cycles/list/cycles-list-map.tsx
+++ b/web/components/cycles/list/cycles-list-map.tsx
@ -0,0 +1,20 @@
+// components
+import { CyclesListItem } from "components/cycles";
+
+type Props = {
+  cycleIds: string[];
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CyclesListMap: React.FC<Props> = (props) => {
+  const { cycleIds, projectId, workspaceSlug } = props;
+
+  return (
+    <>
+      {cycleIds.map((cycleId) => (
+        <CyclesListItem key={cycleId} cycleId={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} />
+      ))}
+    </>
+  );
+};
--- a/web/components/cycles/list/index.ts
+++ b/web/components/cycles/list/index.ts
@ -0,0 +1,3 @@
+export * from "./cycles-list-item";
+export * from "./cycles-list-map";
+export * from "./root";
--- a/web/components/cycles/list/root.tsx
+++ b/web/components/cycles/list/root.tsx
@ -0,0 +1,49 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { Disclosure } from "@headlessui/react";
+import { ChevronRight } from "lucide-react";
+// components
+import { CyclePeekOverview, CyclesListMap } from "components/cycles";
+// helpers
+import { cn } from "helpers/common.helper";
+
+export interface ICyclesList {
+  completedCycleIds: string[];
+  cycleIds: string[];
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CyclesList: FC<ICyclesList> = observer((props) => {
+  const { completedCycleIds, cycleIds, workspaceSlug, projectId } = props;
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+          <CyclesListMap cycleIds={cycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
+          {completedCycleIds.length !== 0 && (
+            <Disclosure as="div" className="mt-4 space-y-4">
+              <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded ml-5 flex items-center gap-1">
+                {({ open }) => (
+                  <>
+                    Completed cycles ({completedCycleIds.length})
+                    <ChevronRight
+                      className={cn("h-3 w-3 transition-all", {
+                        "rotate-90": open,
+                      })}
+                    />
+                  </>
+                )}
+              </Disclosure.Button>
+              <Disclosure.Panel>
+                <CyclesListMap cycleIds={completedCycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
+              </Disclosure.Panel>
+            </Disclosure>
+          )}
+        </div>
+        <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} />
+      </div>
+    </div>
+  );
+});
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@ -11,7 +11,7 @@ import { CycleService } from "services/cycle.service";
 // components
 // ui
 // types
-import type { CycleDateCheckData, ICycle, TCycleView } from "@plane/types";
+import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
 // constants

 type CycleModalProps = {
@ -34,7 +34,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
  const { workspaceProjectIds } = useProject();
  const { createCycle, updateCycleDetails } = useCycle();

-  const { setValue: setCycleTab } = useLocalStorage<TCycleView>("cycle_tab", "active");
+  const { setValue: setCycleTab } = useLocalStorage<TCycleTabOptions>("cycle_tab", "active");

  const handleCreateCycle = async (payload: Partial<ICycle>) => {
    if (!workspaceSlug || !projectId) return;
--- a/web/components/cycles/quick-actions.tsx
+++ b/web/components/cycles/quick-actions.tsx
@ -0,0 +1,112 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { LinkIcon, Pencil, Trash2 } from "lucide-react";
+// hooks
+import { useCycle, useEventTracker, useUser } from "hooks/store";
+// components
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+// ui
+import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// constants
+import { EUserProjectRoles } from "constants/project";
+
+type Props = {
+  cycleId: string;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CycleQuickActions: React.FC<Props> = observer((props) => {
+  const { cycleId, projectId, workspaceSlug } = props;
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const {
+    membership: { currentWorkspaceAllProjectsRole },
+  } = useUser();
+  const { getCycleById } = useCycle();
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
+  const isCompleted = cycleDetails?.status.toLowerCase() === "completed";
+  // auth
+  const isEditingAllowed =
+    !!currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId] >= EUserProjectRoles.MEMBER;
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTrackElement("Cycles page list layout");
+    setUpdateModal(true);
+  };
+
+  const handleDeleteCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTrackElement("Cycles page list layout");
+    setDeleteModal(true);
+  };
+
+  return (
+    <>
+      {cycleDetails && (
+        <div className="fixed">
+          <CycleCreateUpdateModal
+            data={cycleDetails}
+            isOpen={updateModal}
+            handleClose={() => setUpdateModal(false)}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+          />
+          <CycleDeleteModal
+            cycle={cycleDetails}
+            isOpen={deleteModal}
+            handleClose={() => setDeleteModal(false)}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+          />
+        </div>
+      )}
+      <CustomMenu ellipsis placement="bottom-end">
+        {!isCompleted && isEditingAllowed && (
+          <>
+            <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>
+    </>
+  );
+});
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@ -216,15 +216,15 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
        ? "0 Issue"
        : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
      : cycleDetails.total_issues === 0
-        ? "0 Issue"
-        : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+      ? "0 Issue"
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;

  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);

  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;

  return (
-    <>
+    <div className="relative">
      {cycleDetails && workspaceSlug && projectId && (
        <CycleDeleteModal
          cycle={cycleDetails}
@ -236,7 +236,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
      )}

      <>
-        <div className="flex w-full items-center justify-between">
+        <div className="sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 py-5">
          <div>
            <button
              className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
@ -505,6 +505,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
          </div>
        </div>
      </>
-    </>
+    </div>
  );
 });
--- a/web/components/gantt-chart/chart/header.tsx
+++ b/web/components/gantt-chart/chart/header.tsx
@ -25,7 +25,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
  const { currentView } = useGanttChart();

  return (
-    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2 z-10">
+    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
      <div className="flex items-center gap-2 text-lg font-medium">{title}</div>
      <div className="ml-auto">
        <div className="ml-auto text-sm font-medium">{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}</div>
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
 import { ArrowRight, Plus, PanelRight } from "lucide-react";
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@ -142,6 +142,12 @@ export const CycleIssuesHeader: React.FC = observer(() => {
  const canUserCreateIssue =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

+  const issueCount = cycleDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? cycleDetails.total_issues + cycleDetails?.sub_issues
+      : cycleDetails.total_issues
+    : undefined;
+
  return (
    <>
      <ProjectAnalyticsModal
@ -197,15 +203,29 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                    label={
                      <>
                        <ContrastIcon className="h-3 w-3" />
-                        <div className=" w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
-                          {cycleDetails?.name && cycleDetails.name}
+                        <div className="flex items-center gap-2 w-auto max-w-[70px] sm:max-w-[200px] truncate">
+                          <p className="truncate">{cycleDetails?.name && cycleDetails.name}</p>
+                          {issueCount && issueCount > 0 ? (
+                            <Tooltip
+                              tooltipContent={`There are ${issueCount} ${
+                                issueCount > 1 ? "issues" : "issue"
+                              } in this cycle`}
+                              position="bottom"
+                            >
+                              <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                                {issueCount}
+                              </span>
+                            </Tooltip>
+                          ) : null}
                        </div>
                      </>
                    }
-                    className="ml-1.5 flex-shrink-0"
+                    className="ml-1.5 flex-shrink-0 truncate"
                    placement="bottom-start"
                  >
-                    {currentProjectCycleIds?.map((cycleId) => <CycleDropdownOption key={cycleId} cycleId={cycleId} />)}
+                    {currentProjectCycleIds?.map((cycleId) => (
+                      <CycleDropdownOption key={cycleId} cycleId={cycleId} />
+                    ))}
                  </CustomMenu>
                }
              />
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@ -13,7 +13,7 @@ import { CYCLE_VIEW_LAYOUTS } from "constants/cycle";
 import { EUserProjectRoles } from "constants/project";
 import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
-import { TCycleLayout } from "@plane/types";
+import { TCycleLayoutOptions } from "@plane/types";
 import { ProjectLogo } from "components/project";

 export const CyclesHeader: FC = observer(() => {
@ -33,10 +33,10 @@ export const CyclesHeader: FC = observer(() => {
  const canUserCreateCycle =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

-  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
+  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayoutOptions>("cycle_layout", "list");

  const handleCurrentLayout = useCallback(
-    (_layout: TCycleLayout) => {
+    (_layout: TCycleLayoutOptions) => {
      setCycleLayout(_layout);
    },
    [setCycleLayout]
@ -109,7 +109,7 @@ export const CyclesHeader: FC = observer(() => {
              key={layout.key}
              onClick={() => {
                // handleLayoutChange(ISSUE_LAYOUTS[index].key);
-                handleCurrentLayout(layout.key as TCycleLayout);
+                handleCurrentLayout(layout.key as TCycleLayoutOptions);
              }}
              className="flex items-center gap-2"
            >
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
 import { ArrowRight, PanelRight, Plus } from "lucide-react";
-import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@ -143,6 +143,12 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
  const canUserCreateIssue =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

+  const issueCount = moduleDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? moduleDetails.total_issues + moduleDetails.sub_issues
+      : moduleDetails.total_issues
+    : undefined;
+
  return (
    <>
      <ProjectAnalyticsModal
@ -198,15 +204,29 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                    label={
                      <>
                        <DiceIcon className="h-3 w-3" />
-                        <div className="w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
-                          {moduleDetails?.name && moduleDetails.name}
+                        <div className="flex items-center gap-2 w-auto max-w-[70px] sm:max-w-[200px] truncate">
+                          <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
+                          {issueCount && issueCount > 0 ? (
+                            <Tooltip
+                              tooltipContent={`There are ${issueCount} ${
+                                issueCount > 1 ? "issues" : "issue"
+                              } in this module`}
+                              position="bottom"
+                            >
+                              <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                                {issueCount}
+                              </span>
+                            </Tooltip>
+                          ) : null}
                        </div>
                      </>
                    }
                    className="ml-1.5 flex-shrink-0"
                    placement="bottom-start"
                  >
-                    {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
+                    {projectModuleIds?.map((moduleId) => (
+                      <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
+                    ))}
                  </CustomMenu>
                }
              />
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@ -5,7 +5,7 @@ import { ArrowLeft } from "lucide-react";
 // hooks
 // constants
 // ui
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@ -69,6 +69,12 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
    updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property);
  };

+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails.archived_issues + currentProjectDetails.archived_sub_issues
+      : currentProjectDetails.archived_issues
+    : undefined;
+
  return (
    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row 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 w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@ -82,7 +88,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
            <ArrowLeft fontSize={14} strokeWidth={2} />
          </button>
        </div>
-        <div>
+        <div className="flex items-center gap-2.5">
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
@ -111,6 +117,16 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
              }
            />
          </Breadcrumbs>
+          {issueCount && issueCount > 0 ? (
+            <Tooltip
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's archived`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
        </div>
      </div>

--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
 // components
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
@ -73,11 +73,18 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
    },
    [workspaceSlug, projectId, updateFilters]
  );
+
+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails.draft_issues + currentProjectDetails.draft_sub_issues
+      : currentProjectDetails.draft_issues
+    : undefined;
+
  return (
    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row 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 w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
        <SidebarHamburgerToggle />
-        <div>
+        <div className="flex items-center gap-2.5">
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
@ -103,6 +110,16 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
              }
            />
          </Breadcrumbs>
+          {issueCount && issueCount > 0 ? (
+            <Tooltip
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's draft`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
        </div>

        <div className="ml-auto flex items-center gap-2">
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
-import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@ -102,6 +102,12 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
  const canUserCreateIssue =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails?.total_issues + currentProjectDetails?.sub_issues
+      : currentProjectDetails?.total_issues
+    : undefined;
+
  return (
    <>
      <ProjectAnalyticsModal
@ -113,7 +119,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
        <div className="flex items-center gap-2 p-4 border-b border-custom-border-200 bg-custom-sidebar-background-100">
          <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
            <SidebarHamburgerToggle />
-            <div>
+            <div className="flex items-center gap-2.5">
              <Breadcrumbs onBack={() => router.back()}>
                <Breadcrumbs.BreadcrumbItem
                  type="text"
@ -145,6 +151,16 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                  }
                />
              </Breadcrumbs>
+              {issueCount && issueCount > 0 ? (
+                <Tooltip
+                  tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in this project`}
+                  position="bottom"
+                >
+                  <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                    {issueCount}
+                  </span>
+                </Tooltip>
+              ) : null}
            </div>
            {currentProjectDetails?.is_deployed && deployUrl && (
              <a
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@ -73,7 +73,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
    reset,
    watch,
    getValues,
-    setValue,
  } = useForm({ defaultValues });

  const handleClose = () => {
--- a/web/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@ -77,8 +77,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
            isEmptyFilters
              ? undefined
              : () => {
-                  setTrackElement("Cycle issue empty state");
-                  toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+                  setTrackElement("Module issue empty state");
+                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                }
          }
          secondaryButtonOnClick={isEmptyFilters ? handleClearAllFilters : () => setModuleIssuesListModal(true)}
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@ -55,14 +55,15 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
        const filterKey = key as keyof IIssueFilterOptions;

        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;

        return (
          <div
            key={filterKey}
            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
          >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-            <div className="flex flex-wrap items-center gap-1">
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
              {membersFilters.includes(filterKey) && (
                <AppliedMembersFilters
                  editable={isEditingAllowed}
--- 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
@ -68,7 +68,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
  if (Object.keys(appliedFilters).length === 0) return null;

  return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
      <AppliedFiltersList
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
--- 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
@ -77,7 +77,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
  if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId) return null;

  return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
      <AppliedFiltersList
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
@ -63,7 +63,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
  if (Object.keys(appliedFilters).length === 0) return null;

  return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
      <AppliedFiltersList
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
--- 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
@ -76,7 +76,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
  if (!workspaceSlug || !projectId || Object.keys(appliedFilters).length === 0) return null;

  return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
      <AppliedFiltersList
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
--- 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
@ -68,7 +68,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
  if (Object.keys(appliedFilters).length === 0) return null;

  return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
      <AppliedFiltersList
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
--- a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import sortBy from "lodash/sortBy";
 // components
 import { StateGroupIcon } from "@plane/ui";
 import { FilterHeader, FilterOption } from "components/issues";
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@ -9,6 +9,7 @@ import { Button } from "@plane/ui";

 type Props = {
  children: React.ReactNode;
+  icon?: React.ReactNode;
  title?: string;
  placement?: Placement;
  disabled?: boolean;
@ -17,7 +18,7 @@ type Props = {
 };

 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;
+  const { children, icon, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;

  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -44,6 +45,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                  ref={setReferenceElement}
                  variant="neutral-primary"
                  size="sm"
+                  prependIcon={icon}
                  appendIcon={
                    <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
                  }
@ -64,9 +66,9 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
              leaveFrom="opacity-100 translate-y-0"
              leaveTo="opacity-0 translate-y-1"
            >
-              <Popover.Panel>
+              <Popover.Panel className="fixed z-10">
                <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg my-1"
                  ref={setPopperElement}
                  style={styles.popper}
                  {...attributes.popper}
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@ -99,6 +99,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
        placement="bottom-start"
        customButton={customActionButton}
        portalElement={portalElement}
+        maxHeight="lg"
        closeOnSelect
        ellipsis
      >
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@ -60,6 +60,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
        placement="bottom-start"
        customButton={customActionButton}
        portalElement={portalElement}
+        maxHeight="lg"
        closeOnSelect
        ellipsis
      >
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@ -110,6 +110,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
        placement="bottom-start"
        customButton={customActionButton}
        portalElement={portalElement}
+        maxHeight="lg"
        closeOnSelect
        ellipsis
      >
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@ -109,6 +109,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
        placement="bottom-start"
        customButton={customActionButton}
        portalElement={portalElement}
+        maxHeight="lg"
        closeOnSelect
        ellipsis
      >
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@ -110,6 +110,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
        placement="bottom-start"
        customButton={customActionButton}
        portalElement={portalElement}
+        maxHeight="lg"
        closeOnSelect
        ellipsis
      >
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@ -467,7 +467,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                          }}
                          mentionHighlights={mentionHighlights}
                          mentionSuggestions={mentionSuggestions}
-                          // tabIndex={2}
+                          tabIndex={getTabIndex("description_html")}
                        />
                      )}
                    />
@ -703,6 +703,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                        setSelectedParentIssue(issue);
                      }}
                      projectId={projectId}
+                      issueId={data?.id}
                    />
                  )}
                />
--- a/Show More
+++ b/Show More