diff --git a/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index 870e9e5cd21..962d25e4b3f 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -60,14 +60,14 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           window.open(fileURL, "_blank");
         }}
       >
-        <div className="group flex h-11 items-center justify-between gap-3 pr-2 pl-9 hover:bg-surface-2">
+        <div className="group flex h-11 items-center justify-between gap-3 px-3 hover:bg-surface-2">
           <div className="flex items-center gap-3 truncate text-13">
             <div className="flex items-center gap-3">{fileIcon}</div>
             <Tooltip label={`${fileName}.${fileExtension}`} layout="stacked" disabled={isMobile}>
               <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
             </Tooltip>
             <span className="flex size-1.5 rounded-full bg-layer-1" />
-            <span className="flex-shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
+            <span className="shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
           </div>
 
           <div className="flex items-center gap-3">
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
index e1a94c7d79e..4a78463bbfa 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { IssueAttachmentsCollapsibleContent } from "./content";
 import { IssueAttachmentsCollapsibleTitle } from "./title";
+import { IssueAttachmentActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -33,19 +34,20 @@ export const AttachmentsCollapsible = observer(function AttachmentsCollapsible(p
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("attachments")}
-      title={
-        <IssueAttachmentsCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("attachments")}
+      trigger={<IssueAttachmentsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueAttachmentActionButton
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <IssueAttachmentsCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
index 28ce79670b7..4434bfed6b3 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -4,28 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-// local imports
-import { IssueAttachmentActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
-  workspaceSlug: string;
-  projectId: string;
   issueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmentsCollapsibleTitle(props: Props) {
-  const { isOpen, workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hooks
   const {
@@ -36,32 +29,12 @@ export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmen
   const issue = getIssueById(issueId);
   const attachmentCount = issue?.attachment_count ?? 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.attachments")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{attachmentCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{attachmentCount}</p>
       </span>
-    ),
-    [attachmentCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.attachments")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && (
-          <IssueAttachmentActionButton
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            disabled={disabled}
-            issueServiceType={issueServiceType}
-          />
-        )
-      }
-    />
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
index bd963868a2e..0f30f4e5287 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { IssueLinksCollapsibleContent } from "./content";
 import { IssueLinksCollapsibleTitle } from "./title";
+import { IssueLinksActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -32,17 +33,14 @@ export const LinksCollapsible = observer(function LinksCollapsible(props: Props)
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("links")}
-      title={
-        <IssueLinksCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("links")}
+      trigger={<IssueLinksCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <IssueLinksCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
index b9d1fa76360..5c499d50c88 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -4,26 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-// local imports
-import { IssueLinksActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
   issueId: string;
-  disabled: boolean;
   issueServiceType: TIssueServiceType;
 };
 
 export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibleTitle(props: Props) {
-  const { isOpen, issueId, disabled, issueServiceType } = props;
+  const { issueId, issueServiceType } = props;
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -36,24 +31,12 @@ export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibl
 
   const linksCount = issue?.link_count ?? 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.links")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{linksCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{linksCount}</p>
       </span>
-    ),
-    [linksCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.links")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
-      }
-    />
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index b552380d184..043750fd305 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -7,10 +7,11 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue, TIssueServiceType, TIssueRelationTypes } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 import { useTimeLineRelationOptions } from "@/components/relations";
@@ -137,24 +138,29 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
         {filteredRelationsArray.map((relation) => (
           <div key={relation.relationKey}>
             <Collapsible
-              buttonClassName="w-full"
-              title={
-                <div className={`flex h-9 w-full items-center gap-1 px-2.5 py-1 ${relation.className}`}>
-                  <span>{relation.icon ? relation.icon(14) : null}</span>
-                  <span className="text-13 leading-5 font-medium">{relation.label}</span>
-                </div>
-              }
               defaultOpen
+              icon={
+                relation.icon ? (
+                  <span className={cn("flex items-center justify-center rounded p-0.5", relation.className)}>
+                    {relation.icon(14)}
+                  </span>
+                ) : undefined
+              }
+              trigger={<span className="text-13 leading-5 font-medium">{relation.label}</span>}
             >
-              <RelationIssueList
-                workspaceSlug={workspaceSlug}
-                issueId={issueId}
-                relationKey={relation.relationKey}
-                issueIds={relation.issueIds}
-                disabled={disabled}
-                handleIssueCrudState={handleIssueCrudState}
-                issueServiceType={issueServiceType}
-              />
+              {/* Cancels this nested Collapsible's own panel inset so rows realign under
+                  the outer Relations collapsible's single inset instead of stacking two. */}
+              <div className="-mx-3">
+                <RelationIssueList
+                  workspaceSlug={workspaceSlug}
+                  issueId={issueId}
+                  relationKey={relation.relationKey}
+                  issueIds={relation.issueIds}
+                  disabled={disabled}
+                  handleIssueCrudState={handleIssueCrudState}
+                  issueServiceType={issueServiceType}
+                />
+              </div>
             </Collapsible>
           </div>
         ))}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
index d1b5d80880d..b18d72c1aa0 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { RelationsCollapsibleContent } from "./content";
 import { RelationsCollapsibleTitle } from "./title";
+import { RelationActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -31,17 +32,14 @@ export const RelationsCollapsible = observer(function RelationsCollapsible(props
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("relations")}
-      title={
-        <RelationsCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("relations")}
+      trigger={<RelationsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <RelationsCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
index 75e8084958f..cfb94686ad1 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -4,28 +4,23 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { useTimeLineRelationOptions } from "@/components/relations";
-// local imports
-import { RelationActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
   issueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleTitle(props: Props) {
-  const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hook
   const {
@@ -36,24 +31,12 @@ export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleT
   // derived values
   const relationsCount = getRelationCountByIssueId(issueId, ISSUE_RELATION_OPTIONS);
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.relations")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{relationsCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{relationsCount}</p>
       </span>
-    ),
-    [relationsCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.relations")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
-      }
-    />
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index 65cd542e658..f6ea11ac99f 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -7,12 +7,10 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { CircleDashed } from "lucide-react";
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { ALL_ISSUES } from "@plane/constants";
-import { ChevronRightOutline } from "@makeplane/propel/icons";
 import type { IGroupByColumn, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
-import { cn } from "@plane/utils";
 import { SubIssuesListItem } from "./list-item";
 
 interface TSubIssuesListGroupProps {
@@ -57,46 +55,45 @@ export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TS
 
   if (!workItemIds.length) return null;
 
+  const items = workItemIds.map((workItemId) => (
+    <SubIssuesListItem
+      key={workItemId}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      parentIssueId={parentIssueId}
+      rootIssueId={rootIssueId}
+      issueId={workItemId}
+      canEdit={canEdit}
+      handleIssueCrudState={handleIssueCrudState}
+      subIssueOperations={subIssueOperations}
+      issueServiceType={serviceType}
+      spacingLeft={spacingLeft}
+      storeType={storeType}
+    />
+  ));
+
+  if (isAllIssues) return <>{items}</>;
+
   return (
-    <>
-      <Collapsible
-        isOpen={isCollapsibleOpen}
-        onToggle={() => setIsCollapsibleOpen(!isCollapsibleOpen)}
-        title={
-          !isAllIssues && (
-            <div className="flex items-center gap-2 p-3">
-              <ChevronRightOutline
-                className={cn("size-3.5 text-placeholder transition-all", {
-                  "rotate-90": isCollapsibleOpen,
-                })}
-              />
-              <div className="grid flex-shrink-0 place-items-center overflow-hidden">
-                {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
-              </div>
-              <span className="text-13 font-medium text-primary">{group.name}</span>
-              <span className="text-13 text-placeholder">{workItemIds.length}</span>
-            </div>
-          )
-        }
-        buttonClassName={cn("hidden", !isAllIssues && "block")}
-      >
-        {workItemIds?.map((workItemId) => (
-          <SubIssuesListItem
-            key={workItemId}
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            parentIssueId={parentIssueId}
-            rootIssueId={rootIssueId}
-            issueId={workItemId}
-            canEdit={canEdit}
-            handleIssueCrudState={handleIssueCrudState}
-            subIssueOperations={subIssueOperations}
-            issueServiceType={serviceType}
-            spacingLeft={spacingLeft}
-            storeType={storeType}
-          />
-        ))}
-      </Collapsible>
-    </>
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={setIsCollapsibleOpen}
+      icon={
+        <div className="grid shrink-0 place-items-center overflow-hidden">
+          {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+      }
+      trigger={
+        <>
+          <span className="text-13 font-medium text-primary">{group.name}</span>
+          <span className="text-13 text-placeholder">{workItemIds.length}</span>
+        </>
+      }
+    >
+      {/* Cancels this nested Collapsible's own panel inset — the outer sub-work-items
+          Collapsible (root.tsx) already contributes one; without this, grouped rows
+          would sit inset twice. */}
+      <div className="-mx-3">{items}</div>
+    </Collapsible>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
index 4bc8c79690c..eac612e8d87 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { SubIssuesCollapsibleContent } from "./content";
 import { SubIssuesCollapsibleTitle } from "./title";
+import { SubWorkItemTitleActions } from "./title-actions";
 
 type Props = {
   workspaceSlug: string;
@@ -32,18 +33,19 @@ export const SubIssuesCollapsible = observer(function SubIssuesCollapsible(props
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("sub-work-items")}
-      title={
-        <SubIssuesCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          parentIssueId={issueId}
-          disabled={disabled}
-          projectId={projectId}
-          workspaceSlug={workspaceSlug}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("sub-work-items")}
+      trigger={<SubIssuesCollapsibleTitle parentIssueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen ? (
+          <SubWorkItemTitleActions
+            projectId={projectId}
+            parentId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <SubIssuesCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
index 8fd205b5f9d..a81a3b41183 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -10,22 +10,16 @@ import { CircularProgress } from "@makeplane/propel/components/circular-progress
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-import { SubWorkItemTitleActions } from "./title-actions";
 
 type Props = {
-  isOpen: boolean;
   parentIssueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
-  projectId: string;
-  workspaceSlug: string;
 };
 
 export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleTitle(props: Props) {
-  const { isOpen, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES, projectId } = props;
+  const { parentIssueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -44,30 +38,19 @@ export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleT
   const percentage = completedCount && totalCount ? (completedCount / totalCount) * 100 : 0;
 
   return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={`${issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}`}
-      indicatorElement={
-        <div className="flex items-center gap-1.5 text-13 text-tertiary">
-          <CircularProgress
-            value={percentage}
-            size="md"
-            variant={percentage === 100 ? "success" : "brand"}
-            aria-label="Sub-work-item progress"
-          />
-          <span>
-            {completedCount}/{totalCount} {t("common.done")}
-          </span>
-        </div>
-      }
-      actionItemElement={
-        <SubWorkItemTitleActions
-          projectId={projectId}
-          parentId={parentIssueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
+    <span className="inline-flex items-center gap-2">
+      {issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}
+      <span className="flex items-center gap-1.5 text-13 text-tertiary">
+        <CircularProgress
+          value={percentage}
+          size="md"
+          variant={percentage === 100 ? "success" : "brand"}
+          aria-label="Sub-work-item progress"
         />
-      }
-    />
+        <span>
+          {completedCount}/{totalCount} {t("common.done")}
+        </span>
+      </span>
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail/links/link-list.tsx b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
index e691ecba381..937f7e3bd5f 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-list.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -35,7 +35,7 @@ export const LinkList = observer(function LinkList(props: TLinkList) {
   if (!issueLinks) return null;
 
   return (
-    <div className="flex flex-col gap-2 pt-4">
+    <div className="flex flex-col gap-2">
       {issueLinks.map((linkId) => (
         <IssueLinkItem
           key={linkId}
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index 17067760d7b..99c75a9ce98 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -8,11 +8,9 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { Disclosure } from "@headlessui/react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { useTranslation } from "@plane/i18n";
-import { ChevronDownOutline } from "@makeplane/propel/icons";
-import { Collapsible } from "@plane/ui";
 // components
 import { CountChip } from "@/components/common/count-chip";
 import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
@@ -79,31 +77,24 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
         )}
       </div>
       {isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
-        <Collapsible
-          isOpen={showPendingInvites}
-          onToggle={() => setShowPendingInvites((prev) => !prev)}
-          buttonClassName="w-full"
-          className=""
-          title={
-            <div className="flex w-full items-center justify-between pt-4">
-              <div className="flex">
-                <h4 className="pt-2 pb-2 text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</h4>
-                {searchedInvitationsIds && (
-                  <CountChip count={searchedInvitationsIds.length} className="m-auto ml-2 h-5" />
-                )}
-              </div>{" "}
-              <ChevronDownOutline className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
-            </div>
-          }
-        >
-          <Disclosure.Panel>
+        <div className="pt-4">
+          <Collapsible
+            open={showPendingInvites}
+            onOpenChange={setShowPendingInvites}
+            trigger={
+              <span className="inline-flex items-center gap-2 py-2">
+                <span className="text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</span>
+                {searchedInvitationsIds && <CountChip count={searchedInvitationsIds.length} className="h-5" />}
+              </span>
+            }
+          >
             <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
               {searchedInvitationsIds?.map((invitationId) => (
                 <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
               ))}
             </div>
-          </Disclosure.Panel>
-        </Collapsible>
+          </Collapsible>
+        </div>
       )}
     </>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7e8251a913..c1091fa51f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -876,7 +876,7 @@ importers:
         version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@makeplane/propel':
         specifier: 'catalog:'
-        version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants