diff --git a/HDESIGN-CODE.md b/HDESIGN-CODE.md
index 368a29d..ff9128a 100644
--- a/HDESIGN-CODE.md
+++ b/HDESIGN-CODE.md
@@ -99,6 +99,42 @@
   - жёсткие border-outline
   - светлый фон, если основной экран тёмный
 - Search shell внутри popup должен использовать тот же стиль, что и сам popup.
+- Filled CTA внутри popup и модалок подчиняются тому же правилу:
+  - светлый акцентный фон
+  - тёмный/чёрный текст
+  - hover только в более светлый тон того же цвета
+
+### Portal правило
+- Если selector/dropdown открывается внутри:
+  - scroll-контейнера
+  - detail-pane
+  - карточки
+  - properties section
+  - sidebar
+  - sticky header
+  он не должен рендериться inline.
+- Такой popup обязан рендериться на верхнем слое через `portal` (`document.body` или эквивалент).
+- Inline popup в ограниченном контейнере считается дефектом, потому что даёт:
+  - клиппинг
+  - налезание на соседние блоки
+  - старую “врезанную” верстку
+
+### Portal anchor snippet
+```tsx
+{isOpen &&
+  typeof document !== "undefined" &&
+  createPortal(
+    <Combobox.Options className="fixed z-[420]" static>
+      <div
+        data-prevent-outside-click
+        className="nodedc-dropdown-surface nodedc-external-popup-anchor"
+      >
+        ...
+      </div>
+    </Combobox.Options>,
+    document.body
+  )}
+```
 
 ### Reusable классы
 - Accent CTA:
@@ -167,9 +203,9 @@
 ## Drag and drop
 - Drag overlay использует акцентный контур.
 - Delete dropzone:
-  - без красного технического свечения
+  - без красного технического свечения и без red-tinted text/fill
   - текст локализован
-  - акцентный outline допустим
+  - акцентный outline обязателен
 
 ## Тексты
 - Пользовательский UI на русском, если экран русифицирован.
@@ -183,3 +219,71 @@
 - Если блок визуально расходится со стилем системы, не добавлять поверх временную wrapper-заплатку. Нужно либо перевести блок на shared-компонент, либо переверстать локальную структуру под shared-классы.
 - Для экранов со вкладками/переключателями нельзя оставлять flash старой верстки. Перед refetch нужно очищать stale store-data и показывать loading shell.
 - Если карточки или списки разных модулей должны быть одинаковыми по канону, нельзя лечить это внешней обёрткой. Нужно менять сам внутренний layout item-компонента.
+- Для `Внешних контуров` это значит:
+  - список карточек правится на уровне `list-item.tsx`, а не через внешний wrapper
+  - gap между карточками должен совпадать с каноном `Внутреннего контура`
+  - актуальный gap списка на текущем каноне: `space-y-2`
+  - toolbar-навигация и inline actions не должны использовать старые квадратные `IconButton` остатки
+  - свойства `Приоритет / Метки / Статус` не должны рисовать внутренние boxed-chip артефакты
+  - filled CTA вроде `Добавить запрос` используют `nodedc-external-primary-button` и всегда имеют тёмный текст
+  - filled CTA используют чёрный/почти-чёрный текст всегда; белый текст на светлом акценте запрещён
+  - secondary meta-иконки в карточке списка не должны иметь отдельную серую подложку, если по канону это простой inline icon
+- popup выбора `Приоритет / Метки` внутри detail view не рендерится inline в property-row; он обязан уходить в `portal`
+- секции с dropdown-trigger внутри blur/glass shell обязаны иметь `overflow: visible` и `isolation: isolate`, иначе popup визуально “тонет” внутри блока
+- при переключении `Открытые / Закрытые` store обязан очистить stale request list до нового fetch, чтобы пользователь не видел flash старой верстки
+- карточка списка `Внешних контуров` правится на уровне `list-item.tsx`, а не внешней обёрткой:
+  - верхняя и нижняя оси собираются как у карточки `Внутреннего контура`
+  - gap между карточками совпадает с каноном `Внутреннего контура`
+- empty-state иконки без декоративной подложки; если иконка визуально “плывёт”, корректируется сам SVG/media-box
+
+### Внешние контуры: code anchors
+- Header CTA:
+```tsx
+<Button className="nodedc-external-primary-button">...</Button>
+```
+
+- List spacing:
+```tsx
+<div key={routeTab} className="space-y-2">
+  {filteredRequestIds.map((requestId) => (
+    <ExternalContoursListItem key={requestId} ... />
+  ))}
+</div>
+```
+
+- Property control:
+```tsx
+<div className="nodedc-external-property-control text-[13px] font-medium">
+  <SomeIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+  <span className="text-primary">...</span>
+</div>
+```
+
+- Root tab switch without stale flash:
+```tsx
+void handleCurrentTab(workspaceSlug, projectId, nextTab);
+router.push(`...currentTab=${nextTab}`);
+```
+
+- Store-side tab reset:
+```ts
+this.requestIds = [];
+this.requests = {};
+this.loader = "init-loading";
+this.currentTab = tab;
+```
+
+- Portal popup с фиксированной стратегией:
+```tsx
+const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  strategy: "fixed",
+  placement: placement ?? "bottom-start",
+});
+```
+
+- Контейнер секции с trigger:
+```tsx
+<div className="nodedc-external-section overflow-visible px-4 py-4">
+  ...
+</div>
+```
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx b/plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx
index 5419286..a005200 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Layers3 } from "lucide-react";
+import { Inbox } from "lucide-react";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -19,7 +19,7 @@ export const ExternalContoursEmptyState = (props: Props) => {
   return (
     <div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
       <div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
-        <Layers3 className={cn(compact ? "size-10" : "size-11")} strokeWidth={1.6} />
+        <Inbox className={cn("block shrink-0", compact ? "size-9" : "size-10")} strokeWidth={1.6} />
       </div>
       <div className="space-y-2">
         <h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/header.tsx b/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
index cf49ca1..bd3ee61 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
@@ -73,7 +73,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
               variant="primary"
               size="lg"
               onClick={() => setCreateIssueModal(true)}
-              className="nodedc-external-primary-button min-w-[10.75rem]"
+              className="nodedc-external-primary-button min-w-[13rem]"
             >
               {t("external_contours_page.header.add_request")}
             </Button>
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
index 5868ee0..322f484 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
@@ -9,7 +9,6 @@ import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { IconButton } from "@plane/propel/icon-button";
 import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
@@ -147,24 +146,24 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-x-2">
-            <IconButton
-              variant="secondary"
-              size="lg"
-              icon={ChevronUpIcon}
+        <div className="nodedc-external-detail-toolbar">
+          <div className="nodedc-external-toolbar-cluster">
+            <button
+              type="button"
               aria-label="Previous request"
               onClick={() => redirectToRelativeIssue("prev")}
               className="nodedc-external-icon-button"
-            />
-            <IconButton
-              variant="secondary"
-              size="lg"
-              icon={ChevronDownIcon}
+            >
+              <ChevronUpIcon className="size-3.5" />
+            </button>
+            <button
+              type="button"
               aria-label="Next request"
               onClick={() => redirectToRelativeIssue("next")}
               className="nodedc-external-icon-button"
-            />
+            >
+              <ChevronDownIcon className="size-3.5" />
+            </button>
           </div>
 
           <div className="flex flex-wrap items-center gap-2">
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
index 0e904de..2cfa98c 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { SignalHigh } from "lucide-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { LabelPropertyIcon, PriorityPropertyIcon } from "@plane/propel/icons";
+import { LabelPropertyIcon, PriorityIcon, PriorityPropertyIcon } from "@plane/propel/icons";
 import type { TIssue } from "@plane/types";
 import { PriorityDropdown } from "@/components/dropdowns/priority";
 import { IssueLabelSelect } from "@/components/issues/select";
@@ -34,7 +34,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
 
   return (
     <div className="flex w-full flex-col">
-      <div className="w-full overflow-y-auto">
+      <div className="w-full overflow-visible">
         <h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
         <div className={`${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
@@ -48,12 +48,12 @@ export const ExternalContoursIssueContentProperties = observer(function External
                 onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
                 disabled={!isEditable}
                 buttonVariant="transparent-without-text"
-                className="flex-1"
-                buttonContainerClassName="h-full w-full"
+                className="flex-1 overflow-visible"
+                buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
                 button={
                   <div className="nodedc-external-property-control text-[13px] font-medium">
                     {issue.priority && issue.priority !== "none" ? (
-                      <PriorityPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                      <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5 flex-shrink-0" />
                     ) : (
                       <SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
                     )}
@@ -72,14 +72,14 @@ export const ExternalContoursIssueContentProperties = observer(function External
                 <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("labels")}</span>
               </div>
-              <div className="h-full min-h-8 flex-1">
+              <div className="h-full min-h-8 flex-1 overflow-visible">
                 <IssueLabelSelect
                   value={issue.label_ids || []}
                   onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
                   projectId={targetProjectId}
                   disabled={!isEditable}
-                  rootClassName="w-full"
-                  buttonContainerClassName="h-full w-full"
+                  rootClassName="w-full overflow-visible"
+                  buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
                   label={
                     <div className="nodedc-external-property-control text-[13px] font-medium">
                       <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
index b3e1ab0..7b70baa 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
@@ -332,11 +332,11 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
 
       <ExternalContoursRequestTraceability contourRequest={contourRequest} />
 
-      <div className="nodedc-external-section px-4 py-4">
+      <div className="nodedc-external-section overflow-visible px-4 py-4">
         <IssueAttachmentRoot workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} disabled={!isEditable} />
       </div>
 
-      <div className="nodedc-external-section px-4 py-4">
+      <div className="nodedc-external-section overflow-visible px-4 py-4">
         <ExternalContoursIssueContentProperties
           workspaceSlug={workspaceSlug}
           targetProjectId={targetProjectId}
@@ -346,7 +346,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
         />
       </div>
 
-      <div className="nodedc-external-section px-4 py-4">
+      <div className="nodedc-external-section overflow-visible px-4 py-4">
         <IssueActivity workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} />
       </div>
     </div>
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx b/plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx
index d612a9d..63034c0 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx
@@ -58,39 +58,43 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
       <div
         data-active={selectedInboxIssueId === request.id}
         className={cn(
-          "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-6 px-6 py-5 transition-all hover:bg-white/5",
-          { "ring-1 ring-accent-primary/35": selectedInboxIssueId === request.id }
+          "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-6 py-5 transition-all hover:bg-white/5",
+          { "ring-0": selectedInboxIssueId === request.id }
         )}
       >
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-3">
-            <Avatar
-              src={requester?.avatar_url || ""}
-              name={requesterName}
-              size="lg"
-              showTooltip
-            />
-            <div className="min-w-0">
-              <div className="truncate text-15 font-semibold text-primary">{requesterName}</div>
-              <div className="truncate text-13 text-secondary">{contourName}</div>
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            <div className="text-11 font-medium text-tertiary">
-              {issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
-            </div>
-            <div className="flex items-center gap-2">
-              {request.has_unread_updates && (
-                <Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
-                  <span className="size-2 rounded-full bg-accent-primary" />
-                </Tooltip>
-              )}
-              <ExternalContourStatePill request={request} />
+        <div className="space-y-0.5">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex min-w-0 flex-1 items-center gap-3">
+              <Avatar
+                src={requester?.avatar_url || ""}
+                name={requesterName}
+                size="md"
+                showTooltip
+              />
+              <div className="min-w-0">
+                <div className="truncate text-[15px] leading-5 font-semibold text-primary">{requesterName}</div>
+              </div>
+            </div>
+
+            <div className="flex shrink-0 items-center gap-2">
+              <div className="text-11 font-medium text-tertiary">
+                {issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
+              </div>
+              <div className="flex items-center gap-2">
+                {request.has_unread_updates && (
+                  <Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
+                    <span className="size-2 rounded-full bg-accent-primary" />
+                  </Tooltip>
+                )}
+                <ExternalContourStatePill request={request} />
+              </div>
             </div>
           </div>
+
+          <div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">{contourName}</div>
         </div>
 
-        <div className="flex flex-1 items-center justify-center px-3">
+        <div className="flex flex-1 items-center justify-center px-5 py-2 text-center">
           <h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
             {issue.name}
           </h3>
@@ -99,14 +103,15 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
         <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2">
             {assigneeDetails.length > 0 ? (
-              assigneeDetails.map((assignee) => (
-                <Avatar
-                  key={assignee.id}
-                  src={assignee.avatar_url || ""}
-                  name={assignee.display_name || "NODE.DC"}
-                  size="lg"
-                  showTooltip
-                />
+              assigneeDetails.map((assignee, index) => (
+                <div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
+                  <Avatar
+                    src={assignee.avatar_url || ""}
+                    name={assignee.display_name || "NODE.DC"}
+                    size="md"
+                    showTooltip
+                  />
+                </div>
               ))
             ) : (
               <Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
@@ -127,7 +132,7 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
 
             {issue.priority && issue.priority !== "none" && (
               <Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
-                <div className="flex size-8 items-center justify-center rounded-full bg-white/6 text-secondary">
+                <div className="nodedc-external-priority-inline flex size-8 items-center justify-center rounded-full">
                   <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
                 </div>
               </Tooltip>
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/root.tsx b/plane-src/apps/web/ce/components/projects/external-contours/root.tsx
index 8fd0fb5..af4badf 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/root.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/root.tsx
@@ -28,20 +28,31 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
   const { workspaceSlug, projectId, inboxIssueId, navigationTab } = props;
   const [isMobileSidebar, setIsMobileSidebar] = useState(true);
   const { t } = useTranslation();
-  const { loader, error, currentTab, currentProjectId, handleCurrentTab, fetchRequests } = useProjectExternalContours();
+  const { loader, error, currentTab, currentProjectId, requestIds, handleCurrentTab, fetchRequests } =
+    useProjectExternalContours();
 
   useEffect(() => {
     if (!workspaceSlug || !projectId) return;
 
+    const resolvedTab = navigationTab || EInboxIssueCurrentTab.OPEN;
     const hasProjectChanged = currentProjectId && currentProjectId !== projectId;
 
-    if (navigationTab && navigationTab !== currentTab) {
-      handleCurrentTab(workspaceSlug, projectId, navigationTab);
-    } else if (hasProjectChanged) {
-      handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
-    } else {
-      fetchRequests(workspaceSlug.toString(), projectId.toString(), navigationTab || EInboxIssueCurrentTab.OPEN);
+    if (hasProjectChanged) {
+      void handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
+      return;
     }
+
+    if (currentProjectId === projectId && currentTab === resolvedTab) {
+      if (loader === "init-loading") return;
+      if (requestIds.length > 0) return;
+    }
+
+    if (currentTab !== resolvedTab) {
+      void handleCurrentTab(workspaceSlug, projectId, resolvedTab);
+      return;
+    }
+
+    void fetchRequests(workspaceSlug.toString(), projectId.toString(), resolvedTab);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspaceSlug, projectId, navigationTab]);
 
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx b/plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx
index 2d2c2e3..a4fc116 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from "@plane/i18n";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
+import { useSearchParams } from "next/navigation";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { ExternalContoursEmptyState } from "./empty-state";
@@ -30,17 +31,20 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[]
 export const ExternalContoursSidebar = observer(function ExternalContoursSidebar(props: Props) {
   const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
   const router = useAppRouter();
+  const searchParams = useSearchParams();
   const { t } = useTranslation();
-  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
+  const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
     useProjectExternalContours();
+  const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
+  const isTabTransitioning = loader === "init-loading" || routeTab !== currentTab;
 
   useEffect(() => {
     if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
       router.push(
-        `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${filteredRequestIds[0]}`
+        `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
       );
     }
-  }, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);
+  }, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
 
   return (
     <div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
@@ -52,27 +56,27 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
               return (
                 <button
                   type="button"
-              key={option.key}
-                  data-active={currentTab === option.key}
-              className={cn(
+                  key={option.key}
+                  data-active={routeTab === option.key}
+                  className={cn(
                     "nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
-              )}
-              onClick={() => {
-                if (currentTab !== option.key) {
-                  handleCurrentTab(workspaceSlug, projectId, option.key);
-                  router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
-                }
-              }}
-            >
+                  )}
+                  onClick={() => {
+                    if (routeTab !== option.key) {
+                      void handleCurrentTab(workspaceSlug, projectId, option.key);
+                      router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
+                    }
+                  }}
+                >
                   <div>{t(option.i18n_label)}</div>
                   <div
                     className={cn(
                       "rounded-full px-1.5 py-0.5 text-11 font-semibold",
-                      currentTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
+                      routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
                     )}
                   >
                     {count}
-                </div>
+                  </div>
                 </button>
               );
             })}
