diff --git a/app/(oss)/orchestration/plans/[planId]/page.tsx b/app/(oss)/orchestration/plans/[planId]/page.tsx
index f047c24..c82c34d 100644
--- a/app/(oss)/orchestration/plans/[planId]/page.tsx
+++ b/app/(oss)/orchestration/plans/[planId]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import { Suspense } from 'react';
 import { useParams } from 'next/navigation';
 import { OrchestrationLayout } from '@/app/components/OrchestrationLayout';
 import { PlanDetail } from '@/app/components/PlanDetail';
@@ -11,7 +11,9 @@ export default function PlanDetailPage() {
 
   return (
     <OrchestrationLayout title="Plan Details">
-      <PlanDetail planId={planId} />
+      <Suspense fallback={<div className="p-8 text-center text-gray-500">Loading...</div>}>
+        <PlanDetail planId={planId} />
+      </Suspense>
     </OrchestrationLayout>
   );
 }
\ No newline at end of file
diff --git a/app/(oss)/orchestration/plans/page.tsx b/app/(oss)/orchestration/plans/page.tsx
index ea77c93..c677ce5 100644
--- a/app/(oss)/orchestration/plans/page.tsx
+++ b/app/(oss)/orchestration/plans/page.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import React from 'react';
 import { OrchestrationLayout } from '@/app/components/OrchestrationLayout';
 import { PlanBrowser } from '@/app/components/PlanBrowser';
 
 export default function PlansPage() {
   return (
-    <OrchestrationLayout 
+    <OrchestrationLayout
       title="Workflow Plans"
       description="Browse and manage orchestration workflow plans"
     >
diff --git a/app/(oss)/orchestration/runs/[runId]/page.tsx b/app/(oss)/orchestration/runs/[runId]/page.tsx
index 43bcba2..a06c4a4 100644
--- a/app/(oss)/orchestration/runs/[runId]/page.tsx
+++ b/app/(oss)/orchestration/runs/[runId]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useParams } from 'next/navigation';
 import { OrchestrationLayout } from '@/app/components/OrchestrationLayout';
 import { RunDetail } from '@/app/components/RunDetail';
@@ -11,7 +11,9 @@ export default function RunDetailPage() {
 
   return (
     <OrchestrationLayout title="Run Details">
-      <RunDetail runId={runId} />
+      <Suspense fallback={<div className="p-8 text-center text-gray-500">Loading...</div>}>
+        <RunDetail runId={runId} />
+      </Suspense>
     </OrchestrationLayout>
   );
-}
\ No newline at end of file
+}
diff --git a/app/(oss)/orchestration/runs/page.tsx b/app/(oss)/orchestration/runs/page.tsx
index 1b03902..f55e782 100644
--- a/app/(oss)/orchestration/runs/page.tsx
+++ b/app/(oss)/orchestration/runs/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { OrchestrationLayout } from '@/app/components/OrchestrationLayout';
 import { RunBrowser } from '@/app/components/RunBrowser';
