diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index 5e14ba432..c4c9a780a 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -43,7 +43,7 @@ export const IssueMainContent: React.FC<Props> = ({
   uneditable = false,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
         <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
 
         <div className="mt-2 space-y-2">
-          <SubIssuesRoot parentIssue={issueDetails} user={user} editable={uneditable} />
+          <SubIssuesRoot parentIssue={issueDetails} user={user} />
         </div>
       </div>
       <div className="flex flex-col gap-3 py-3">
diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
index 2e3d8acdb..2adb7c6f9 100644
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -16,9 +16,9 @@ import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
 import { Tooltip, CustomMenu } from "components/ui";
-
 // types
 import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
 
 export interface ISubIssues {
   workspaceSlug: string;
@@ -29,8 +29,8 @@ export interface ISubIssues {
   user: ICurrentUserResponse | undefined;
   editable: boolean;
   removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
-  issuesVisibility: string[];
-  handleIssuesVisibility: (issueId: string) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
   copyText: (text: string) => void;
   handleIssueCrudOperation: (
     key: "create" | "existing" | "edit" | "delete",
@@ -48,8 +48,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
   user,
   editable,
   removeIssueFromSubIssues,
-  issuesVisibility,
-  handleIssuesVisibility,
+  issuesLoader,
+  handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
 }) => (
@@ -62,19 +62,21 @@ export const SubIssues: React.FC<ISubIssues> = ({
         <div className="flex-shrink-0 w-[22px] h-[22px]">
           {issue?.sub_issues_count > 0 && (
             <>
-              {true ? (
+              {issuesLoader.sub_issues.includes(issue?.id) ? (
+                <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+                </div>
+              ) : (
                 <div
                   className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
-                  onClick={() => handleIssuesVisibility(issue?.id)}
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
                 >
-                  {issuesVisibility && issuesVisibility.includes(issue?.id) ? (
+                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
                     <ChevronDown width={14} strokeWidth={2} />
                   ) : (
                     <ChevronRight width={14} strokeWidth={2} />
                   )}
                 </div>
-              ) : (
-                <Loader width={14} strokeWidth={2} className="animate-spin" />
               )}
             </>
           )}
@@ -92,7 +94,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
               {issue.project_detail.identifier}-{issue?.sequence_id}
             </div>
             <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
-              <div className="line-clamp-1 text-xs text-custom-text-100">{issue?.name}</div>
+              <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
             </Tooltip>
           </a>
         </Link>
@@ -132,7 +134,11 @@ export const SubIssues: React.FC<ISubIssues> = ({
               </CustomMenu.MenuItem>
             )}
 
-            <CustomMenu.MenuItem onClick={copyText}>
+            <CustomMenu.MenuItem
+              onClick={() =>
+                copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
+              }
+            >
               <div className="flex items-center justify-start gap-2">
                 <LinkIcon width={14} strokeWidth={2} />
                 <span>Copy issue link</span>
@@ -142,17 +148,28 @@ export const SubIssues: React.FC<ISubIssues> = ({
         </div>
 
         {editable && (
-          <div
-            className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden"
-            onClick={() => removeIssueFromSubIssues(parentIssue?.id, issue)}
-          >
-            <X width={14} strokeWidth={2} />
-          </div>
+          <>
+            {issuesLoader.delete.includes(issue?.id) ? (
+              <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
+                <Loader width={14} strokeWidth={2} className="animate-spin" />
+              </div>
+            ) : (
+              <div
+                className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
+                onClick={() => {
+                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+                  removeIssueFromSubIssues(parentIssue?.id, issue);
+                }}
+              >
+                <X width={14} strokeWidth={2} />
+              </div>
+            )}
+          </>
         )}
       </div>
     )}
 
-    {issuesVisibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
+    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
       <SubIssuesRootList
         workspaceSlug={workspaceSlug}
         projectId={projectId}
@@ -161,8 +178,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
         user={user}
         editable={editable}
         removeIssueFromSubIssues={removeIssueFromSubIssues}
-        issuesVisibility={issuesVisibility}
-        handleIssuesVisibility={handleIssuesVisibility}
+        issuesLoader={issuesLoader}
+        handleIssuesLoader={handleIssuesLoader}
         copyText={copyText}
         handleIssueCrudOperation={handleIssueCrudOperation}
       />
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
index 45c0b1882..9fc77992e 100644
--- a/web/components/issues/sub-issues/issues-list.tsx
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 import { SubIssues } from "./issue";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
 // services
 import issuesService from "services/issues.service";
 // fetch keys
@@ -18,8 +19,8 @@ export interface ISubIssuesRootList {
   user: ICurrentUserResponse | undefined;
   editable: boolean;
   removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
-  issuesVisibility: string[];
-  handleIssuesVisibility: (issueId: string) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
   copyText: (text: string) => void;
   handleIssueCrudOperation: (
     key: "create" | "existing" | "edit" | "delete",
@@ -36,8 +37,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   user,
   editable,
   removeIssueFromSubIssues,
-  issuesVisibility,
-  handleIssuesVisibility,
+  issuesLoader,
+  handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
 }) => {
@@ -50,6 +51,16 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
       : null
   );
 
+  React.useEffect(() => {
+    if (isLoading) {
+      handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+    } else {
+      if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
+        handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+      }
+    }
+  }, [isLoading]);
+
   return (
     <div className="relative">
       {issues &&
@@ -66,8 +77,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
             user={user}
             editable={editable}
             removeIssueFromSubIssues={removeIssueFromSubIssues}
-            issuesVisibility={issuesVisibility}
-            handleIssuesVisibility={handleIssuesVisibility}
+            issuesLoader={issuesLoader}
+            handleIssuesLoader={handleIssuesLoader}
             copyText={copyText}
             handleIssueCrudOperation={handleIssueCrudOperation}
           />
diff --git a/web/components/issues/sub-issues/progressbar.tsx b/web/components/issues/sub-issues/progressbar.tsx
index 368078a3d..dee91263b 100644
--- a/web/components/issues/sub-issues/progressbar.tsx
+++ b/web/components/issues/sub-issues/progressbar.tsx
@@ -14,7 +14,7 @@ export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
       <div className="w-full">
         <div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
           <div
-            className="bg-green-500 h-[6px] rounded-full"
+            className="bg-green-500 h-[6px] rounded-full transition-all"
             style={{ width: `${calPercentage(done, total)}%` }}
           />
         </div>
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
index a899efdcf..4f2dca43b 100644
--- a/web/components/issues/sub-issues/properties.tsx
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -86,12 +86,14 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
   };
 
   const handleAssigneeChange = (data: any) => {
-    const newData = issue.assignees ?? [];
+    let newData = issue.assignees ?? [];
 
-    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-    else newData.push(data);
+    if (newData && newData.length > 0) {
+      if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
+      else newData = [...newData, data];
+    } else newData = [...newData, data];
 
-    partialUpdateIssue({ assignees_list: data });
+    partialUpdateIssue({ assignees_list: data, assignees: data });
 
     trackEventServices.trackIssuePartialPropertyUpdateEvent(
       {
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 75161e639..305a9150b 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -14,6 +14,7 @@ import { ProgressBar } from "./progressbar";
 import { CustomMenu } from "components/ui";
 // hooks
 import { useProjectMyMembership } from "contexts/project-member.context";
+import useToast from "hooks/use-toast";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -25,18 +26,27 @@ import { SUB_ISSUES } from "constants/fetch-keys";
 
 export interface ISubIssuesRoot {
   parentIssue: IIssue;
-
   user: ICurrentUserResponse | undefined;
-  editable: boolean;
 }
 
-export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, editable }) => {
+export interface ISubIssuesRootLoaders {
+  visibility: string[];
+  delete: string[];
+  sub_issues: string[];
+}
+export interface ISubIssuesRootLoadersHandler {
+  key: "visibility" | "delete" | "sub_issues";
+  issueId: string;
+}
+
+export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
   const { memberRole } = useProjectMyMembership();
+  const { setToastAlert } = useToast();
 
-  const { data: issues } = useSWR(
+  const { data: issues, isLoading } = useSWR(
     workspaceSlug && projectId && parentIssue && parentIssue?.id
       ? SUB_ISSUES(parentIssue?.id)
       : null,
@@ -45,13 +55,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
       : null
   );
 
-  const [issuesVisibility, setIssuesVisibility] = React.useState<string[]>([parentIssue?.id]);
-  const handleIssuesVisibility = (issueId: string) => {
-    if (issuesVisibility.includes(issueId)) {
-      setIssuesVisibility(issuesVisibility.filter((i: string) => i !== issueId));
-    } else {
-      setIssuesVisibility([...issuesVisibility, issueId]);
-    }
+  const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
+    visibility: [parentIssue?.id],
+    delete: [],
+    sub_issues: [],
+  });
+  const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
+    setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
+      ...previousData,
+      [key]: previousData[key].includes(issueId)
+        ? previousData[key].filter((i: string) => i !== issueId)
+        : [...previousData[key], issueId],
+    }));
   };
 
   const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
@@ -100,7 +115,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
     const payload = {
       sub_issue_ids: data.map((i) => i.id),
     };
-
     await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
       if (issueId) mutate(SUB_ISSUES(issueId));
     });
@@ -110,8 +124,22 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
     if (!workspaceSlug || !parentIssue || !issue?.id) return;
     issuesService
       .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
-      .finally(() => {
-        if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
+      .then(async () => {
+        if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "success",
+          title: `Issue removed!`,
+          message: `Issue removed successfully.`,
+        });
+      })
+      .catch(() => {
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "warning",
+          title: `Error!`,
+          message: `Error, Please try again later.`,
+        });
       });
   };
 
@@ -119,11 +147,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${text}`).then(() => {
-      // setToastAlert({
-      //   type: "success",
-      //   title: "Link Copied!",
-      //   message: "Issue link copied to clipboard.",
-      // });
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
     });
   };
 
@@ -135,148 +163,165 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
 
   return (
     <div className="w-full h-full space-y-2">
-      {parentIssue && parentIssue?.sub_issues_count > 0 ? (
+      {!issues && isLoading ? (
+        <div className="py-3 text-center text-sm  text-custom-text-300 font-medium">Loading...</div>
+      ) : (
         <>
-          {/* header */}
-          <div className="relative flex items-center gap-4 text-xs">
-            <div
-              className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
-              onClick={() => handleIssuesVisibility(parentIssue?.id)}
-            >
-              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                {issuesVisibility.includes(parentIssue?.id) ? (
-                  <ChevronDown width={16} strokeWidth={2} />
-                ) : (
-                  <ChevronRight width={14} strokeWidth={2} />
+          {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
+            <>
+              {/* header */}
+              <div className="relative flex items-center gap-4 text-xs">
+                <div
+                  className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
+                  onClick={() =>
+                    handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
+                  }
+                >
+                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                    {issuesLoader.visibility.includes(parentIssue?.id) ? (
+                      <ChevronDown width={16} strokeWidth={2} />
+                    ) : (
+                      <ChevronRight width={14} strokeWidth={2} />
+                    )}
+                  </div>
+                  <div>Sub-issues</div>
+                  <div>({issues?.sub_issues?.length || 0})</div>
+                </div>
+
+                <div className="w-full max-w-[250px] select-none">
+                  <ProgressBar
+                    total={issues?.sub_issues?.length || 0}
+                    done={
+                      (issues?.state_distribution?.cancelled || 0) +
+                      (issues?.state_distribution?.completed || 0)
+                    }
+                  />
+                </div>
+
+                {isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
+                  <div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
+                    >
+                      Add sub-issue
+                    </div>
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
+                    >
+                      Add an existing issue
+                    </div>
+                  </div>
                 )}
               </div>
-              <div>Sub-issues</div>
-              <div>({parentIssue?.sub_issues_count})</div>
-            </div>
 
-            <div className="w-full max-w-[250px] select-none">
-              <ProgressBar
-                total={parentIssue?.sub_issues_count}
-                done={
-                  (issues?.state_distribution?.cancelled || 0) +
-                  (issues?.state_distribution?.completed || 0)
-                }
-              />
-            </div>
-
-            {isEditable && issuesVisibility.includes(parentIssue?.id) && (
-              <div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
-                <div
-                  className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
-                  onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
-                >
-                  Add sub-issue
+              {/* issues */}
+              {issuesLoader.visibility.includes(parentIssue?.id) && (
+                <div className="border border-b-0 border-custom-border-100">
+                  <SubIssuesRootList
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    parentIssue={parentIssue}
+                    user={undefined}
+                    editable={isEditable}
+                    removeIssueFromSubIssues={removeIssueFromSubIssues}
+                    issuesLoader={issuesLoader}
+                    handleIssuesLoader={handleIssuesLoader}
+                    copyText={copyText}
+                    handleIssueCrudOperation={handleIssueCrudOperation}
+                  />
                 </div>
-                <div
-                  className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
-                  onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
-                >
-                  Add an existing issue
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* issues */}
-          {issuesVisibility.includes(parentIssue?.id) && (
-            <div className="border border-b-0 border-custom-border-100">
-              <SubIssuesRootList
-                workspaceSlug={workspaceSlug}
-                projectId={projectId}
-                parentIssue={parentIssue}
-                user={undefined}
-                editable={isEditable}
-                removeIssueFromSubIssues={removeIssueFromSubIssues}
-                issuesVisibility={issuesVisibility}
-                handleIssuesVisibility={handleIssuesVisibility}
-                copyText={copyText}
-                handleIssueCrudOperation={handleIssueCrudOperation}
-              />
-            </div>
-          )}
-        </>
-      ) : (
-        isEditable && (
-          <div className="text-xs py-2 text-custom-text-300 font-medium">
-            <div className="py-3 text-center">No sub issues are available</div>
-            <>
-              <CustomMenu
-                label={
-                  <>
-                    <Plus className="h-3 w-3" />
-                    Add sub-issue
-                  </>
-                }
-                buttonClassName="whitespace-nowrap"
-                position="left"
-                noBorder
-                noChevron
-              >
-                <CustomMenu.MenuItem
-                  onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
-                >
-                  Create new
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem
-                  onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
-                >
-                  Add an existing issue
-                </CustomMenu.MenuItem>
-              </CustomMenu>
+              )}
             </>
-          </div>
-        )
-      )}
-
-      {isEditable && issueCrudOperation?.create?.toggle && (
-        <CreateUpdateIssueModal
-          isOpen={issueCrudOperation?.create?.toggle}
-          prePopulateData={{
-            parent: issueCrudOperation?.create?.issueId,
-          }}
-          handleClose={() => handleIssueCrudOperation("create", null)}
-        />
-      )}
-
-      {isEditable &&
-        issueCrudOperation?.existing?.toggle &&
-        issueCrudOperation?.existing?.issueId && (
-          <ExistingIssuesListModal
-            isOpen={issueCrudOperation?.existing?.toggle}
-            handleClose={() => handleIssueCrudOperation("existing", null)}
-            searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
-            handleOnSubmit={addAsSubIssueFromExistingIssues}
-            workspaceLevelToggle
-          />
-        )}
-
-      {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
-        <CreateUpdateIssueModal
-          isOpen={issueCrudOperation?.edit?.toggle}
-          handleClose={() => {
-            mutateSubIssues(issueCrudOperation?.edit?.issueId);
-            handleIssueCrudOperation("edit", null, null);
-          }}
-          data={issueCrudOperation?.edit?.issue}
-        />
-      )}
-
-      {isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && (
-        <DeleteIssueModal
-          isOpen={issueCrudOperation?.delete?.toggle}
-          handleClose={() => {
-            mutateSubIssues(issueCrudOperation?.delete?.issueId);
-            handleIssueCrudOperation("delete", null, null);
-          }}
-          data={issueCrudOperation?.delete?.issue}
-          user={user}
-          redirection={false}
-        />
+          ) : (
+            isEditable && (
+              <div className="text-xs py-2 text-custom-text-300 font-medium">
+                <div className="py-3 text-center">No sub issues are available</div>
+                <>
+                  <CustomMenu
+                    label={
+                      <>
+                        <Plus className="h-3 w-3" />
+                        Add sub-issue
+                      </>
+                    }
+                    buttonClassName="whitespace-nowrap"
+                    position="left"
+                    noBorder
+                    noChevron
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("create", parentIssue?.id);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("existing", parentIssue?.id);
+                      }}
+                    >
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </>
+              </div>
+            )
+          )}
+          {isEditable && issueCrudOperation?.create?.toggle && (
+            <CreateUpdateIssueModal
+              isOpen={issueCrudOperation?.create?.toggle}
+              prePopulateData={{
+                parent: issueCrudOperation?.create?.issueId,
+              }}
+              handleClose={() => {
+                mutateSubIssues(issueCrudOperation?.create?.issueId);
+                handleIssueCrudOperation("create", null);
+              }}
+            />
+          )}
+          {isEditable &&
+            issueCrudOperation?.existing?.toggle &&
+            issueCrudOperation?.existing?.issueId && (
+              <ExistingIssuesListModal
+                isOpen={issueCrudOperation?.existing?.toggle}
+                handleClose={() => handleIssueCrudOperation("existing", null)}
+                searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
+                handleOnSubmit={addAsSubIssueFromExistingIssues}
+                workspaceLevelToggle
+              />
+            )}
+          {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
+            <>
+              <CreateUpdateIssueModal
+                isOpen={issueCrudOperation?.edit?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.edit?.issueId);
+                  handleIssueCrudOperation("edit", null, null);
+                }}
+                data={issueCrudOperation?.edit?.issue}
+              />
+            </>
+          )}
+          {isEditable &&
+            issueCrudOperation?.delete?.toggle &&
+            issueCrudOperation?.delete?.issueId && (
+              <DeleteIssueModal
+                isOpen={issueCrudOperation?.delete?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.delete?.issueId);
+                  handleIssueCrudOperation("delete", null, null);
+                }}
+                data={issueCrudOperation?.delete?.issue}
+                user={user}
+                redirection={false}
+              />
+            )}
+        </>
       )}
     </div>
   );