@@ -80,14 +84,14 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
         </div>
 
         <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
-          {loader === "init-loading" ? (
+          {isTabTransitioning ? (
             <div className="flex h-full items-center justify-center">
               <div className="nodedc-external-empty px-6 py-6 text-13 text-secondary">
                 {t("loading")}...
               </div>
             </div>
           ) : filteredRequestIds.length > 0 ? (
-            <div className="space-y-4">
+            <div key={routeTab} className="space-y-2">
               {filteredRequestIds.map((requestId) => (
                 <ExternalContoursListItem
                   key={requestId}
@@ -102,12 +106,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
             <div className="flex h-full w-full items-center justify-center">
               <ExternalContoursEmptyState
                 title={t(
-                  currentTab === EInboxIssueCurrentTab.OPEN
+                  routeTab === EInboxIssueCurrentTab.OPEN
                     ? "external_contours_page.empty_state.open_title"
                     : "external_contours_page.empty_state.closed_title"
                 )}
                 description={t(
-                  currentTab === EInboxIssueCurrentTab.OPEN
+                  routeTab === EInboxIssueCurrentTab.OPEN
                     ? "external_contours_page.empty_state.open_description"
                     : "external_contours_page.empty_state.closed_description"
                 )}
diff --git a/plane-src/apps/web/core/components/auth-screens/header.tsx b/plane-src/apps/web/core/components/auth-screens/header.tsx
index 557c40e..01dccd5 100644
--- a/plane-src/apps/web/core/components/auth-screens/header.tsx
+++ b/plane-src/apps/web/core/components/auth-screens/header.tsx
@@ -74,8 +74,8 @@ export function AuthHeaderBase(props: TAuthHeaderBase) {
       <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6 px-2 py-1">
         <Link href="/">
           <PlaneLockup
-            height={54}
-            width={258}
+            height={84}
+            width={402}
             className="nodedc-auth-logo-lockup text-primary transition-opacity hover:opacity-90"
           />
         </Link>
diff --git a/plane-src/apps/web/core/components/dropdowns/priority.tsx b/plane-src/apps/web/core/components/dropdowns/priority.tsx
index 89e54d3..917d1ee 100644
--- a/plane-src/apps/web/core/components/dropdowns/priority.tsx
+++ b/plane-src/apps/web/core/components/dropdowns/priority.tsx
@@ -6,6 +6,7 @@
 
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { SignalHigh } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -328,6 +329,7 @@ export function PriorityDropdown(props: Props) {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // popper-js init
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    strategy: "fixed",
     placement: placement ?? "bottom-start",
     modifiers: [
       {
@@ -378,7 +380,7 @@ export function PriorityDropdown(props: Props) {
     <button
       ref={setReferenceElement}
       type="button"
-      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      className={cn("clickable block h-full w-full border-0 bg-transparent shadow-none outline-none", buttonContainerClassName)}
       onClick={handleOnClick}
       disabled={disabled}
       tabIndex={tabIndex}
@@ -390,7 +392,7 @@ export function PriorityDropdown(props: Props) {
       ref={setReferenceElement}
       type="button"
       className={cn(
-        "clickable block h-full max-w-full outline-none",
+        "clickable block h-full max-w-full border-0 bg-transparent shadow-none outline-none",
         {
           "cursor-not-allowed text-secondary": disabled,
           "cursor-pointer": !disabled,
@@ -428,56 +430,60 @@ export function PriorityDropdown(props: Props) {
       button={comboButton}
       renderByDefault={renderByDefault}
     >
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="nodedc-dropdown-surface my-1 w-52"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="nodedc-dropdown-search">
-              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
-              <Combobox.Input
-                as="input"
-                ref={inputRef}
-                className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder={t("search")}
-                displayValue={(assigned: any) => assigned?.name}
-                onKeyDown={searchInputKeyDown}
-              />
+      {isOpen &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <Combobox.Options className="fixed z-[760]" static>
+            <div
+              data-prevent-outside-click
+              className="nodedc-dropdown-surface nodedc-external-popup-anchor my-1 w-56"
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="nodedc-dropdown-search">
+                <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
+                <Combobox.Input
+                  as="input"
+                  ref={inputRef}
+                  className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder={t("search")}
+                  displayValue={(assigned: any) => assigned?.name}
+                  onKeyDown={searchInputKeyDown}
+                />
+              </div>
+              <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
+                {filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        cn(
+                          `nodedc-dropdown-option cursor-pointer ${
+                            active ? "bg-white/6" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        )
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="flex-grow truncate">{option.content}</span>
+                          {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )}
+              </div>
             </div>
-            <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
-              {filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ active, selected }) =>
-                      cn(
-                        `nodedc-dropdown-option cursor-pointer ${
-                          active ? "bg-white/6" : ""
-                        } ${selected ? "text-primary" : "text-secondary"}`
-                      )
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        <span className="flex-grow truncate">{option.content}</span>
-                        {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : (
-                <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
-      )}
+          </Combobox.Options>,
+          document.body
+        )}
     </ComboDropDown>
   );
 }
diff --git a/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx b/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
index 8c744d5..82a76cc 100644
--- a/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
+++ b/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
@@ -55,9 +55,11 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
   return (
     <div
       {...getRootProps()}
-      className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
-        isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
-      } ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
+      data-drag-active={isDragActive ? "true" : "false"}
+      data-drag-reject={isDragReject ? "true" : "false"}
+      className={`nodedc-attachment-upload flex items-center justify-center px-4 text-11 ${
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      }`}
     >
       <input {...getInputProps()} />
       <span className="flex items-center gap-2">
diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
index 4bcfa8f..335e69d 100644
--- a/plane-src/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -25,14 +25,13 @@ export const ProjectViewEmptyState = observer(function ProjectViewEmptyState() {
   );
 
   return (
-    // TODO: Add translation
     <EmptyStateDetailed
       assetKey="work-item"
-      title="View work items will appear here"
-      description="Work items help you track individual pieces of work. With work items, keep track of what's going on, who is working on it, and what's done."
+      title="Начните с вашего первого рабочего элемента."
+      description="Рабочие элементы — это строительные блоки вашего проекта: назначайте ответственных, устанавливайте приоритеты и отслеживайте прогресс."
       actions={[
         {
-          label: "New work item",
+          label: "Создайте свой первый рабочий элемент",
           onClick: () => {
             toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
           },
diff --git a/plane-src/apps/web/core/components/issues/select/base.tsx b/plane-src/apps/web/core/components/issues/select/base.tsx
index 8788fad..e8be97d 100644
--- a/plane-src/apps/web/core/components/issues/select/base.tsx
+++ b/plane-src/apps/web/core/components/issues/select/base.tsx
@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
@@ -72,6 +73,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
   const { isMobile } = usePlatformOS();
   // popper-js init
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    strategy: "fixed",
     placement: placement ?? "bottom-start",
   });
   // derived values
@@ -169,7 +171,10 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       <button
         type="button"
         ref={setReferenceElement}
-        className={cn("flex h-full cursor-pointer items-center gap-2 text-11", buttonContainerClassName)}
+        className={cn(
+          "flex h-full cursor-pointer items-center gap-2 border-0 bg-transparent text-11 shadow-none outline-none",
+          buttonContainerClassName
+        )}
         onClick={handleOnClick}
       >
         {label ? (
@@ -195,133 +200,137 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
         )}
       </button>
 
-      {isDropdownOpen && (
-        <Combobox.Options className="fixed z-[120]" static>
-          <div
-            className="nodedc-dropdown-surface my-1 w-64 min-w-[16rem]"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="nodedc-dropdown-search">
-              <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
-              <Combobox.Input
-                as="input"
-                ref={inputRef}
-                className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder={t("search")}
-                displayValue={(assigned: any) => assigned?.name}
-                onKeyDown={searchInputKeyDown}
-              />
-            </div>
-            <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
-              {labelsList && filteredOptions ? (
-                filteredOptions.length > 0 ? (
-                  filteredOptions.map((label) => {
-                    const children = labelsList?.filter((l) => l.parent === label.id);
+      {isDropdownOpen &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <Combobox.Options className="fixed z-[760]" static>
+            <div
+              data-prevent-outside-click
+              className="nodedc-dropdown-surface nodedc-external-popup-anchor my-1 w-64 min-w-[16rem]"
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="nodedc-dropdown-search">
+                <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
+                <Combobox.Input
+                  as="input"
+                  ref={inputRef}
+                  className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder={t("search")}
+                  displayValue={(assigned: any) => assigned?.name}
+                  onKeyDown={searchInputKeyDown}
+                />
+              </div>
+              <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
+                {labelsList && filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((label) => {
+                      const children = labelsList?.filter((l) => l.parent === label.id);
 
-                    if (children.length === 0) {
-                      if (!label.parent)
-                        return (
-                          <Combobox.Option
-                            key={label.id}
-                            className={({ active }) =>
-                              cn(
-                                "nodedc-dropdown-option cursor-pointer",
-                                active ? "bg-white/6" : "",
-                                "text-secondary"
-                              )
-                            }
-                            value={label.id}
-                          >
-                            {({ selected }) => (
-                              <div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
-                                <div className="flex items-center justify-start gap-2 truncate">
-                                  <span
-                                    className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-                                    style={{
-                                      backgroundColor: label.color,
-                                    }}
-                                  />
-                                  <span className="truncate">{label.name}</span>
-                                </div>
-                                <div className="flex shrink-0 items-center justify-center rounded-[0.9rem] p-1">
-                                  <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                </div>
-                              </div>
-                            )}
-                          </Combobox.Option>
-                        );
-                    } else
-                      return (
-                        <div key={label.id} className="overflow-hidden rounded-[1rem] bg-white/[0.02]">
-                          <div className="flex items-center gap-2 truncate p-2 text-primary select-none">
-                            <Component className="h-3 w-3" /> {label.name}
-                          </div>
-                          <div>
-                            {children.map((child) => (
-                              <Combobox.Option
-                                key={child.id}
-                                className={({ active }) =>
-                                  cn(
-                                    "nodedc-dropdown-option min-w-[14rem] cursor-pointer",
-                                    active ? "bg-white/6" : "",
-                                    "text-secondary"
-                                  )
-                                }
-                                value={child.id}
-                              >
-                                {({ selected }) => (
-                                  <div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
-                                    <div className="flex items-center justify-start gap-2">
-                                      <span
-                                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-                                        style={{
-                                          backgroundColor: child?.color,
-                                        }}
-                                      />
-                                      <span>{child.name}</span>
-                                    </div>
-                                    <div className="flex items-center justify-center rounded-[0.9rem] p-1">
-                                      <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                    </div>
+                      if (children.length === 0) {
+                        if (!label.parent)
+                          return (
+                            <Combobox.Option
+                              key={label.id}
+                              className={({ active }) =>
+                                cn(
+                                  "nodedc-dropdown-option cursor-pointer",
+                                  active ? "bg-white/6" : "",
+                                  "text-secondary"
+                                )
+                              }
+                              value={label.id}
+                            >
+                              {({ selected }) => (
+                                <div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
+                                  <div className="flex items-center justify-start gap-2 truncate">
+                                    <span
+                                      className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                      style={{
+                                        backgroundColor: label.color,
+                                      }}
+                                    />
+                                    <span className="truncate">{label.name}</span>
                                   </div>
-                                )}
-                              </Combobox.Option>
-                            ))}
+                                  <div className="flex shrink-0 items-center justify-center rounded-[0.9rem] p-1">
+                                    <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                  </div>
+                                </div>
+                              )}
+                            </Combobox.Option>
+                          );
+                      } else
+                        return (
+                          <div key={label.id} className="overflow-hidden rounded-[1rem] bg-white/[0.02]">
+                            <div className="flex items-center gap-2 truncate p-2 text-primary select-none">
+                              <Component className="h-3 w-3" /> {label.name}
+                            </div>
+                            <div>
+                              {children.map((child) => (
+                                <Combobox.Option
+                                  key={child.id}
+                                  className={({ active }) =>
+                                    cn(
+                                      "nodedc-dropdown-option min-w-[14rem] cursor-pointer",
+                                      active ? "bg-white/6" : "",
+                                      "text-secondary"
+                                    )
+                                  }
+                                  value={child.id}
+                                >
+                                  {({ selected }) => (
+                                    <div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
+                                      <div className="flex items-center justify-start gap-2">
+                                        <span
+                                          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                          style={{
+                                            backgroundColor: child?.color,
+                                          }}
+                                        />
+                                        <span>{child.name}</span>
+                                      </div>
+                                      <div className="flex items-center justify-center rounded-[0.9rem] p-1">
+                                        <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                      </div>
+                                    </div>
+                                  )}
+                                </Combobox.Option>
+                              ))}
+                            </div>
                           </div>
-                        </div>
-                      );
-                  })
-                ) : submitting ? (
-                  <Loader className="h-3.5 w-3.5 animate-spin" />
-                ) : createLabelEnabled ? (
-                  <p
-                    onClick={() => {
-                      if (!query.length) return;
-                      handleAddLabel(query);
-                    }}
-                    className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
-                  >
-                    {query.length ? (
-                      <>
-                        + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
-                      </>
-                    ) : (
-                      t("label.create.type")
-                    )}
-                  </p>
+                        );
+                    })
+                  ) : submitting ? (
+                    <Loader className="h-3.5 w-3.5 animate-spin" />
+                  ) : createLabelEnabled ? (
+                    <p
+                      onClick={() => {
+                        if (!query.length) return;
+                        handleAddLabel(query);
+                      }}
+                      className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
+                    >
+                      {query.length ? (
+                        <>
+                          + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
+                        </>
+                      ) : (
+                        t("label.create.type")
+                      )}
+                    </p>
+                  ) : (
+                    <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                  )
                 ) : (
-                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
-                )
-              ) : (
-                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
-              )}
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+                )}
+              </div>
             </div>
-          </div>
-        </Combobox.Options>
-      )}
+          </Combobox.Options>,
+          document.body
+        )}
     </Combobox>
   );
 });
diff --git a/plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts b/plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts
index 822139f..f56e724 100644
--- a/plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts
+++ b/plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts
@@ -178,6 +178,7 @@ export class ProjectExternalContoursStore implements IProjectExternalContoursSto
   };
 
   handleCurrentTab = async (workspaceSlug: string, projectId: string, tab: TInboxIssueCurrentTab) => {
+    this.currentProjectId = projectId;
     this.requestIds = [];
     this.requests = {};
     this.error = undefined;
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index 1db6f26..9a77d51 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -980,14 +980,14 @@
   }
 
   .nodedc-external-tab {
-    min-height: 2.8rem;
+    min-height: 3rem;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
     border-radius: 999px !important;
     background: transparent !important;
     color: rgba(255, 255, 255, 0.78) !important;
-    padding-inline: 1rem !important;
+    padding-inline: 1.3rem !important;
   }
 
   .nodedc-external-tab:hover {
@@ -1025,6 +1025,8 @@
   .nodedc-external-content-shell {
     border: 0 !important;
     outline: none !important;
+    overflow: visible !important;
+    isolation: isolate;
     box-shadow:
       0 18px 44px rgba(0, 0, 0, 0.18),
       inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
@@ -1061,6 +1063,8 @@
   .nodedc-external-panel {
     border: 0 !important;
     outline: none !important;
+    overflow: visible !important;
+    isolation: isolate;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
     border-radius: 1.6rem !important;
     background:
@@ -1073,6 +1077,8 @@
   .nodedc-external-section {
     border: 0 !important;
     outline: none !important;
+    overflow: visible !important;
+    isolation: isolate;
     box-shadow:
       0 12px 32px rgba(0, 0, 0, 0.12),
       inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
@@ -1094,14 +1100,14 @@
   }
 
   .nodedc-external-action-button {
-    min-height: 2.75rem;
+    min-height: 2.85rem;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
-    border-radius: 1.25rem !important;
+    border-radius: 1.35rem !important;
     background: rgba(255, 255, 255, 0.06) !important;
     color: var(--text-color-primary) !important;
-    padding-inline: 1.15rem !important;
+    padding-inline: 1.25rem !important;
   }
 
   .nodedc-external-action-button:hover {
@@ -1128,17 +1134,23 @@
   }
 
   .nodedc-external-primary-button {
-    min-height: 2.75rem;
+    min-height: 2.85rem;
+    min-width: 13rem;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
-    border-radius: 1.25rem !important;
+    border-radius: 1.35rem !important;
     background: rgb(var(--nodedc-card-active-rgb)) !important;
     color: #0b1117 !important;
-    padding-inline: 1.45rem !important;
+    padding-inline: 1.6rem !important;
     font-weight: 600 !important;
   }
 
+  .nodedc-external-primary-button,
+  .nodedc-external-primary-button * {
+    color: #0b1117 !important;
+  }
+
   .nodedc-external-primary-button:hover {
     background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
     color: #0b1117 !important;
@@ -1159,16 +1171,14 @@
     place-items: center;
     width: 6.25rem;
     height: 6.25rem;
-    border-radius: 1.85rem;
-    background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.014) 100%),
-      rgba(255, 255, 255, 0.028);
-    box-shadow:
-      0 16px 40px rgba(0, 0, 0, 0.14),
-      inset 0 1px 0 rgba(255, 255, 255, 0.018);
+    border-radius: 0;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
   }
 
   .nodedc-external-empty-media svg {
+    display: block;
     color: rgba(255, 255, 255, 0.22);
   }
 
@@ -1189,10 +1199,20 @@
     padding: 0.65rem 0.95rem !important;
   }
 
+  .nodedc-external-readonly-value.nodedc-external-readonly-plain {
+    min-height: 0;
+    border-radius: 0 !important;
+    background: transparent !important;
+    padding: 0 !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+
   .nodedc-external-property-row {
     display: flex;
     align-items: center;
     gap: 1rem;
+    position: relative;
     border: 0 !important;
     outline: none !important;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
@@ -1217,37 +1237,134 @@
 
   .nodedc-external-property-value {
     display: flex;
-    min-height: 2.5rem;
+    min-height: 0;
     width: 100%;
     align-items: center;
+    justify-content: flex-start;
     gap: 0.6rem;
+    position: relative;
+    z-index: 1;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
     border-radius: 999px !important;
     background: transparent !important;
     color: var(--text-color-primary) !important;
-    padding: 0.1rem 0.1rem !important;
+    padding: 0 !important;
   }
 
   .nodedc-external-property-control {
     display: flex;
-    min-height: 2.5rem;
+    min-height: 0;
     width: 100%;
     align-items: center;
+    justify-content: flex-start;
     gap: 0.6rem;
+    position: relative;
+    z-index: 1;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
     border-radius: 999px !important;
     background: transparent !important;
     color: var(--text-color-primary) !important;
-    padding: 0.1rem 0.1rem !important;
+    padding: 0 !important;
     transition: background 160ms ease;
   }
 
+  .nodedc-external-property-control-shell {
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+  }
+
+  .nodedc-external-property-control-shell:hover,
+  .nodedc-external-property-control-shell:focus,
+  .nodedc-external-property-control-shell:focus-visible,
+  .nodedc-external-property-control-shell:focus-within {
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
   .nodedc-external-property-control:hover,
   .nodedc-external-property-control:focus-within {
-    background: rgba(255, 255, 255, 0.04) !important;
+    background: transparent !important;
+  }
+
+  .nodedc-external-popup-anchor {
+    z-index: 760 !important;
+  }
+
+  .nodedc-external-detail-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .nodedc-external-toolbar-cluster {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0;
+    border-radius: 999px;
+    background: transparent !important;
+  }
+
+  .nodedc-external-priority-inline {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--text-color-secondary) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 0 !important;
+    outline: none !important;
+  }
+
+  .nodedc-attachment-upload {
+    min-height: 4.5rem;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow:
+      inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 0.018),
+      0 10px 28px rgba(0, 0, 0, 0.08) !important;
+    border-radius: 1.35rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%),
+      rgba(255, 255, 255, 0.025) !important;
+    color: var(--text-color-secondary) !important;
+    transition:
+      background 180ms ease,
+      color 180ms ease,
+      box-shadow 180ms ease;
+  }
+
+  .nodedc-attachment-upload:hover,
+  .nodedc-attachment-upload[data-drag-active="true"] {
+    box-shadow:
+      inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.32),
+      inset 0 1px 0 rgba(255, 255, 255, 0.018),
+      0 10px 28px rgba(0, 0, 0, 0.08) !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.014) 100%),
+      rgba(255, 255, 255, 0.035) !important;
+    color: var(--text-color-primary) !important;
+  }
+
+  .nodedc-attachment-upload[data-drag-reject="true"] {
+    box-shadow:
+      inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.018),
+      0 10px 28px rgba(0, 0, 0, 0.08) !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
+      rgba(255, 255, 255, 0.03) !important;
+    color: var(--text-color-primary) !important;
   }
 }