diff --git a/src/components/Editor/Context/PipelineDetails.tsx b/src/components/Editor/Context/PipelineDetails.tsx
index f24a7b595..bc7e1f506 100644
--- a/src/components/Editor/Context/PipelineDetails.tsx
+++ b/src/components/Editor/Context/PipelineDetails.tsx
@@ -1,16 +1,19 @@
 import { useEffect, useState } from "react";
 
 import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
+import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { CodeViewer } from "@/components/shared/CodeViewer";
 import { ActionBlock } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
 import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
 import { ListBlock } from "@/components/shared/ContextPanel/Blocks/ListBlock";
 import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
-import { TaskImplementation } from "@/components/shared/TaskDetails";
+import { Icon } from "@/components/ui/icon";
 import { BlockStack } from "@/components/ui/layout";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { getComponentFileFromList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
+import { componentSpecToText } from "@/utils/yaml";
 
 import PipelineIO from "../../shared/Execution/PipelineIO";
 import { PipelineValidationList } from "./PipelineValidationList";
@@ -28,6 +31,8 @@ const PipelineDetails = () => {
     globalValidationIssues,
   );
 
+  const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
+
   // State for file metadata
   const [fileMeta, setFileMeta] = useState<{
     creationTime?: Date;
@@ -75,57 +80,70 @@ const PipelineDetails = () => {
 
   const actions = [
     <RenamePipeline key="rename-pipeline-action" />,
-    <TaskImplementation
-      key="pipeline-implementation-action"
-      displayName={componentSpec.name ?? "Pipeline"}
-      componentSpec={componentSpec}
-      showInlineContent={false}
-    />,
+    <TooltipButton
+      variant="outline"
+      tooltip="View YAML"
+      onClick={() => setIsYamlFullscreen(true)}
+      key="view-yaml-action"
+    >
+      <Icon name="FileCodeCorner" />
+    </TooltipButton>,
   ];
 
   return (
-    <BlockStack
-      gap="4"
-      className="h-full px-2"
-      data-context-panel="pipeline-details"
-    >
-      <CopyText className="text-lg font-semibold">
-        {componentSpec.name ?? "Unnamed Pipeline"}
-      </CopyText>
-
-      <ActionBlock actions={actions} />
-
-      <ListBlock items={metadata} marker="none" />
-
-      {componentSpec.description && (
-        <TextBlock title="Description" text={componentSpec.description} />
-      )}
-
-      {digest && (
-        <TextBlock
-          title="Digest"
-          text={digest}
-          copyable
-          className="bg-secondary p-2 rounded-md border"
-          mono
+    <>
+      <BlockStack
+        gap="4"
+        className="h-full px-2"
+        data-context-panel="pipeline-details"
+      >
+        <CopyText className="text-lg font-semibold">
+          {componentSpec.name ?? "Unnamed Pipeline"}
+        </CopyText>
+
+        <ActionBlock actions={actions} />
+
+        <ListBlock items={metadata} marker="none" />
+
+        {componentSpec.description && (
+          <TextBlock title="Description" text={componentSpec.description} />
+        )}
+
+        {digest && (
+          <TextBlock
+            title="Digest"
+            text={digest}
+            copyable
+            className="bg-secondary p-2 rounded-md border"
+            mono
+          />
+        )}
+
+        {annotations.length > 0 && (
+          <ListBlock title="Annotations" items={annotations} marker="none" />
+        )}
+
+        <PipelineIO />
+
+        <ContentBlock title="Validations">
+          <PipelineValidationList
+            isComponentTreeValid={isComponentTreeValid}
+            groupedIssues={groupedIssues}
+            totalIssueCount={globalValidationIssues.length}
+            onIssueSelect={handleIssueClick}
+          />
+        </ContentBlock>
+      </BlockStack>
+      {isYamlFullscreen && (
+        <CodeViewer
+          code={componentSpecToText(componentSpec)}
+          language="yaml"
+          filename={componentSpec.name ?? "pipeline.yaml"}
+          isFullscreen={isYamlFullscreen}
+          onClose={() => setIsYamlFullscreen(false)}
         />
       )}
-
-      {annotations.length > 0 && (
-        <ListBlock title="Annotations" items={annotations} marker="none" />
-      )}
-
-      <PipelineIO />
-
-      <ContentBlock title="Validations">
-        <PipelineValidationList
-          isComponentTreeValid={isComponentTreeValid}
-          groupedIssues={groupedIssues}
-          totalIssueCount={globalValidationIssues.length}
-          onIssueSelect={handleIssueClick}
-        />
-      </ContentBlock>
-    </BlockStack>
+    </>
   );
 };
 
diff --git a/src/components/PipelineRun/RunDetails.tsx b/src/components/PipelineRun/RunDetails.tsx
index 6e94efa4b..be0d42ab4 100644
--- a/src/components/PipelineRun/RunDetails.tsx
+++ b/src/components/PipelineRun/RunDetails.tsx
@@ -1,4 +1,7 @@
+import { useState } from "react";
+
 import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
 import { Paragraph, Text } from "@/components/ui/typography";
@@ -13,7 +16,10 @@ import {
   isStatusComplete,
   isStatusInProgress,
 } from "@/services/executionService";
+import { componentSpecToText } from "@/utils/yaml";
 
+import TooltipButton from "../shared/Buttons/TooltipButton";
+import { CodeViewer } from "../shared/CodeViewer";
 import {
   ActionBlock,
   type ActionOrReactNode,
@@ -24,7 +30,6 @@ import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
 import PipelineIO from "../shared/Execution/PipelineIO";
 import { InfoBox } from "../shared/InfoBox";
 import { StatusBar, StatusText } from "../shared/Status";
-import { TaskImplementation } from "../shared/TaskDetails";
 import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
 import { ClonePipelineButton } from "./components/ClonePipelineButton";
 import { InspectPipelineButton } from "./components/InspectPipelineButton";
@@ -43,6 +48,8 @@ export const RunDetails = () => {
   } = useExecutionData();
   const { data: currentUserDetails } = useUserDetails();
 
+  const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
+
   const editorRoute = componentSpec.name
     ? `/editor/${encodeURIComponent(componentSpec.name)}`
     : "";
@@ -95,11 +102,13 @@ export const RunDetails = () => {
   const actions: ActionOrReactNode[] = [];
 
   actions.push(
-    <TaskImplementation
-      displayName={componentSpec.name ?? "Pipeline"}
-      componentSpec={componentSpec}
-      showInlineContent={false}
-    />,
+    <TooltipButton
+      variant="outline"
+      tooltip="View YAML"
+      onClick={() => setIsYamlFullscreen(true)}
+    >
+      <Icon name="FileCodeCorner" />
+    </TooltipButton>,
   );
 
   if (canAccessEditorSpec && componentSpec.name) {
@@ -123,57 +132,68 @@ export const RunDetails = () => {
   }
 
   return (
-    <BlockStack gap="6" className="p-2 h-full">
-      <CopyText className="text-lg font-semibold">
-        {componentSpec.name ?? "Unnamed Pipeline"}
-      </CopyText>
-
-      <ActionBlock actions={actions} />
-
-      {metadata && (
-        <ListBlock
-          title="Run Info"
-          items={[
-            { label: "Run Id", value: metadata.id },
-            { label: "Execution Id", value: metadata.root_execution_id },
-            { label: "Created by", value: metadata.created_by ?? undefined },
-            {
-              label: "Created at",
-              value: metadata.created_at
-                ? new Date(metadata.created_at).toLocaleString()
-                : undefined,
-            },
-          ]}
-          marker="none"
-        />
-      )}
-
-      {componentSpec.description && (
-        <TextBlock title="Description" text={componentSpec.description} />
-      )}
-
-      <ContentBlock title="Status">
-        <InlineStack gap="2" blockAlign="center" className="mb-1">
-          <Text size="sm" weight="semibold">
-            {runStatus}
-          </Text>
-          <StatusText statusCounts={statusCounts} />
-        </InlineStack>
-        <StatusBar statusCounts={statusCounts} />
-      </ContentBlock>
-
-      {Object.keys(annotations).length > 0 && (
-        <ListBlock
-          title="Annotations"
-          items={Object.entries(annotations).map(([key, value]) => ({
-            label: key,
-            value: String(value),
-          }))}
-          marker="none"
+    <>
+      <BlockStack gap="6" className="p-2 h-full">
+        <CopyText className="text-lg font-semibold">
+          {componentSpec.name ?? "Unnamed Pipeline"}
+        </CopyText>
+
+        <ActionBlock actions={actions} />
+
+        {metadata && (
+          <ListBlock
+            title="Run Info"
+            items={[
+              { label: "Run Id", value: metadata.id },
+              { label: "Execution Id", value: metadata.root_execution_id },
+              { label: "Created by", value: metadata.created_by ?? undefined },
+              {
+                label: "Created at",
+                value: metadata.created_at
+                  ? new Date(metadata.created_at).toLocaleString()
+                  : undefined,
+              },
+            ]}
+            marker="none"
+          />
+        )}
+
+        {componentSpec.description && (
+          <TextBlock title="Description" text={componentSpec.description} />
+        )}
+
+        <ContentBlock title="Status">
+          <InlineStack gap="2" blockAlign="center" className="mb-1">
+            <Text size="sm" weight="semibold">
+              {runStatus}
+            </Text>
+            <StatusText statusCounts={statusCounts} />
+          </InlineStack>
+          <StatusBar statusCounts={statusCounts} />
+        </ContentBlock>
+
+        {Object.keys(annotations).length > 0 && (
+          <ListBlock
+            title="Annotations"
+            items={Object.entries(annotations).map(([key, value]) => ({
+              label: key,
+              value: String(value),
+            }))}
+            marker="none"
+          />
+        )}
+
+        <PipelineIO readOnly />
+      </BlockStack>
+      {isYamlFullscreen && (
+        <CodeViewer
+          code={componentSpecToText(componentSpec)}
+          language="yaml"
+          filename={componentSpec.name ?? "pipeline.yaml"}
+          isFullscreen={isYamlFullscreen}
+          onClose={() => setIsYamlFullscreen(false)}
         />
       )}
-
-      <PipelineIO readOnly />
-    </BlockStack>
+    </>
   );
 };
diff --git a/src/components/shared/CodeViewer/CodeViewer.tsx b/src/components/shared/CodeViewer/CodeViewer.tsx
index f138e667d..a3a8d1b0f 100644
--- a/src/components/shared/CodeViewer/CodeViewer.tsx
+++ b/src/components/shared/CodeViewer/CodeViewer.tsx
@@ -1,10 +1,8 @@
-import { FileCode2, Maximize2, X as XIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { Icon } from "@/components/ui/icon";
 
-import TooltipButton from "../Buttons/TooltipButton";
 import { FullscreenElement } from "../FullscreenElement";
 import CodeSyntaxHighlighter from "./CodeSyntaxHighlighter";
 
@@ -12,7 +10,9 @@ interface CodeViewerProps {
   code: string;
   language?: string;
   filename?: string;
-  showInlineContent?: boolean;
+  isFullscreen: boolean;
+  onClose: () => void;
+  onExpand?: () => void;
 }
 
 const DEFAULT_CODE_VIEWER_HEIGHT = 128;
@@ -21,32 +21,14 @@ const CodeViewer = ({
   code,
   language = "yaml",
   filename = "",
-  showInlineContent = true,
+  isFullscreen,
+  onClose,
+  onExpand,
 }: CodeViewerProps) => {
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const shouldRenderInlineCode = showInlineContent || isFullscreen;
-
-  const handleEnterFullscreen = () => {
-    setIsFullscreen((prev) => !prev);
-  };
-
-  const compactButton = (
-    <TooltipButton
-      type="button"
-      variant="outline"
-      size="icon"
-      tooltip="View YAML"
-      onClick={handleEnterFullscreen}
-      aria-label="View YAML"
-    >
-      <FileCode2 className="size-4" />
-    </TooltipButton>
-  );
-
   useEffect(() => {
     const handleEscapeKey = (e: KeyboardEvent) => {
       if (isFullscreen && e.key === "Escape") {
-        setIsFullscreen(false);
+        onClose();
         e.preventDefault();
         e.stopPropagation();
       }
@@ -59,56 +41,43 @@ const CodeViewer = ({
     };
   }, [isFullscreen]);
 
+  const showFullscreenButton = (!isFullscreen && onExpand) || isFullscreen;
+
   return (
     <FullscreenElement fullscreen={isFullscreen}>
-      <div
-        className={cn(
-          "flex flex-col transition-shadow duration-150",
-          shouldRenderInlineCode
-            ? "bg-slate-900 h-full rounded-md"
-            : "bg-transparent",
-        )}
-      >
-        {shouldRenderInlineCode ? (
-          <div className="flex items-center justify-between gap-2 bg-slate-800 sticky top-0 z-10 rounded-t-md px-3 py-2.5">
-            <div className="flex items-baseline gap-2">
-              <span className="font-semibold text-base text-secondary">
-                {filename}
-              </span>
-              <span className="text-sm text-secondary">(Read Only)</span>
-            </div>
+      <div className="flex flex-col transition-shadow duration-150 bg-slate-900 h-full rounded-md">
+        <div className="flex items-center justify-between gap-2 bg-slate-800 sticky top-0 z-10 rounded-t-md px-3 py-2.5">
+          <div className="flex items-baseline gap-2">
+            <span className="font-semibold text-base text-secondary">
+              {filename}
+            </span>
+            <span className="text-sm text-secondary">(Read Only)</span>
+          </div>
+          {showFullscreenButton && (
             <Button
               type="button"
               variant="ghost"
               size="icon"
-              onClick={handleEnterFullscreen}
-              className="text-gray-200 hover:text-white"
+              onClick={isFullscreen ? onClose : onExpand}
+              className="text-gray-200 hover:text-black"
               title={isFullscreen ? "Exit fullscreen" : "View fullscreen"}
               aria-label={isFullscreen ? "Exit fullscreen" : "View fullscreen"}
             >
-              {isFullscreen ? (
-                <XIcon className="size-4" />
-              ) : (
-                <Maximize2 className="size-4" />
-              )}
+              {isFullscreen ? <Icon name="X" /> : <Icon name="Maximize2" />}
             </Button>
+          )}
+        </div>
+        <div className="flex-1 relative">
+          <div
+            className="absolute inset-0 overflow-y-auto bg-slate-900"
+            style={{
+              willChange: "transform",
+              minHeight: DEFAULT_CODE_VIEWER_HEIGHT,
+            }}
+          >
+            <CodeSyntaxHighlighter code={code} language={language} />
           </div>
-        ) : (
-          <div className="flex">{compactButton}</div>
-        )}
-        {shouldRenderInlineCode && (
-          <div className="flex-1 relative">
-            <div
-              className="absolute inset-0 overflow-y-auto bg-slate-900"
-              style={{
-                willChange: "transform",
-                minHeight: DEFAULT_CODE_VIEWER_HEIGHT,
-              }}
-            >
-              <CodeSyntaxHighlighter code={code} language={language} />
-            </div>
-          </div>
-        )}
+        </div>
       </div>
     </FullscreenElement>
   );
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCodeViewer.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCodeViewer.tsx
index c3ec71e2d..39269b3b3 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCodeViewer.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCodeViewer.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { CodeViewer } from "@/components/shared/CodeViewer";
 import { safeJsonParse } from "@/utils/string";
 
@@ -11,6 +13,8 @@ interface IOCodeViewerProps {
 }
 
 const IOCodeViewer = ({ title, value }: IOCodeViewerProps) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
   const { parsed, isValidJson } = safeJsonParse(value);
 
   if (!isValidJson) {
@@ -29,7 +33,14 @@ const IOCodeViewer = ({ title, value }: IOCodeViewerProps) => {
 
   return (
     <div style={{ height: lineHeight }}>
-      <CodeViewer code={codeString} language="json" filename={title} />
+      <CodeViewer
+        code={codeString}
+        language="json"
+        filename={title}
+        isFullscreen={isFullScreen}
+        onClose={() => setIsFullScreen(false)}
+        onExpand={() => setIsFullScreen(true)}
+      />
     </div>
   );
 };
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx
index 7bdb7d43c..840294d24 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx
@@ -5,16 +5,15 @@ import {
   LogsIcon,
   Parentheses,
 } from "lucide-react";
+import { useState } from "react";
 
 import type { TooltipButtonProps } from "@/components/shared/Buttons/TooltipButton";
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { CodeViewer } from "@/components/shared/CodeViewer";
 import { ComponentDetailsDialog } from "@/components/shared/Dialogs";
 import { ComponentFavoriteToggle } from "@/components/shared/FavoriteComponentToggle";
 import { StatusIcon } from "@/components/shared/Status";
-import {
-  TaskDetails,
-  TaskImplementation,
-} from "@/components/shared/TaskDetails";
+import { TaskDetails } from "@/components/shared/TaskDetails";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -22,6 +21,7 @@ import { Text } from "@/components/ui/typography";
 import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
 import { type TaskNodeContextType } from "@/providers/TaskNodeProvider";
 import { isGraphImplementation } from "@/utils/componentSpec";
+import { componentSpecToText } from "@/utils/yaml";
 
 import ArgumentsSection from "../ArgumentsEditor/ArgumentsSection";
 import ConfigurationSection from "./ConfigurationSection";
@@ -38,6 +38,8 @@ interface TaskOverviewProps {
 const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
   const { name, taskSpec, taskId, state, callbacks } = taskNode;
 
+  const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
+
   const executionData = useExecutionDataOptional();
   const details = executionData?.details;
 
@@ -65,114 +67,130 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
     ...(actions?.map((action) => (
       <TooltipButton {...action} key={action.tooltip?.toString()} />
     )) ?? []),
-    <TaskImplementation
-      key="task-implementation-action"
-      displayName={name}
-      componentSpec={componentSpec}
-      showInlineContent={false}
-    />,
+    <TooltipButton
+      variant="outline"
+      tooltip="View YAML"
+      onClick={() => setIsYamlFullscreen(true)}
+      key="view-yaml-action"
+    >
+      <Icon name="FileCodeCorner" />
+    </TooltipButton>,
   ];
 
   return (
-    <BlockStack className="h-full" data-context-panel="task-overview">
-      <InlineStack gap="2" className="px-2 pb-2">
-        {isSubgraph && <Icon name="Workflow" />}
-        <Text size="lg" weight="semibold">
-          {name}
-        </Text>
-        {canRename && <RenameTask taskId={taskId} />}
-        <ComponentFavoriteToggle component={taskSpec.componentRef} hideDelete />
-        <ComponentDetailsDialog
-          displayName={name}
-          component={taskSpec.componentRef}
-        />
-        {readOnly && <StatusIcon status={status} tooltip label="task" />}
-      </InlineStack>
-
-      <div className="px-4 overflow-y-auto pb-4 h-full w-full">
-        <Tabs defaultValue="io" className="h-full">
-          <TabsList className="mb-2">
-            <TabsTrigger value="io" className="flex-1">
-              {readOnly ? (
-                <AmphoraIcon className="w-4 h-4" />
-              ) : (
-                <Parentheses className="w-4 h-4" />
-              )}
-              {readOnly ? "Artifacts" : "Arguments"}
-            </TabsTrigger>
-            <TabsTrigger value="details" className="flex-1">
-              <InfoIcon className="h-4 w-4" />
-              Details
-            </TabsTrigger>
+    <>
+      <BlockStack className="h-full" data-context-panel="task-overview">
+        <InlineStack gap="2" className="px-2 pb-2">
+          {isSubgraph && <Icon name="Workflow" />}
+          <Text size="lg" weight="semibold">
+            {name}
+          </Text>
+          {canRename && <RenameTask taskId={taskId} />}
+          <ComponentFavoriteToggle
+            component={taskSpec.componentRef}
+            hideDelete
+          />
+          <ComponentDetailsDialog
+            displayName={name}
+            component={taskSpec.componentRef}
+          />
+          {readOnly && <StatusIcon status={status} tooltip label="task" />}
+        </InlineStack>
 
-            {readOnly && !isSubgraph && (
-              <TabsTrigger value="logs" className="flex-1">
-                <LogsIcon className="h-4 w-4" />
-                Logs
+        <div className="px-4 overflow-y-auto pb-4 h-full w-full">
+          <Tabs defaultValue="io" className="h-full">
+            <TabsList className="mb-2">
+              <TabsTrigger value="io" className="flex-1">
+                {readOnly ? (
+                  <AmphoraIcon className="w-4 h-4" />
+                ) : (
+                  <Parentheses className="w-4 h-4" />
+                )}
+                {readOnly ? "Artifacts" : "Arguments"}
               </TabsTrigger>
-            )}
-            {!readOnly && (
-              <TabsTrigger value="configuration" className="flex-1">
-                <FilePenLineIcon className="h-4 w-4" />
-                Configuration
+              <TabsTrigger value="details" className="flex-1">
+                <InfoIcon className="h-4 w-4" />
+                Details
               </TabsTrigger>
-            )}
-          </TabsList>
-          <TabsContent value="details">
-            <TaskDetails
-              displayName={name}
-              executionId={executionId}
-              componentSpec={componentSpec}
-              taskId={taskId}
-              componentDigest={taskSpec.componentRef.digest}
-              url={taskSpec.componentRef.url}
-              onDelete={callbacks.onDelete}
-              status={status}
-              readOnly={readOnly}
-              actions={detailActions}
-            />
-          </TabsContent>
-          <TabsContent value="io">
-            {!readOnly && (
-              <>
-                <ArgumentsSection
-                  taskSpec={taskSpec}
-                  setArguments={callbacks.setArguments}
-                  disabled={disabled}
-                />
-                <hr />
-                <OutputsList taskSpec={taskSpec} />
-              </>
-            )}
-            {readOnly && (
-              <IOSection
-                taskSpec={taskSpec}
-                readOnly={readOnly}
+
+              {readOnly && !isSubgraph && (
+                <TabsTrigger value="logs" className="flex-1">
+                  <LogsIcon className="h-4 w-4" />
+                  Logs
+                </TabsTrigger>
+              )}
+              {!readOnly && (
+                <TabsTrigger value="configuration" className="flex-1">
+                  <FilePenLineIcon className="h-4 w-4" />
+                  Configuration
+                </TabsTrigger>
+              )}
+            </TabsList>
+            <TabsContent value="details">
+              <TaskDetails
+                displayName={name}
                 executionId={executionId}
+                componentSpec={componentSpec}
+                taskId={taskId}
+                componentDigest={taskSpec.componentRef.digest}
+                url={taskSpec.componentRef.url}
+                onDelete={callbacks.onDelete}
+                status={status}
+                readOnly={readOnly}
+                actions={detailActions}
               />
-            )}
-          </TabsContent>
-          {readOnly && !isSubgraph && (
-            <TabsContent value="logs">
-              {!!executionId && (
-                <div className="flex w-full justify-end pr-4">
-                  <OpenLogsInNewWindowLink
-                    executionId={executionId}
-                    status={status}
+            </TabsContent>
+            <TabsContent value="io">
+              {!readOnly && (
+                <>
+                  <ArgumentsSection
+                    taskSpec={taskSpec}
+                    setArguments={callbacks.setArguments}
+                    disabled={disabled}
                   />
-                </div>
+                  <hr />
+                  <OutputsList taskSpec={taskSpec} />
+                </>
+              )}
+              {readOnly && (
+                <IOSection
+                  taskSpec={taskSpec}
+                  readOnly={readOnly}
+                  executionId={executionId}
+                />
               )}
-              <Logs executionId={executionId} status={status} />
-            </TabsContent>
-          )}
-          {!readOnly && (
-            <TabsContent value="configuration">
-              <ConfigurationSection taskNode={taskNode} />
             </TabsContent>
-          )}
-        </Tabs>
-      </div>
-    </BlockStack>
+            {readOnly && !isSubgraph && (
+              <TabsContent value="logs">
+                {!!executionId && (
+                  <div className="flex w-full justify-end pr-4">
+                    <OpenLogsInNewWindowLink
+                      executionId={executionId}
+                      status={status}
+                    />
+                  </div>
+                )}
+                <Logs executionId={executionId} status={status} />
+              </TabsContent>
+            )}
+            {!readOnly && (
+              <TabsContent value="configuration">
+                <ConfigurationSection taskNode={taskNode} />
+              </TabsContent>
+            )}
+          </Tabs>
+        </div>
+      </BlockStack>
+      {isYamlFullscreen && (
+        <CodeViewer
+          code={componentSpecToText(componentSpec)}
+          language="yaml"
+          filename={componentSpec.name ?? "pipeline.yaml"}
+          isFullscreen={isYamlFullscreen}
+          onClose={() => setIsYamlFullscreen(false)}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
index fd028b843..d95d910e2 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
@@ -18,6 +18,9 @@ const LogDisplay = ({
     system_error_exception_full?: string;
   };
 }) => {
+  const [isLogsFullScreen, setIsLogsFullScreen] = useState(false);
+  const [isErrorsFullScreen, setIsErrorsFullScreen] = useState(false);
+
   if (!logs.log_text && !logs.system_error_exception_full) {
     return <div>No logs available</div>;
   }
@@ -36,6 +39,9 @@ const LogDisplay = ({
             code={logs.log_text || ""}
             language="text"
             filename="Execution Logs"
+            isFullscreen={isLogsFullScreen}
+            onClose={() => setIsLogsFullScreen(false)}
+            onExpand={() => setIsLogsFullScreen(true)}
           />
         </div>
       )}
@@ -45,6 +51,9 @@ const LogDisplay = ({
             code={logs.system_error_exception_full || ""}
             language="text"
             filename="System Error Logs"
+            isFullscreen={isErrorsFullScreen}
+            onClose={() => setIsErrorsFullScreen(false)}
+            onExpand={() => setIsErrorsFullScreen(true)}
           />
         </div>
       )}
diff --git a/src/components/shared/TaskDetails/Implementation.tsx b/src/components/shared/TaskDetails/Implementation.tsx
index 1b5ba8199..0e92b7221 100644
--- a/src/components/shared/TaskDetails/Implementation.tsx
+++ b/src/components/shared/TaskDetails/Implementation.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { CodeViewer } from "@/components/shared/CodeViewer";
 import type { ComponentSpec } from "@/utils/componentSpec";
 import { componentSpecToText } from "@/utils/yaml";
@@ -5,14 +7,14 @@ import { componentSpecToText } from "@/utils/yaml";
 interface TaskImplementationProps {
   displayName: string;
   componentSpec: ComponentSpec;
-  showInlineContent?: boolean;
 }
 
 const TaskImplementation = ({
   displayName,
   componentSpec,
-  showInlineContent = true,
 }: TaskImplementationProps) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
   const code = componentSpecToText(componentSpec);
 
   if (!componentSpec?.implementation) {
@@ -28,7 +30,9 @@ const TaskImplementation = ({
       code={code}
       language="yaml"
       filename={displayName}
-      showInlineContent={showInlineContent}
+      isFullscreen={isFullscreen}
+      onClose={() => setIsFullscreen(false)}
+      onExpand={() => setIsFullscreen(true)}
     />
   );
 };