@@ -9,16 +9,16 @@ import { parseScope } from '@/app/lib/scope';
 
 function RunsPageContent() {
   const searchParams = useSearchParams();
-  
+
   // Parse initial query from URL parameters
   const initialQuery: Partial<RunQuery> = {};
-  
+
   const statusParam = searchParams.get('status') || searchParams.get('statuses');
   if (statusParam) {
     const statuses = statusParam.split(',') as RunStatus[];
     initialQuery.statuses = statuses;
   }
-  
+
   const planIdParam = searchParams.get('planId') || searchParams.get('planIds');
   if (planIdParam) {
     initialQuery.planIds = planIdParam.split(',').filter(Boolean);
@@ -37,7 +37,7 @@ function RunsPageContent() {
   const service = searchParams.get('service');
   const environment = searchParams.get('environment');
   const team = searchParams.get('team');
-  
+
   if (parsedScope) {
     initialQuery.scope = parsedScope;
   } else if (service || environment || team) {
@@ -53,7 +53,7 @@ function RunsPageContent() {
 
 export default function RunsPage() {
   return (
-    <OrchestrationLayout 
+    <OrchestrationLayout
       title="Workflow Runs"
       description="Browse and monitor orchestration workflow runs"
     >
diff --git a/app/components/RunDetail.tsx b/app/components/RunDetail.tsx
index ce8f859..a20ba32 100644
--- a/app/components/RunDetail.tsx
+++ b/app/components/RunDetail.tsx
@@ -169,12 +169,12 @@ export function RunDetail({ runId }: RunDetailProps) {
   return (
     <div className="space-y-6">
       {/* Run Header */}
-      <div className="bg-white shadow rounded-lg p-4">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-center gap-3 mb-4">
+      <div className="bg-white shadow rounded-lg p-6">
+        <div className="grid gap-4 md:grid-cols-[1fr_auto] md:items-start">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
               <h1 className="text-2xl font-bold text-gray-900">
-                Run {run.id}
+                {plan?.title ?? `Run ${run.id}`}
               </h1>
               <span
                 className={`
@@ -186,74 +186,100 @@ export function RunDetail({ runId }: RunDetailProps) {
               </span>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 text-sm">
-              <div>
-                <span className="font-medium text-gray-500">Plan:</span>
-                <div className="text-gray-900">{run.planId}</div>
-              </div>
-              <div>
-                <span className="font-medium text-gray-500">Progress:</span>
-                <div className="text-gray-900">
-                  {progress.completed}/{progress.total} steps ({progress.percentage}%)
-                </div>
-              </div>
-              <div>
-                <span className="font-medium text-gray-500">Created:</span>
-                <div className="text-gray-900">{formatDate(run.createdAt)}</div>
-              </div>
-              <div>
-                <span className="font-medium text-gray-500">Updated:</span>
-                <div className="text-gray-900">{formatDate(run.updatedAt)}</div>
-              </div>
-              {plan?.url && (
-                <div>
-                  <span className="font-medium text-gray-500">Workflow:</span>
-                  <a
-                    href={plan.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="ml-2 inline-flex items-center gap-1 rounded-lg border border-[#8fdede] bg-white px-2 py-1 text-xs font-medium text-[#0f1a1d] transition hover:border-[#55cfd0] hover:text-[#0b1517]"
-                  >
-                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                    </svg>
-                    Open plan in Tool
-                  </a>
-                </div>
-              )}
-            </div>
+            {plan?.description && (
+              <p className="text-gray-600 mb-3">
+                {plan.description}
+              </p>
+            )}
 
-            {/* Progress Bar */}
-            <div className="mt-4">
-              <div className="w-full bg-gray-200 rounded-full h-3">
-                <div
-                  className={`h-3 rounded-full transition-all duration-300 ${run.status === 'completed' ? 'bg-green-500' :
-                      run.status === 'failed' ? 'bg-red-500' :
-                        run.status === 'blocked' ? 'bg-amber-500' :
-                          'bg-blue-500'
-                    }`}
-                  style={{ width: `${progress.percentage}%` }}
-                />
-              </div>
+            <div className="text-sm text-gray-500">
+              <span className="font-medium text-gray-500">Run Id:</span>{' '}
+              <span className="font-mono text-[11px] text-gray-600">{run.id}</span>
             </div>
+          </div>
 
+          <div className="md:justify-self-end flex flex-wrap items-center gap-2">
+            <a
+              href={`/orchestration/plans/${run.planId}`}
+              className="inline-flex items-center gap-1 rounded-lg border border-[#8fdede] bg-white px-2 py-1 text-xs font-medium text-[#0f1a1d] transition hover:border-[#55cfd0] hover:text-[#0b1517]"
+            >
+              View plan
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </a>
+            {plan?.url && (
+              <a
+                href={plan.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 rounded-lg border border-[#8fdede] bg-white px-2 py-1 text-xs font-medium text-[#0f1a1d] transition hover:border-[#55cfd0] hover:text-[#0b1517]"
+              >
+                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+                Open plan in Tool
+              </a>
+            )}
             {run.url && (
-              <div className="mt-4">
-                <a
-                  href={run.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 rounded-lg border border-[#8fdede] bg-white px-2 py-1 text-xs font-medium text-[#0f1a1d] transition hover:border-[#55cfd0] hover:text-[#0b1517]"
-                >
-                  <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                  </svg>
-                  Open run in Tool
-                </a>
+              <a
+                href={run.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 rounded-lg border border-[#8fdede] bg-white px-2 py-1 text-xs font-medium text-[#0f1a1d] transition hover:border-[#55cfd0] hover:text-[#0b1517]"
+              >
+                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+                Open run in Tool
+              </a>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-end gap-4 text-sm text-gray-500 md:col-span-2">
+            <div>
+              <span className="font-medium">Plan:</span> {run.planId}
+            </div>
+            <div>
+              <span className="font-medium">Progress:</span> {progress.completed}/{progress.total} steps ({progress.percentage}%)
+            </div>
+            <div>
+              <span className="font-medium">Created:</span> {formatDate(run.createdAt)}
+            </div>
+            <div>
+              <span className="font-medium">Updated:</span> {formatDate(run.updatedAt)}
+            </div>
+            {plan?.version && (
+              <div>
+                <span className="font-medium">Version:</span> {plan.version}
+              </div>
+            )}
+            {plan && Object.keys(plan.tags).length > 0 && (
+              <div>
+                <span className="font-medium">Tags:</span>{' '}
+                {Object.entries(plan.tags).map(([key, value]) => (
+                  <span key={key} className="inline-block bg-gray-100 rounded px-2 py-1 text-xs mr-1">
+                    {key}: {value}
+                  </span>
+                ))}
               </div>
             )}
           </div>
         </div>
+
+        {/* Progress Bar */}
+        <div className="mt-4">
+          <div className="w-full bg-gray-200 rounded-full h-3">
+            <div
+              className={`h-3 rounded-full transition-all duration-300 ${run.status === 'completed' ? 'bg-green-500' :
+                  run.status === 'failed' ? 'bg-red-500' :
+                    run.status === 'blocked' ? 'bg-amber-500' :
+                      'bg-blue-500'
+                }`}
+              style={{ width: `${progress.percentage}%` }}
+            />
+          </div>
+        </div>
       </div>
 
       {/* Workflow Visualizer */}