diff --git a/app-next/src/app/[locale]/(explore)/benchmarks/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/benchmarks/[id]/page.tsx
index 63c32a1e..ab802aa0 100644
--- a/app-next/src/app/[locale]/(explore)/benchmarks/[id]/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/benchmarks/[id]/page.tsx
@@ -1,47 +1,17 @@
 import { Metadata } from "next";
 import { setRequestLocale } from "next-intl/server";
 import { notFound } from "next/navigation";
-import {
-  Award,
-  Database,
-  GitBranch,
-  Zap,
-  Calendar,
-  User,
-} from "lucide-react";
-import { getElasticsearchUrl } from "@/lib/elasticsearch";
+import { Database, Flag, Calendar, User } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { entityColors, ENTITY_ICONS } from "@/constants";
 import { Card, CardContent } from "@/components/ui/card";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { BenchmarkDatasetsSection } from "@/components/benchmark/benchmark-datasets-section";
+import { BenchmarkTasksSection } from "@/components/benchmark/benchmark-tasks-section";
+import { BenchmarkNavigationMenu } from "@/components/benchmark/benchmark-navigation-menu";
 import Link from "next/link";
-
-interface StudyData {
-  study_id: number;
-  study_type: string;
-  name: string;
-  description?: string;
-  uploader?: string;
-  uploader_id?: number;
-  date?: string;
-  datasets_included?: number;
-  tasks_included?: number;
-  flows_included?: number;
-  runs_included?: number;
-}
-
-async function fetchStudy(id: string): Promise<StudyData> {
-  const url = getElasticsearchUrl(`study/_doc/${id}`);
-  const res = await fetch(url, { next: { revalidate: 3600 } });
-
-  if (!res.ok) {
-    throw new Error(`Benchmark ${id} not found`);
-  }
-
-  const data = await res.json();
-  if (!data.found || !data._source) {
-    throw new Error(`Benchmark ${id} not found`);
-  }
-
-  return data._source as StudyData;
-}
+import { fetchStudy } from "@/lib/api/study";
+import type { StudyData } from "@/lib/api/study";
 
 export async function generateMetadata({
   params,
@@ -52,8 +22,7 @@ export async function generateMetadata({
 
   try {
     const study = await fetchStudy(id);
-    const typeLabel =
-      study.study_type === "task" ? "Task Suite" : "Run Study";
+    const typeLabel = study.study_type === "task" ? "Task Suite" : "Run Study";
 
     return {
       title: `${study.name} - ${typeLabel} - OpenML Benchmarks`,
@@ -90,37 +59,50 @@ export default async function BenchmarkDetailPage({
     notFound();
   }
 
-  const typeLabel =
-    study.study_type === "task" ? "Task Suite" : "Run Study";
+  const typeLabel = study.study_type === "task" ? "Task Suite" : "Run Study";
 
   const entityCounts = [
     {
       label: "Datasets",
       count: study.datasets_included || 0,
       icon: Database,
-      color: "text-green-600",
-      href: `/datasets?q=study_${id}`,
+      color: entityColors.data,
     },
     {
       label: "Tasks",
       count: study.tasks_included || 0,
-      icon: Award,
-      color: "text-blue-600",
-      href: `/tasks?q=study_${id}`,
+      icon: Flag,
+      color: entityColors.task,
     },
     {
       label: "Flows",
       count: study.flows_included || 0,
-      icon: GitBranch,
-      color: "text-orange-600",
-      href: `/flows?q=study_${id}`,
+      icon: (props: React.HTMLAttributes<HTMLElement>) => (
+        <FontAwesomeIcon
+          icon={ENTITY_ICONS.flow}
+          className={props.className}
+          style={
+            props.style as React.CSSProperties &
+              Record<`--fa-font-${string}`, string>
+          }
+        />
+      ),
+      color: entityColors.flow,
     },
     {
       label: "Runs",
       count: study.runs_included || 0,
-      icon: Zap,
-      color: "text-purple-600",
-      href: `/runs?q=study_${id}`,
+      icon: (props: React.HTMLAttributes<HTMLElement>) => (
+        <FontAwesomeIcon
+          icon={ENTITY_ICONS.run}
+          className={props.className}
+          style={
+            props.style as React.CSSProperties &
+              Record<`--fa-font-${string}`, string>
+          }
+        />
+      ),
+      color: entityColors.run,
     },
   ];
 
@@ -130,14 +112,26 @@ export default async function BenchmarkDetailPage({
         {/* Header */}
         <div className="mb-8">
           <div className="mb-4 flex items-center gap-2">
-            <span className="rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
+            <span
+              className="rounded-full px-3 py-1 text-xs font-medium text-white"
+              style={{ backgroundColor: entityColors.benchmarks }}
+            >
               {typeLabel}
             </span>
             <span className="text-muted-foreground text-sm">#{id}</span>
           </div>
 
           <h1 className="mb-4 flex items-center gap-3 text-3xl font-bold tracking-tight">
-            <Award className="h-8 w-8 text-amber-600" aria-hidden="true" />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.benchmark}
+              className="h-8 w-8"
+              style={{
+                color: entityColors.benchmarks,
+                height: "2rem",
+                width: "2rem",
+              }}
+              aria-hidden={true}
+            />
             {study.name}
           </h1>
 
@@ -166,11 +160,12 @@ export default async function BenchmarkDetailPage({
 
         {/* Entity counts grid */}
         <div className="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
-          {entityCounts.map(({ label, count, icon: Icon, color, href }) => (
-            <Link key={label} href={href}>
-              <Card className="hover:border-primary/50 transition-colors">
+          {entityCounts
+            .filter((e) => e.count > 0)
+            .map(({ label, count, icon: Icon, color }) => (
+              <Card key={label}>
                 <CardContent className="flex items-center gap-3 pt-6">
-                  <Icon className={`h-5 w-5 ${color}`} />
+                  <Icon className="h-5 w-5" style={{ color }} />
                   <div>
                     <p className="text-2xl font-bold">
                       {Number(count).toLocaleString()}
@@ -179,21 +174,59 @@ export default async function BenchmarkDetailPage({
                   </div>
                 </CardContent>
               </Card>
-            </Link>
-          ))}
+            ))}
         </div>
 
-        {/* Description */}
-        {study.description && (
-          <Card>
-            <CardContent className="pt-6">
-              <h2 className="mb-4 text-xl font-semibold">Description</h2>
-              <div className="text-muted-foreground prose dark:prose-invert max-w-none whitespace-pre-wrap">
-                {study.description}
-              </div>
-            </CardContent>
-          </Card>
-        )}
+        {/* Content with Sidebar Navigation */}
+        <div className="relative flex gap-8">
+          {/* Left: Main Content */}
+          <div className="min-w-0 flex-1 space-y-6">
+            {/* Description */}
+            {study.description && (
+              <section id="description" className="scroll-mt-20">
+                <CollapsibleSection
+                  title="Description"
+                  icon={
+                    <FontAwesomeIcon
+                      icon={ENTITY_ICONS.benchmark}
+                      className="h-4 w-4"
+                      style={{
+                        color: entityColors.benchmarks,
+                        height: "1rem",
+                        width: "1rem",
+                      }}
+                    />
+                  }
+                  defaultOpen={true}
+                >
+                  <div
+                    className="text-muted-foreground prose dark:prose-invert max-w-none"
+                    dangerouslySetInnerHTML={{ __html: study.description }}
+                  />
+                </CollapsibleSection>
+              </section>
+            )}
+
+            {/* Datasets Section */}
+            <BenchmarkDatasetsSection
+              studyId={id}
+              totalCount={study.datasets_included || 0}
+            />
+
+            {/* Tasks Section */}
+            <BenchmarkTasksSection
+              studyId={id}
+              totalCount={study.tasks_included || 0}
+            />
+          </div>
+
+          {/* Right: Navigation Menu */}
+          <BenchmarkNavigationMenu
+            datasetsCount={study.datasets_included || 0}
+            tasksCount={study.tasks_included || 0}
+            basePath="/benchmarks"
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/app-next/src/app/[locale]/(explore)/benchmarks/page.tsx b/app-next/src/app/[locale]/(explore)/benchmarks/page.tsx
index ee85fc1c..9f13ca02 100644
--- a/app-next/src/app/[locale]/(explore)/benchmarks/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/benchmarks/page.tsx
@@ -1,4 +1,10 @@
 import { redirect } from "next/navigation";
-export default function BenchmarksPage() {
-  redirect("/benchmarks/tasks");
+
+export default async function BenchmarksPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const { q } = await searchParams;
+  redirect(q ? `/benchmarks/tasks?q=${encodeURIComponent(q)}` : "/benchmarks/tasks");
 }
diff --git a/app-next/src/app/[locale]/(explore)/collections/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/collections/[id]/page.tsx
index 3fd15027..4154970e 100644
--- a/app-next/src/app/[locale]/(explore)/collections/[id]/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/collections/[id]/page.tsx
@@ -1,49 +1,18 @@
 import { Metadata } from "next";
 import { setRequestLocale } from "next-intl/server";
 import { notFound } from "next/navigation";
-import {
-  Layers,
-  Database,
-  Award,
-  GitBranch,
-  Zap,
-  Calendar,
-  User,
-} from "lucide-react";
-import { getElasticsearchUrl } from "@/lib/elasticsearch";
+import { Layers, Database, Flag, Calendar, User } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { entityColors, ENTITY_ICONS } from "@/constants";
 import { Card, CardContent } from "@/components/ui/card";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { CollectionDatasetsSection } from "@/components/collection/collection-datasets-section";
+import { CollectionTasksSection } from "@/components/collection/collection-tasks-section";
+import { CollectionNavigationMenu } from "@/components/collection/collection-navigation-menu";
+import { EntityActionsMenu } from "@/components/ui/entity-actions-menu";
 import Link from "next/link";
-
-interface StudyData {
-  study_id: number;
-  study_type: string;
-  name: string;
-  description?: string;
-  uploader?: string;
-  uploader_id?: number;
-  date?: string;
-  visibility?: string;
-  datasets_included?: number;
-  tasks_included?: number;
-  flows_included?: number;
-  runs_included?: number;
-}
-
-async function fetchStudy(id: string): Promise<StudyData> {
-  const url = getElasticsearchUrl(`study/_doc/${id}`);
-  const res = await fetch(url, { next: { revalidate: 3600 } });
-
-  if (!res.ok) {
-    throw new Error(`Study ${id} not found`);
-  }
-
-  const data = await res.json();
-  if (!data.found || !data._source) {
-    throw new Error(`Study ${id} not found`);
-  }
-
-  return data._source as StudyData;
-}
+import { fetchStudy } from "@/lib/api/study";
+import type { StudyData } from "@/lib/api/study";
 
 export async function generateMetadata({
   params,
@@ -60,8 +29,7 @@ export async function generateMetadata({
     return {
       title: `${study.name} - ${typeLabel} - OpenML`,
       description:
-        study.description?.substring(0, 160) ||
-        `OpenML ${typeLabel} #${id}`,
+        study.description?.substring(0, 160) || `OpenML ${typeLabel} #${id}`,
       openGraph: {
         title: `${study.name} - ${typeLabel}`,
         description: `OpenML Collection #${id}: ${study.name}`,
@@ -100,29 +68,29 @@ export default async function CollectionDetailPage({
       label: "Datasets",
       count: study.datasets_included || 0,
       icon: Database,
-      color: "text-green-600",
-      href: `/datasets?q=study_${id}`,
+      color: entityColors.data,
     },
     {
       label: "Tasks",
       count: study.tasks_included || 0,
-      icon: Award,
-      color: "text-blue-600",
-      href: `/tasks?q=study_${id}`,
+      icon: Flag,
+      color: entityColors.task,
     },
     {
       label: "Flows",
       count: study.flows_included || 0,
-      icon: GitBranch,
-      color: "text-orange-600",
-      href: `/flows?q=study_${id}`,
+      icon: (props: any) => (
+        <FontAwesomeIcon icon={ENTITY_ICONS.flow} {...props} />
+      ),
+      color: entityColors.flow,
     },
     {
       label: "Runs",
       count: study.runs_included || 0,
-      icon: Zap,
-      color: "text-purple-600",
-      href: `/runs?q=study_${id}`,
+      icon: (props: any) => (
+        <FontAwesomeIcon icon={ENTITY_ICONS.run} {...props} />
+      ),
+      color: entityColors.run,
     },
   ];
 
@@ -132,16 +100,30 @@ export default async function CollectionDetailPage({
         {/* Header */}
         <div className="mb-8">
           <div className="mb-4 flex items-center gap-2">
-            <span className="bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 rounded-full px-3 py-1 text-xs font-medium">
+            <span
+              className="rounded-full px-3 py-1 text-xs font-medium text-white"
+              style={{ backgroundColor: entityColors.collections }}
+            >
               {typeLabel}
             </span>
             <span className="text-muted-foreground text-sm">#{id}</span>
           </div>
 
-          <h1 className="mb-4 flex items-center gap-3 text-3xl font-bold tracking-tight">
-            <Layers className="h-8 w-8 text-indigo-600" aria-hidden="true" />
-            {study.name}
-          </h1>
+          <div className="mb-4 flex items-start justify-between gap-4">
+            <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight">
+              <Layers
+                className="h-8 w-8"
+                style={{ color: entityColors.collections }}
+                aria-hidden="true"
+              />
+              {study.name}
+            </h1>
+            <EntityActionsMenu
+              entityType="collection"
+              entityId={id}
+              entityName={study.name}
+            />
+          </div>
 
           <div className="text-muted-foreground flex flex-wrap gap-x-6 gap-y-2 text-sm">
             {study.uploader && (
@@ -168,11 +150,12 @@ export default async function CollectionDetailPage({
 
         {/* Entity counts grid */}
         <div className="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
-          {entityCounts.map(({ label, count, icon: Icon, color, href }) => (
-            <Link key={label} href={href}>
-              <Card className="hover:border-primary/50 transition-colors">
+          {entityCounts
+            .filter((e) => e.count > 0)
+            .map(({ label, count, icon: Icon, color }) => (
+              <Card key={label}>
                 <CardContent className="flex items-center gap-3 pt-6">
-                  <Icon className={`h-5 w-5 ${color}`} />
+                  <Icon className="h-5 w-5" style={{ color }} />
                   <div>
                     <p className="text-2xl font-bold">
                       {Number(count).toLocaleString()}
@@ -181,21 +164,54 @@ export default async function CollectionDetailPage({
                   </div>
                 </CardContent>
               </Card>
-            </Link>
-          ))}
+            ))}
         </div>
 
-        {/* Description */}
-        {study.description && (
-          <Card>
-            <CardContent className="pt-6">
-              <h2 className="mb-4 text-xl font-semibold">Description</h2>
-              <div className="text-muted-foreground prose dark:prose-invert max-w-none whitespace-pre-wrap">
-                {study.description}
-              </div>
-            </CardContent>
-          </Card>
-        )}
+        {/* Content with Sidebar Navigation */}
+        <div className="relative flex gap-8">
+          {/* Left: Main Content */}
+          <div className="min-w-0 flex-1 space-y-6">
+            {/* Description */}
+            {study.description && (
+              <section id="description" className="scroll-mt-20">
+                <CollapsibleSection
+                  title="Description"
+                  icon={
+                    <Layers
+                      className="h-4 w-4"
+                      style={{ color: entityColors.collections }}
+                    />
+                  }
+                  defaultOpen={true}
+                >
+                  <div
+                    className="text-muted-foreground prose dark:prose-invert max-w-none"
+                    dangerouslySetInnerHTML={{ __html: study.description }}
+                  />
+                </CollapsibleSection>
+              </section>
+            )}
+
+            {/* Datasets Section */}
+            <CollectionDatasetsSection
+              studyId={id}
+              totalCount={study.datasets_included || 0}
+            />
+
+            {/* Tasks Section */}
+            <CollectionTasksSection
+              studyId={id}
+              totalCount={study.tasks_included || 0}
+            />
+          </div>
+
+          {/* Right: Navigation Menu */}
+          <CollectionNavigationMenu
+            datasetsCount={study.datasets_included || 0}
+            tasksCount={study.tasks_included || 0}
+            basePath="/collections"
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/app-next/src/app/[locale]/(explore)/collections/create/page.tsx b/app-next/src/app/[locale]/(explore)/collections/create/page.tsx
new file mode 100644
index 00000000..ed1261d1
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/collections/create/page.tsx
@@ -0,0 +1,40 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { CollectionCreateForm } from "@/components/collection/collection-create-form";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create Collection | OpenML",
+  description: "Create a new benchmark collection of tasks on OpenML.",
+};
+
+export default async function CollectionCreatePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect(
+      `/${locale}/auth/sign-in?reason=createCollection&callbackUrl=/${locale}/collections/create`,
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-8 text-center">
+        <h1 className="text-primary text-3xl font-bold tracking-tight sm:text-4xl">
+          Create Collection
+        </h1>
+        <p className="text-muted-foreground mt-4 text-lg">
+          Create a new collection (benchmark suite) of tasks.
+        </p>
+      </div>
+
+      <CollectionCreateForm />
+    </div>
+  );
+}
diff --git a/app-next/src/app/[locale]/(explore)/collections/page.tsx b/app-next/src/app/[locale]/(explore)/collections/page.tsx
index 78e4ecfd..015fb788 100644
--- a/app-next/src/app/[locale]/(explore)/collections/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/collections/page.tsx
@@ -1,4 +1,10 @@
 import { redirect } from "next/navigation";
-export default function CollectionsPage() {
-  redirect("/collections/tasks");
+
+export default async function CollectionsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const { q } = await searchParams;
+  redirect(q ? `/collections/tasks?q=${encodeURIComponent(q)}` : "/collections/tasks");
 }
diff --git a/app-next/src/app/[locale]/(explore)/datasets/[id]/edit/page.tsx b/app-next/src/app/[locale]/(explore)/datasets/[id]/edit/page.tsx
index 0154c364..ad5a1f27 100644
--- a/app-next/src/app/[locale]/(explore)/datasets/[id]/edit/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/datasets/[id]/edit/page.tsx
@@ -30,14 +30,22 @@ export default async function DatasetEditPage({
   // Auth check — redirect to sign-in if not authenticated
   const session = await getServerSession(authOptions);
   if (!session?.user) {
-    redirect(`/auth/signin?callbackUrl=/datasets/${id}/edit`);
+    redirect(`/${locale}/auth/sign-in?reason=uploadDataset&callbackUrl=/${locale}/datasets/${id}/edit`);
   }
 
   const dataset = await fetchDataset(id);
 
   // Determine if current user is the dataset owner
-  const userId = (session.user as { id?: string }).id;
-  const isOwner = userId ? Number(userId) === dataset.uploader_id : false;
+  // Prefer real OpenML user ID (resolves local dev ID mismatch)
+  const sessionUser = session.user as { id?: string; openmlUserId?: string };
+  const effectiveUserId = sessionUser.openmlUserId ?? sessionUser.id;
+  const isOwner = effectiveUserId ? Number(effectiveUserId) === dataset.uploader_id : false;
+
+  // Check whether the session has a valid OpenML API key
+  const hasApiKey = !!(session as { apikey?: string }).apikey;
+  // OAuth users created in local dev environments don't have a real OpenML API key
+  const isLocalUser =
+    (session.user as { isLocalUser?: boolean }).isLocalUser ?? false;
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
@@ -45,6 +53,9 @@ export default async function DatasetEditPage({
         datasetId={dataset.data_id}
         datasetName={dataset.name}
         isOwner={isOwner}
+        hasApiKey={hasApiKey}
+        isLocalUser={isLocalUser}
+        initialTags={(dataset.tags ?? []).map((t) => t.tag)}
         initialValues={{
           description: dataset.description || "",
           creator: dataset.creator || "",
diff --git a/app-next/src/app/[locale]/(explore)/datasets/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/datasets/[id]/page.tsx
index 212cb87b..ef678724 100644
--- a/app-next/src/app/[locale]/(explore)/datasets/[id]/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/datasets/[id]/page.tsx
@@ -1,5 +1,7 @@
 import { Metadata } from "next";
 import { setRequestLocale } from "next-intl/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { BarChart3 } from "lucide-react";
 import {
   fetchDataset,
@@ -9,7 +11,6 @@ import {
 import { DatasetHeader } from "@/components/dataset/dataset-header-new";
 import { DatasetDescription } from "@/components/dataset/dataset-description";
 import { QualityTable } from "@/components/dataset/quality-table";
-import { DatasetNavigationMenu } from "@/components/dataset/dataset-navigation-menu";
 import { CollapsibleSection } from "@/components/ui/collapsible-section";
 import { DataAnalysisSection } from "@/components/dataset/data-analysis-section";
 import { MetadataSection } from "@/components/dataset/metadata-section";
@@ -17,6 +18,9 @@ import { ActivityOverview } from "@/components/dataset/activity-overview";
 import { DataDetailSection } from "@/components/dataset/data-detail-section";
 import { TasksSection } from "@/components/dataset/tasks-section";
 import { RunsSection } from "@/components/dataset/runs-section";
+import { WorkspaceSetter } from "@/components/workspace/workspace-setter";
+import { WorkspaceInlinePanel } from "@/components/workspace/workspace-inline-panel";
+import { entityColors } from "@/constants";
 
 export async function generateMetadata({
   params,
@@ -128,12 +132,18 @@ export default async function DatasetDetailPage({
   const { locale, id } = await params;
   setRequestLocale(locale);
 
-  const [dataset, taskCount, runCount] = await Promise.all([
+  const [dataset, taskCount, runCount, session] = await Promise.all([
     fetchDataset(id),
     fetchDatasetTaskCount(id),
     fetchDatasetRunCount(id),
+    getServerSession(authOptions),
   ]);
 
+  const sessionUser = session?.user as { id?: string; openmlUserId?: string } | undefined;
+  // Prefer the real OpenML user ID (resolves local dev ID mismatch)
+  const effectiveUserId = sessionUser?.openmlUserId ?? sessionUser?.id;
+  const isOwner = effectiveUserId ? Number(effectiveUserId) === dataset.uploader_id : false;
+
   // If dataset is deactivated, show notice
   if (dataset.status === "deactivated") {
     return (
@@ -154,16 +164,82 @@ export default async function DatasetDetailPage({
     <div className="relative min-h-screen">
       {/* Main Content */}
       <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8">
+        {/* Push context to the persistent workspace panel */}
+        <WorkspaceSetter
+          entity={{
+            type: "dataset",
+            id: dataset.data_id,
+            title: dataset.name,
+            subtitle: `${dataset.qualities?.NumberOfInstances?.toLocaleString() || "?"} instances · ${dataset.qualities?.NumberOfFeatures?.toLocaleString() || "?"} features`,
+            url: `/datasets/${id}`,
+            color: entityColors.data,
+          }}
+          sections={[
+            { id: "description", label: "Description", iconName: "FileText" },
+            ...(dataset.features && dataset.features.length > 0
+              ? [
+                  {
+                    id: "data-analysis",
+                    label: `Data & Analysis`,
+                    iconName: "Database",
+                    count: dataset.features.length,
+                  },
+                ]
+              : []),
+            { id: "metadata", label: "Metadata", iconName: "Tags" },
+            { id: "activity", label: "Activity", iconName: "LineChart" },
+            { id: "data-detail", label: "Data Detail", iconName: "Database" },
+            {
+              id: "tasks",
+              label: "Tasks",
+              iconName: "ExternalLink",
+              count: taskCount,
+            },
+            {
+              id: "runs",
+              label: "Runs",
+              iconName: "ExternalLink",
+              count: runCount,
+            },
+            ...(dataset.qualities && Object.keys(dataset.qualities).length > 0
+              ? [
+                  {
+                    id: "qualities",
+                    label: "Qualities",
+                    iconName: "BarChart3",
+                    count: Object.keys(dataset.qualities).length,
+                  },
+                ]
+              : []),
+          ]}
+          quickLinks={[
+            ...(dataset.data_id
+              ? [
+                  {
+                    label: `Tasks on this dataset`,
+                    href: `/tasks?data_id=${dataset.data_id}`,
+                    iconName: "ExternalLink",
+                  },
+                  {
+                    label: `Runs on this dataset`,
+                    href: `/runs?data_id=${dataset.data_id}`,
+                    iconName: "ExternalLink",
+                  },
+                ]
+              : []),
+          ]}
+        />
+
         {/* Header: Full Width - Name, stats, actions */}
         <DatasetHeader
           dataset={dataset}
           taskCount={taskCount}
           runCount={runCount}
+          isAuthenticated={!!session?.user}
         />
 
-        {/* Content with Sidebar - Below Header */}
-        <div className="relative mt-6 flex min-h-screen gap-8">
-          {/* Left: Main Content */}
+        {/* Main Content + Inline Panel */}
+        <div className="mt-6 flex gap-8">
           <div className="min-w-0 flex-1 space-y-6">
             {/* Description: Primary content */}
             <section id="description" className="scroll-mt-20">
@@ -204,18 +280,7 @@ export default async function DatasetDetailPage({
               </CollapsibleSection>
             )}
           </div>
-
-          {/* Right: Navigation Menu - Responsive */}
-          <DatasetNavigationMenu
-            hasFeatures={dataset.features && dataset.features.length > 0}
-            hasQualities={
-              dataset.qualities && Object.keys(dataset.qualities).length > 0
-            }
-            featuresCount={dataset.features?.length || 0}
-            taskCount={taskCount}
-            runCount={runCount}
-            dataId={dataset.data_id}
-          />
+          <WorkspaceInlinePanel />
         </div>
       </div>
     </div>
diff --git a/app-next/src/app/[locale]/(explore)/datasets/upload/page.tsx b/app-next/src/app/[locale]/(explore)/datasets/upload/page.tsx
new file mode 100644
index 00000000..9626256b
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/datasets/upload/page.tsx
@@ -0,0 +1,42 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { DatasetUploadForm } from "@/components/dataset/dataset-upload-form";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Upload Dataset | OpenML",
+  description:
+    "Upload and share a machine learning dataset with the OpenML community.",
+};
+
+export default async function DatasetUploadPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect(
+      `/${locale}/auth/sign-in?reason=uploadDataset&callbackUrl=/${locale}/datasets/upload`,
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-8 text-center">
+        <h1 className="text-primary text-3xl font-bold tracking-tight sm:text-4xl">
+          Upload Dataset
+        </h1>
+        <p className="text-muted-foreground mt-4 text-lg">
+          Contribute data to the OpenML community. Make sure your data is
+          machine-readable and properly formatted.
+        </p>
+      </div>
+
+      <DatasetUploadForm />
+    </div>
+  );
+}
diff --git a/app-next/src/app/[locale]/(explore)/flows/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/flows/[id]/page.tsx
index 7c810016..3aafa4a8 100644
--- a/app-next/src/app/[locale]/(explore)/flows/[id]/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/flows/[id]/page.tsx
@@ -1,13 +1,9 @@
 import { setRequestLocale } from "next-intl/server";
 import { notFound } from "next/navigation";
-import {
-  FileText,
-  Settings2,
-  List,
-  Cog,
-  History,
-  BarChart3,
-} from "lucide-react";
+import type { Metadata } from "next";
+import { FileText, Settings2, List, History, BarChart3 } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS } from "@/constants/entityIcons";
 import { getFlow, fetchFlowRunCount, fetchFlowVersions } from "@/lib/api/flow";
 import { FlowHeader } from "@/components/flow/flow-header";
 import { FlowDescriptionSection } from "@/components/flow/flow-description-section";
@@ -17,8 +13,45 @@ import { FlowDependenciesSection } from "@/components/flow/flow-dependencies-sec
 import { FlowAnalysisSection } from "@/components/flow/flow-analysis-section";
 import { FlowVersionsSection } from "@/components/flow/flow-versions-section";
 import { FlowRunsList } from "@/components/flow/flow-runs-list";
-import { FlowNavigationMenu } from "@/components/flow/flow-navigation-menu";
 import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { WorkspaceSetter } from "@/components/workspace/workspace-setter";
+import { WorkspaceInlinePanel } from "@/components/workspace/workspace-inline-panel";
+import { entityColors } from "@/constants";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const flowId = parseInt(id, 10);
+
+  if (isNaN(flowId)) {
+    return {
+      title: "Flow Not Found | OpenML",
+    };
+  }
+
+  try {
+    const flow = await getFlow(flowId);
+    if (!flow) {
+      return {
+        title: "Flow Not Found | OpenML",
+      };
+    }
+
+    return {
+      title: `${flow.name} (Flow ${flow.flow_id}) | OpenML`,
+      description: flow.description
+        ? flow.description.replace(/<[^>]*>/g, "").substring(0, 160)
+        : `Details for OpenML Flow ${flow.name}.`,
+    };
+  } catch (error) {
+    return {
+      title: "Error | OpenML",
+    };
+  }
+}
 
 export default async function FlowDetailPage({
   params,
@@ -53,116 +86,184 @@ export default async function FlowDetailPage({
     <div className="relative min-h-screen">
       {/* Main Content */}
       <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8">
+        {/* Push context to the persistent workspace panel */}
+        <WorkspaceSetter
+          entity={{
+            type: "flow",
+            id: flow.flow_id,
+            title: flow.name,
+            subtitle: `Flow #${flow.flow_id}`,
+            url: `/flows/${flow.flow_id}`,
+            color: entityColors.flow,
+          }}
+          sections={[
+            { id: "description", label: "Description", iconName: "FileText" },
+            ...(runCount > 0
+              ? [{ id: "analysis", label: "Analyse", iconName: "BarChart3" }]
+              : []),
+            ...(flow.dependencies
+              ? [
+                  {
+                    id: "dependencies",
+                    label: "Dependencies",
+                    iconName: "Layers",
+                  },
+                ]
+              : []),
+            ...(parametersCount > 0
+              ? [
+                  {
+                    id: "parameters",
+                    label: "Parameters",
+                    iconName: "Settings2",
+                    count: parametersCount,
+                  },
+                ]
+              : []),
+            ...(componentsCount > 0
+              ? [
+                  {
+                    id: "components",
+                    label: "Components",
+                    iconName: "Layers",
+                    count: componentsCount,
+                  },
+                ]
+              : []),
+            ...(versionsCount > 1
+              ? [
+                  {
+                    id: "versions",
+                    label: "Versions",
+                    iconName: "ExternalLink",
+                    count: versionsCount,
+                  },
+                ]
+              : []),
+            {
+              id: "runs",
+              label: "Runs",
+              iconName: "ExternalLink",
+              count: runCount,
+            },
+          ]}
+          quickLinks={[
+            {
+              label: `Runs using this flow`,
+              href: `/runs?flow_id=${flow.flow_id}`,
+              iconName: "ExternalLink",
+            },
+          ]}
+        />
+
         {/* Header: Full Width */}
         <FlowHeader flow={flow} runCount={runCount} />
 
-        {/* Content with Sidebar - Below Header */}
-        <div className="relative mt-6 flex min-h-screen gap-8">
-          {/* Left: Main Content */}
+        {/* Main Content + Inline Panel */}
+        <div className="mt-6 flex gap-8">
           <div className="min-w-0 flex-1 space-y-6">
-            {/* 1. Description Section */}
+          {/* 1. Description Section */}
+          <CollapsibleSection
+            id="description"
+            title="Description"
+            description="Full description of this flow"
+            icon={<FileText className="h-4 w-4 text-gray-500" />}
+            defaultOpen={true}
+          >
+            <FlowDescriptionSection flow={flow} />
+          </CollapsibleSection>
+
+          {/* 1.2. Analysis Section */}
+          {runCount > 0 && (
             <CollapsibleSection
-              id="description"
-              title="Description"
-              description="Full description of this flow"
-              icon={<FileText className="h-4 w-4 text-gray-500" />}
+              id="analysis"
+              title="Analyse"
+              description="Performance analysis across tasks"
+              icon={<BarChart3 className="h-4 w-4 text-[#3b82f6]" />}
               defaultOpen={true}
             >
-              <FlowDescriptionSection flow={flow} />
+              <FlowAnalysisSection flow={flow} runCount={runCount} />
             </CollapsibleSection>
+          )}
 
-            {/* 1.2. Analysis Section */}
-            {runCount > 0 && (
-              <CollapsibleSection
-                id="analysis"
-                title="Analyse"
-                description="Performance analysis across tasks"
-                icon={<BarChart3 className="h-4 w-4 text-[#3b82f6]" />}
-                defaultOpen={true}
-              >
-                <FlowAnalysisSection flow={flow} runCount={runCount} />
-              </CollapsibleSection>
-            )}
-
-            {/* 1.5. Dependencies Section */}
-            {flow.dependencies && (
-              <CollapsibleSection
-                id="dependencies"
-                title="Dependencies"
-                description="Libraries and requirements"
-                icon={<Cog className="h-4 w-4 text-gray-500" />}
-                defaultOpen={true}
-              >
-                <FlowDependenciesSection flow={flow} />
-              </CollapsibleSection>
-            )}
-
-            {/* 2. Parameters Section */}
-            {parametersCount > 0 && (
-              <CollapsibleSection
-                id="parameters"
-                title="Parameters"
-                description="Configuration parameters and default values"
-                icon={<Settings2 className="h-4 w-4 text-gray-500" />}
-                badge={parametersCount}
-                defaultOpen={true}
-              >
-                <FlowParametersSection flow={flow} />
-              </CollapsibleSection>
-            )}
-
-            {/* 3. Components Section */}
-            {componentsCount > 0 && (
-              <CollapsibleSection
-                id="components"
-                title="Components"
-                description="Sub-flows and nested components"
-                icon={<Cog className="h-4 w-4 text-gray-500" />}
-                badge={componentsCount}
-                defaultOpen={true}
-              >
-                <FlowComponentsSection flow={flow} />
-              </CollapsibleSection>
-            )}
-
-            {/* 4. Versions Section */}
-            {versionsCount > 1 && (
-              <CollapsibleSection
-                id="versions"
-                title="Versions"
-                description="Other versions of this flow"
-                icon={<History className="h-4 w-4 text-gray-500" />}
-                badge={versionsCount}
-                defaultOpen={false}
-              >
-                <FlowVersionsSection
-                  currentFlowId={flowId}
-                  versions={versions}
+          {/* 1.5. Dependencies Section */}
+          {flow.dependencies && (
+            <CollapsibleSection
+              id="dependencies"
+              title="Dependencies"
+              description="Libraries and requirements"
+              icon={
+                <FontAwesomeIcon
+                  icon={ENTITY_ICONS.flow}
+                  className="h-4 w-4 text-gray-500"
                 />
-              </CollapsibleSection>
-            )}
+              }
+              defaultOpen={true}
+            >
+              <FlowDependenciesSection flow={flow} />
+            </CollapsibleSection>
+          )}
+
+          {/* 2. Parameters Section */}
+          {parametersCount > 0 && (
+            <CollapsibleSection
+              id="parameters"
+              title="Parameters"
+              description="Configuration parameters and default values"
+              icon={<Settings2 className="h-4 w-4 text-gray-500" />}
+              badge={parametersCount}
+              defaultOpen={true}
+            >
+              <FlowParametersSection flow={flow} />
+            </CollapsibleSection>
+          )}
 
-            {/* 5. Runs List */}
+          {/* 3. Components Section */}
+          {componentsCount > 0 && (
             <CollapsibleSection
-              id="runs"
-              title="Runs"
-              description="Experiments performed using this flow"
-              icon={<List className="h-4 w-4 text-gray-500" />}
-              badge={runCount}
+              id="components"
+              title="Components"
+              description="Sub-flows and nested components"
+              icon={
+                <FontAwesomeIcon
+                  icon={ENTITY_ICONS.flow}
+                  className="h-4 w-4 text-gray-500"
+                />
+              }
+              badge={componentsCount}
+              defaultOpen={true}
+            >
+              <FlowComponentsSection flow={flow} />
+            </CollapsibleSection>
+          )}
+
+          {/* 4. Versions Section */}
+          {versionsCount > 1 && (
+            <CollapsibleSection
+              id="versions"
+              title="Versions"
+              description="Other versions of this flow"
+              icon={<History className="h-4 w-4 text-gray-500" />}
+              badge={versionsCount}
               defaultOpen={false}
             >
-              <FlowRunsList flow={flow} runCount={runCount} />
+              <FlowVersionsSection currentFlowId={flowId} versions={versions} />
             </CollapsibleSection>
-          </div>
+          )}
 
-          {/* Right: Navigation Menu - Responsive */}
-          <FlowNavigationMenu
-            runCount={runCount}
-            parametersCount={parametersCount}
-            componentsCount={componentsCount}
-            versionsCount={versionsCount}
-            hasDependencies={!!flow.dependencies}
-          />
+          {/* 5. Runs List */}
+          <CollapsibleSection
+            id="runs"
+            title="Runs"
+            description="Experiments performed using this flow"
+            icon={<List className="h-4 w-4 text-gray-500" />}
+            badge={runCount}
+            defaultOpen={false}
+          >
+            <FlowRunsList flow={flow} runCount={runCount} />
+          </CollapsibleSection>
+          </div>
+          <WorkspaceInlinePanel />
         </div>
       </div>
     </div>
diff --git a/app-next/src/app/[locale]/(explore)/layout.tsx b/app-next/src/app/[locale]/(explore)/layout.tsx
new file mode 100644
index 00000000..8407b971
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/layout.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { WorkspaceProvider } from "@/contexts/workspace-context";
+
+/**
+ * Shared layout for all (explore) pages.
+ *
+ * WorkspaceProvider keeps recent-entity history and active entity context
+ * across navigations. Each detail page renders its own WorkspaceInlinePanel
+ * (sticky, inside a flex layout after the entity header).
+ */
+export default function ExploreLayout({ children }: { children: ReactNode }) {
+  return <WorkspaceProvider>{children}</WorkspaceProvider>;
+}
diff --git a/app-next/src/app/[locale]/(explore)/measures/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/measures/[id]/page.tsx
new file mode 100644
index 00000000..a090304f
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/measures/[id]/page.tsx
@@ -0,0 +1,201 @@
+import { Metadata } from "next";
+import { setRequestLocale } from "next-intl/server";
+import Link from "next/link";
+import { FileText, Flag, Hash, Database, BarChart3 } from "lucide-react";
+import { ENTITY_ICONS, entityColors } from "@/constants";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { fetchMeasure, fetchRelatedTasks } from "@/lib/api/measure";
+import { MeasureHeader, MeasureAnalysisSection } from "@/components/measure";
+import { MeasureDescriptionSection } from "@/components/measure/measure-description-section";
+import { MeasureNavigationMenu } from "@/components/measure/measure-navigation-menu";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+
+  try {
+    const measure = await fetchMeasure(id);
+    return {
+      title: `${measure.name} - OpenML Measure`,
+      description: measure.description || `OpenML Measure: ${measure.name}`,
+      openGraph: {
+        title: `${measure.name} - OpenML Measure`,
+        description:
+          measure.description || `OpenML Measure #${id}: ${measure.name}`,
+        type: "article",
+        url: `https://www.openml.org/measures/${id}`,
+      },
+    };
+  } catch {
+    return {
+      title: "Measure Not Found - OpenML",
+      description: "The requested measure could not be found.",
+    };
+  }
+}
+
+export default async function MeasureDetailPage({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+
+  const measure = await fetchMeasure(id);
+  const tasks = await fetchRelatedTasks(measure.name);
+
+  return (
+    <div className="relative min-h-screen">
+      <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8">
+        <MeasureHeader measure={measure} />
+
+        <div className="relative mt-6 flex min-h-screen gap-8">
+          <div className="min-w-0 flex-1 space-y-6">
+            {/* 1. Description */}
+            <CollapsibleSection
+              id="description"
+              title="Description"
+              description="Details and properties of this measure"
+              icon={
+                <FileText
+                  className="h-4 w-4"
+                  style={{ color: entityColors.measures }}
+                />
+              }
+              defaultOpen={true}
+            >
+              <MeasureDescriptionSection measure={measure} />
+            </CollapsibleSection>
+
+            {/* 2. Analysis */}
+            <CollapsibleSection
+              id="analysis"
+              title="Analysis"
+              description="Statistics and insights about this measure"
+              icon={
+                <BarChart3
+                  className="h-4 w-4"
+                  style={{ color: entityColors.measures }}
+                />
+              }
+              defaultOpen={false}
+            >
+              <MeasureAnalysisSection measure={measure} />
+            </CollapsibleSection>
+
+            {/* 3. Related Tasks */}
+            <CollapsibleSection
+              id="related-tasks"
+              title="Related Tasks"
+              description=""
+              icon={
+                <Flag
+                  className="h-4 w-4"
+                  style={{
+                    color: entityColors.task,
+                    fill: entityColors.task,
+                  }}
+                />
+              }
+              badge={tasks.length}
+              defaultOpen={false}
+            >
+              {tasks.length > 0 ? (
+                <div className="space-y-0">
+                  {tasks.map((t) => (
+                    <div
+                      key={t.task_id}
+                      className="hover:bg-accent relative flex items-start justify-between border-b p-4 transition-colors"
+                    >
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-1 flex items-start gap-3">
+                          <Flag
+                            className="mt-0.5 h-5 w-5 shrink-0"
+                            style={{ color: entityColors.task }}
+                          />
+                          <div className="flex items-baseline gap-2">
+                            <h3 className="text-base font-semibold">
+                              Task #{t.task_id}
+                            </h3>
+                            <Badge variant="secondary" className="text-xs">
+                              {t.task_type || `Type ${t.task_type_id}`}
+                            </Badge>
+                          </div>
+                        </div>
+                        {t.source_data?.name && (
+                          <div className="text-muted-foreground mb-2 text-sm">
+                            <span className="flex items-center gap-1.5">
+                              <Database
+                                className="h-3.5 w-3.5"
+                                style={{ color: entityColors.data }}
+                              />
+                              Dataset: {t.source_data.name}
+                            </span>
+                          </div>
+                        )}
+                        {t.runs !== undefined && t.runs > 0 && (
+                          <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="flex items-center gap-1.5">
+                                  <FontAwesomeIcon
+                                    icon={ENTITY_ICONS.run}
+                                    className="h-4 w-4"
+                                    style={{ color: entityColors.run }}
+                                  />
+                                  {Number(t.runs).toLocaleString()}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent>Runs</TooltipContent>
+                            </Tooltip>
+                          </div>
+                        )}
+                      </div>
+                      <Badge
+                        variant="openml"
+                        className="relative z-10 flex items-center gap-0.75 px-2 py-0.5 text-xs font-semibold text-white"
+                        style={{ backgroundColor: entityColors.task }}
+                      >
+                        <Hash className="h-3 w-3" />
+                        {t.task_id}
+                      </Badge>
+                      <Link
+                        href={`/tasks/${t.task_id}`}
+                        className="absolute inset-0"
+                        aria-label={`View task ${t.task_id}`}
+                      >
+                        <span className="sr-only">View task {t.task_id}</span>
+                      </Link>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-muted-foreground p-8 text-center">
+                  No tasks found using this measure.
+                </div>
+              )}
+            </CollapsibleSection>
+          </div>
+
+          <MeasureNavigationMenu
+            relatedTaskCount={tasks.length}
+            measureType={measure.measure_type}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const revalidate = 3600;
diff --git a/app-next/src/app/[locale]/(explore)/measures/data-qualities/page.tsx b/app-next/src/app/[locale]/(explore)/measures/data-qualities/page.tsx
index ef77f478..b31349c9 100644
--- a/app-next/src/app/[locale]/(explore)/measures/data-qualities/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/data-qualities/page.tsx
@@ -1,7 +1,8 @@
 import { setRequestLocale } from "next-intl/server";
 import { MeasureList } from "@/components/measure/measure-list";
-import { Gauge } from "lucide-react";
 import type { Metadata } from "next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS, entityColors } from "@/constants";
 
 export const metadata: Metadata = {
   title: "Data Quality Measures - OpenML",
@@ -37,7 +38,16 @@ export default async function DataQualitiesPage({
       <div className="bg-muted/40 border-b">
         <div className="container mx-auto px-4 py-8 sm:px-6">
           <div className="flex items-start gap-3">
-            <Gauge className="h-8 w-8 text-sky-600" aria-hidden="true" />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.measures}
+              className="h-4 w-4"
+              style={{
+                color: entityColors.measures,
+                width: "32px",
+                height: "32px",
+              }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Data Quality Measures
diff --git a/app-next/src/app/[locale]/(explore)/measures/data/page.tsx b/app-next/src/app/[locale]/(explore)/measures/data/page.tsx
index ef77f478..f20514f6 100644
--- a/app-next/src/app/[locale]/(explore)/measures/data/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/data/page.tsx
@@ -1,8 +1,17 @@
+import { Suspense } from "react";
 import { setRequestLocale } from "next-intl/server";
-import { MeasureList } from "@/components/measure/measure-list";
-import { Gauge } from "lucide-react";
+import { MeasureSearchContainer, MeasureStatsCard } from "@/components/measure";
+import { SearchTabs } from "@/components/search/shared/search-tabs";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS, entityColors } from "@/constants";
 import type { Metadata } from "next";
 
+const MEASURE_TABS = [
+  { label: "Evaluation Measures", path: "/measures/evaluation" },
+  { label: "Data Quality", path: "/measures/data" },
+  { label: "Estimation Procedures", path: "/measures/procedures" },
+];
+
 export const metadata: Metadata = {
   title: "Data Quality Measures - OpenML",
   description:
@@ -37,7 +46,16 @@ export default async function DataQualitiesPage({
       <div className="bg-muted/40 border-b">
         <div className="container mx-auto px-4 py-8 sm:px-6">
           <div className="flex items-start gap-3">
-            <Gauge className="h-8 w-8 text-sky-600" aria-hidden="true" />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.measures}
+              className="h-4 w-4"
+              style={{
+                color: entityColors.measures,
+                width: "32px",
+                height: "32px",
+              }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Data Quality Measures
@@ -49,8 +67,12 @@ export default async function DataQualitiesPage({
           </div>
         </div>
       </div>
-      <div className="container mx-auto max-w-[1000px] px-4 py-8 sm:px-6">
-        <MeasureList measureType="data_quality" />
+      <Suspense fallback={<div className="h-12 border-b" />}>
+        <SearchTabs tabs={MEASURE_TABS} accentColor={entityColors.measures} />
+      </Suspense>
+      <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6">
+        <MeasureStatsCard measureType="data_quality" />
+        <MeasureSearchContainer measureType="data_quality" />
       </div>
     </div>
   );
diff --git a/app-next/src/app/[locale]/(explore)/measures/evaluation/page.tsx b/app-next/src/app/[locale]/(explore)/measures/evaluation/page.tsx
index e30bc9b9..ef51c7d0 100644
--- a/app-next/src/app/[locale]/(explore)/measures/evaluation/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/evaluation/page.tsx
@@ -1,8 +1,17 @@
+import { Suspense } from "react";
 import { setRequestLocale } from "next-intl/server";
-import { MeasureList } from "@/components/measure/measure-list";
-import { Gauge } from "lucide-react";
+import { MeasureSearchContainer, MeasureStatsCard } from "@/components/measure";
+import { SearchTabs } from "@/components/search/shared/search-tabs";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS, entityColors } from "@/constants";
 import type { Metadata } from "next";
 
+const MEASURE_TABS = [
+  { label: "Evaluation Measures", path: "/measures/evaluation" },
+  { label: "Data Quality", path: "/measures/data" },
+  { label: "Estimation Procedures", path: "/measures/procedures" },
+];
+
 export const metadata: Metadata = {
   title: "Model Evaluation - OpenML Performance Metrics",
   description:
@@ -39,7 +48,16 @@ export default async function ModelEvaluationPage({
       <div className="bg-muted/40 border-b">
         <div className="container mx-auto px-4 py-8 sm:px-6">
           <div className="flex items-start gap-3">
-            <Gauge className="h-8 w-8 text-sky-600" aria-hidden="true" />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.measures}
+              className="h-4 w-4"
+              style={{
+                color: entityColors.measures,
+                width: "32px",
+                height: "32px",
+              }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Evaluation Measures
@@ -51,8 +69,12 @@ export default async function ModelEvaluationPage({
           </div>
         </div>
       </div>
-      <div className="container mx-auto max-w-[1000px] px-4 py-8 sm:px-6">
-        <MeasureList measureType="evaluation_measure" />
+      <Suspense fallback={<div className="h-12 border-b" />}>
+        <SearchTabs tabs={MEASURE_TABS} accentColor={entityColors.measures} />
+      </Suspense>
+      <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6">
+        <MeasureStatsCard measureType="evaluation_measure" />
+        <MeasureSearchContainer measureType="evaluation_measure" />
       </div>
     </div>
   );
diff --git a/app-next/src/app/[locale]/(explore)/measures/model-evaluation/page.tsx b/app-next/src/app/[locale]/(explore)/measures/model-evaluation/page.tsx
index e30bc9b9..a4c19405 100644
--- a/app-next/src/app/[locale]/(explore)/measures/model-evaluation/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/model-evaluation/page.tsx
@@ -1,7 +1,8 @@
 import { setRequestLocale } from "next-intl/server";
 import { MeasureList } from "@/components/measure/measure-list";
-import { Gauge } from "lucide-react";
 import type { Metadata } from "next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS, entityColors } from "@/constants";
 
 export const metadata: Metadata = {
   title: "Model Evaluation - OpenML Performance Metrics",
@@ -39,7 +40,17 @@ export default async function ModelEvaluationPage({
       <div className="bg-muted/40 border-b">
         <div className="container mx-auto px-4 py-8 sm:px-6">
           <div className="flex items-start gap-3">
-            <Gauge className="h-8 w-8 text-sky-600" aria-hidden="true" />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.measures}
+              className="h-4 w-4"
+              style={{
+                color: entityColors.measures,
+                width: "32px",
+                height: "32px",
+              }}
+              aria-hidden="true"
+            />
+
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Evaluation Measures
diff --git a/app-next/src/app/[locale]/(explore)/measures/page.tsx b/app-next/src/app/[locale]/(explore)/measures/page.tsx
new file mode 100644
index 00000000..02462095
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/measures/page.tsx
@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+export default async function MeasuresPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const { q } = await searchParams;
+  redirect(q ? `/measures/evaluation?q=${encodeURIComponent(q)}` : "/measures/evaluation");
+}
diff --git a/app-next/src/app/[locale]/(explore)/measures/procedures/page.tsx b/app-next/src/app/[locale]/(explore)/measures/procedures/page.tsx
index ead406b7..77612671 100644
--- a/app-next/src/app/[locale]/(explore)/measures/procedures/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/procedures/page.tsx
@@ -1,6 +1,15 @@
+import { Suspense } from "react";
 import { setRequestLocale } from "next-intl/server";
-import { MeasureList } from "@/components/measure/measure-list";
-import { Gauge } from "lucide-react";
+import { MeasureSearchContainer, MeasureStatsCard } from "@/components/measure";
+import { SearchTabs } from "@/components/search/shared/search-tabs";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const MEASURE_TABS = [
+  { label: "Evaluation Measures", path: "/measures/evaluation" },
+  { label: "Data Quality", path: "/measures/data" },
+  { label: "Estimation Procedures", path: "/measures/procedures" },
+];
+import { ENTITY_ICONS, entityColors } from "@/constants";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -36,7 +45,16 @@ export default async function ProceduresPage({
       <div className="bg-muted/40 border-b">
         <div className="container mx-auto px-4 py-8 sm:px-6">
           <div className="flex items-start gap-3">
-            <Gauge className="h-8 w-8 text-sky-600" aria-hidden="true" />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.measures}
+              className="h-4 w-4"
+              style={{
+                color: entityColors.measures,
+                width: "32px",
+                height: "32px",
+              }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Estimation Procedures
@@ -48,8 +66,12 @@ export default async function ProceduresPage({
           </div>
         </div>
       </div>
-      <div className="container mx-auto max-w-[1000px] px-4 py-8 sm:px-6">
-        <MeasureList measureType="estimation_procedure" />
+      <Suspense fallback={<div className="h-12 border-b" />}>
+        <SearchTabs tabs={MEASURE_TABS} accentColor={entityColors.measures} />
+      </Suspense>
+      <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6">
+        <MeasureStatsCard measureType="estimation_procedure" />
+        <MeasureSearchContainer measureType="estimation_procedure" />
       </div>
     </div>
   );
diff --git a/app-next/src/app/[locale]/(explore)/runs/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/runs/[id]/page.tsx
index d971baa3..e689b029 100644
--- a/app-next/src/app/[locale]/(explore)/runs/[id]/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/runs/[id]/page.tsx
@@ -1,109 +1,54 @@
 import { setRequestLocale } from "next-intl/server";
 import { notFound } from "next/navigation";
-import {
-  FileText,
-  BarChart3,
-  Settings2,
-  Tags,
-  AlertCircle,
-  LineChart,
-  Download,
-} from "lucide-react";
+import type { Metadata } from "next";
+import { AlertCircle } from "lucide-react";
+import { getRun } from "@/lib/api/run";
 import { RunHeader } from "@/components/run/run-header";
 import { RunMetricsSection } from "@/components/run/run-metrics-section";
 import { RunParametersSection } from "@/components/run/run-parameters-section";
-import { RunNavigationMenu } from "@/components/run/run-navigation-menu";
 import { RunTagsSection } from "@/components/run/run-tags-section";
 import { RunOutputFilesSection } from "@/components/run/run-output-files-section";
 import { RunAnalysesSection } from "@/components/run/run-analyses-section";
 import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { WorkspaceSetter } from "@/components/workspace/workspace-setter";
+import { WorkspaceInlinePanel } from "@/components/workspace/workspace-inline-panel";
+import { entityColors } from "@/constants";
+import {
+  BarChart3,
+  Settings2,
+  Tags,
+  FileText,
+  LineChart,
+  Download,
+} from "lucide-react";
 import Link from "next/link";
 
-// API response types
-interface RunApiResponse {
-  run?: Run;
-  error?: { code: string; message: string };
-}
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const runId = parseInt(id, 10);
 
-interface Run {
-  run_id: number;
-  uploader?: string;
-  uploader_id?: number;
-  upload_time?: string;
-  flow_id?: number;
-  flow_name?: string;
-  task_id?: number;
-  task?: {
-    task_id?: number;
-    task_type?: string;
-    source_data?: {
-      data_id?: number;
-      name?: string;
+  if (isNaN(runId)) {
+    return {
+      title: "Run Not Found | OpenML",
     };
-  };
-  visibility?: string;
-  error_message?: string | null;
-  tag?: string[];
-  parameter_setting?: Array<{
-    name: string;
-    value: string | number | boolean | null;
-  }>;
-  output_data?: {
-    evaluation?: Array<{
-      name: string;
-      value: string | number;
-      stdev?: string | number;
-      array_data?: Record<string, string | number>;
-      per_fold?: Array<number | number[]>;
-    }>;
-  };
-  nr_of_likes?: number;
-  nr_of_downloads?: number;
-  nr_of_issues?: number;
-  nr_of_downvotes?: number;
-  setup_string?: string;
-}
-
-// Fetch run data from API - no mock data, proper error handling
-async function getRun(
-  runId: number,
-): Promise<{ run: Run | null; error: string | null }> {
-  try {
-    const apiUrl =
-      process.env.NEXT_PUBLIC_URL_API || "https://www.openml.org/api/v1";
-    const response = await fetch(`${apiUrl}/json/run/${runId}`, {
-      next: { revalidate: 3600 },
-      headers: {
-        Accept: "application/json",
-      },
-    });
-
-    if (!response.ok) {
-      if (response.status === 404) {
-        return { run: null, error: `Run #${runId} not found` };
-      }
-      return {
-        run: null,
-        error: `Failed to fetch run: HTTP ${response.status}`,
-      };
-    }
-
-    const contentType = response.headers.get("content-type");
-    if (!contentType || !contentType.includes("application/json")) {
-      return { run: null, error: "Invalid response format from API" };
-    }
-
-    const data: RunApiResponse = await response.json();
+  }
 
-    if (data.error) {
-      return { run: null, error: data.error.message || "Unknown API error" };
-    }
+  const { run } = await getRun(runId);
 
-    return { run: data.run || null, error: null };
-  } catch (error) {
-    console.error("Failed to fetch run:", error);
-    return { run: null, error: "Failed to connect to OpenML API" };
+  if (!run) {
+    return {
+      title: "Run Not Found | OpenML",
+    };
   }
+
+  return {
+    title: `Run ${run.run_id} | OpenML`,
+    description: `Details for Run ${run.run_id} on task ${run.task_id} with flow ${run.flow_id}.`,
+  };
 }
 
 export default async function RunDetailPage({
@@ -151,106 +96,180 @@ export default async function RunDetailPage({
   return (
     <div className="relative min-h-screen">
       <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8">
+        {/* Push context to the persistent workspace panel */}
+        <WorkspaceSetter
+          entity={{
+            type: "run",
+            id: run.run_id,
+            title: `Run #${run.run_id}`,
+            subtitle: run.flow_name || `Flow #${run.flow_id}`,
+            url: `/runs/${run.run_id}`,
+            color: entityColors.run,
+          }}
+          sections={[
+            ...(evaluationsCount > 0
+              ? [
+                  {
+                    id: "metrics",
+                    label: "Evaluation Metrics",
+                    iconName: "BarChart3",
+                    count: evaluationsCount,
+                  },
+                ]
+              : []),
+            {
+              id: "analyses",
+              label: "Analyses",
+              iconName: "LineChart",
+            },
+            ...(parametersCount > 0
+              ? [
+                  {
+                    id: "parameters",
+                    label: "Parameters",
+                    iconName: "Settings2",
+                    count: parametersCount,
+                  },
+                ]
+              : []),
+            ...(tagsCount > 0
+              ? [
+                  {
+                    id: "tags",
+                    label: "Tags",
+                    iconName: "Tags",
+                    count: tagsCount,
+                  },
+                ]
+              : []),
+            {
+              id: "output-files",
+              label: "Output Files",
+              iconName: "Download",
+            },
+            ...(run.setup_string
+              ? [
+                  {
+                    id: "setup",
+                    label: "Setup",
+                    iconName: "FileText",
+                  },
+                ]
+              : []),
+          ]}
+          quickLinks={[
+            ...(run.task_id
+              ? [
+                  {
+                    label: `Task #${run.task_id}`,
+                    href: `/tasks/${run.task_id}`,
+                    iconName: "ExternalLink",
+                  },
+                ]
+              : []),
+            {
+              label: run.flow_name || `Flow #${run.flow_id}`,
+              href: `/flows/${run.flow_id}`,
+              iconName: "ExternalLink",
+            },
+          ]}
+          actions={[
+            {
+              label: "Compare with…",
+              href: `/runs/compare?ids=${run.run_id}`,
+              iconName: "GitCompareArrows",
+            },
+          ]}
+        />
+
         {/* Header: Full Width */}
         <RunHeader run={run} />
 
-        {/* Content with Sidebar */}
-        <div className="relative mt-6 flex min-h-screen gap-8">
-          {/* Left: Main Content */}
+        {/* Main Content + Inline Panel */}
+        <div className="mt-6 flex gap-8">
           <div className="min-w-0 flex-1 space-y-6">
-            {/* Evaluation Metrics */}
-            {evaluationsCount > 0 && (
-              <CollapsibleSection
-                id="metrics"
-                title="Evaluation Metrics"
-                description="Performance metrics from cross-validation"
-                icon={<BarChart3 className="h-4 w-4 text-blue-500" />}
-                badge={evaluationsCount}
-                defaultOpen={true}
-              >
-                <RunMetricsSection run={run} />
-              </CollapsibleSection>
-            )}
-
-            {/* Analyses - Predictions, Confusion Matrix */}
+          {/* Evaluation Metrics */}
+          {evaluationsCount > 0 && (
             <CollapsibleSection
-              id="analyses"
-              title="Analyses"
-              description="Predictions, confusion matrix, and class distribution"
-              icon={<LineChart className="h-4 w-4 text-purple-500" />}
-              defaultOpen={false}
+              id="metrics"
+              title="Evaluation Metrics"
+              description="Performance metrics from cross-validation"
+              icon={<BarChart3 className="h-4 w-4 text-blue-500" />}
+              badge={evaluationsCount}
+              defaultOpen={true}
             >
-              <RunAnalysesSection runId={run.run_id} />
+              <RunMetricsSection run={run} />
             </CollapsibleSection>
+          )}
 
-            {/* Parameters */}
-            {parametersCount > 0 && (
-              <CollapsibleSection
-                id="parameters"
-                title="Parameters"
-                description="Flow parameters used in this run"
-                icon={<Settings2 className="h-4 w-4 text-gray-500" />}
-                badge={parametersCount}
-                defaultOpen={true}
-              >
-                <RunParametersSection run={run} />
-              </CollapsibleSection>
-            )}
+          {/* Analyses - Predictions, Confusion Matrix */}
+          <CollapsibleSection
+            id="analyses"
+            title="Analyses"
+            description="Predictions, confusion matrix, and class distribution"
+            icon={<LineChart className="h-4 w-4 text-purple-500" />}
+            defaultOpen={false}
+          >
+            <RunAnalysesSection runId={run.run_id} />
+          </CollapsibleSection>
 
-            {/* Tags */}
-            {tagsCount > 0 && (
-              <CollapsibleSection
-                id="tags"
-                title="Tags"
-                description="Labels and categories for this run"
-                icon={<Tags className="h-4 w-4 text-purple-500" />}
-                badge={tagsCount}
-                defaultOpen={false}
-              >
-                <RunTagsSection tags={run.tag || []} />
-              </CollapsibleSection>
-            )}
+          {/* Parameters */}
+          {parametersCount > 0 && (
+            <CollapsibleSection
+              id="parameters"
+              title="Parameters"
+              description="Flow parameters used in this run"
+              icon={<Settings2 className="h-4 w-4 text-gray-500" />}
+              badge={parametersCount}
+              defaultOpen={true}
+            >
+              <RunParametersSection run={run} />
+            </CollapsibleSection>
+          )}
 
-            {/* Output Files */}
+          {/* Tags */}
+          {tagsCount > 0 && (
             <CollapsibleSection
-              id="output-files"
-              title="Output Files"
-              description="Download run description and predictions"
-              icon={<Download className="h-4 w-4 text-blue-500" />}
+              id="tags"
+              title="Tags"
+              description="Labels and categories for this run"
+              icon={<Tags className="h-4 w-4 text-purple-500" />}
+              badge={tagsCount}
               defaultOpen={false}
             >
-              <RunOutputFilesSection runId={run.run_id} />
+              <RunTagsSection tags={run.tag || []} />
             </CollapsibleSection>
+          )}
 
-            {/* Setup Description (if available) */}
-            {run.setup_string && (
-              <CollapsibleSection
-                id="setup"
-                title="Setup"
-                description="Run configuration details"
-                icon={<FileText className="h-4 w-4 text-gray-500" />}
-                defaultOpen={false}
-              >
-                <div className="prose dark:prose-invert max-w-none p-4">
-                  <pre className="text-sm whitespace-pre-wrap">
-                    {run.setup_string}
-                  </pre>
-                </div>
-              </CollapsibleSection>
-            )}
-          </div>
+          {/* Output Files */}
+          <CollapsibleSection
+            id="output-files"
+            title="Output Files"
+            description="Download run description and predictions"
+            icon={<Download className="h-4 w-4 text-blue-500" />}
+            defaultOpen={false}
+          >
+            <RunOutputFilesSection runId={run.run_id} />
+          </CollapsibleSection>
 
-          {/* Right: Navigation Menu */}
-          <RunNavigationMenu
-            hasMetrics={evaluationsCount > 0}
-            hasAnalyses={true}
-            hasParameters={parametersCount > 0}
-            hasTags={tagsCount > 0}
-            hasSetup={!!run.setup_string}
-            metricsCount={evaluationsCount}
-            parametersCount={parametersCount}
-            tagsCount={tagsCount}
-          />
+          {/* Setup Description (if available) */}
+          {run.setup_string && (
+            <CollapsibleSection
+              id="setup"
+              title="Setup"
+              description="Run configuration details"
+              icon={<FileText className="h-4 w-4 text-gray-500" />}
+              defaultOpen={false}
+            >
+              <div className="prose dark:prose-invert max-w-none p-4">
+                <pre className="text-sm whitespace-pre-wrap">
+                  {run.setup_string}
+                </pre>
+              </div>
+            </CollapsibleSection>
+          )}
+          </div>
+          <WorkspaceInlinePanel />
         </div>
       </div>
     </div>
diff --git a/app-next/src/app/[locale]/(explore)/runs/compare/page.tsx b/app-next/src/app/[locale]/(explore)/runs/compare/page.tsx
new file mode 100644
index 00000000..dc7c33fc
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/runs/compare/page.tsx
@@ -0,0 +1,207 @@
+import { setRequestLocale } from "next-intl/server";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { AlertCircle, ArrowLeft, GitCompareArrows } from "lucide-react";
+import { getRun } from "@/lib/api/run";
+import type { RunDetail } from "@/lib/api/run";
+import { RunComparisonClient } from "@/components/run/run-comparison-client";
+import { WorkspaceSetter } from "@/components/workspace/workspace-setter";
+import { WorkspaceInlinePanel } from "@/components/workspace/workspace-inline-panel";
+import { entityColors } from "@/constants";
+
+export const metadata: Metadata = {
+  title: "Compare Runs | OpenML",
+  description: "Side-by-side comparison of multiple OpenML runs.",
+};
+
+export default async function RunComparePage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  const sp = await searchParams;
+  const idsRaw = typeof sp.ids === "string" ? sp.ids : "";
+  const runIds = idsRaw
+    .split(",")
+    .map((s) => parseInt(s.trim(), 10))
+    .filter((n) => !isNaN(n) && n > 0)
+    .slice(0, 10); // Cap at 10 runs
+
+  if (runIds.length < 2) {
+    return (
+      <div className="container mx-auto max-w-[1400px] px-4 py-16 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-center text-center">
+          <AlertCircle className="text-muted-foreground mb-4 h-16 w-16" />
+          <h1 className="mb-2 text-2xl font-bold">
+            Need at Least 2 Runs to Compare
+          </h1>
+          <p className="text-muted-foreground mb-6 max-w-md">
+            Add run IDs to the URL like{" "}
+            <code className="bg-muted rounded px-1.5 py-0.5 text-sm">
+              /runs/compare?ids=123,456
+            </code>{" "}
+            or use the checkboxes on the run search page.
+          </p>
+          <Link
+            href="/runs"
+            className="inline-flex items-center gap-2 rounded-md bg-red-500 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-red-600"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Browse Runs
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Fetch all runs in parallel
+  const results = await Promise.all(runIds.map((id) => getRun(id)));
+
+  const runs: RunDetail[] = [];
+  const errors: string[] = [];
+
+  for (let i = 0; i < results.length; i++) {
+    if (results[i].run && results[i].error === null) {
+      runs.push(results[i].run!);
+    } else {
+      errors.push(results[i].error || `Run #${runIds[i]} could not be loaded`);
+    }
+  }
+
+  if (runs.length < 2) {
+    return (
+      <div className="container mx-auto max-w-[1400px] px-4 py-16 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-center text-center">
+          <AlertCircle className="mb-4 h-16 w-16 text-red-500" />
+          <h1 className="mb-2 text-2xl font-bold">
+            Could Not Load Enough Runs
+          </h1>
+          <p className="text-muted-foreground mb-4 max-w-md">
+            At least 2 runs are needed for comparison. Only {runs.length} could
+            be loaded.
+          </p>
+          {errors.length > 0 && (
+            <ul className="text-muted-foreground mb-6 text-sm">
+              {errors.map((e, i) => (
+                <li key={i}>• {e}</li>
+              ))}
+            </ul>
+          )}
+          <Link
+            href="/runs"
+            className="inline-flex items-center gap-2 rounded-md bg-red-500 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-red-600"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Browse Runs
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative min-h-screen">
+      <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8">
+        {/* Push context to the persistent workspace panel */}
+        <WorkspaceSetter
+          entity={{
+            type: "run",
+            id: `compare-${runIds.join("-")}`,
+            title: "Compare Runs",
+            subtitle: runs.map((r) => `#${r.run_id}`).join(", "),
+            url: `/runs/compare?ids=${runIds.join(",")}`,
+            color: entityColors.run,
+            resetHref: "/runs",
+          }}
+          sections={runs.map((r) => ({
+            id: `run-${r.run_id}`,
+            label: `Run #${r.run_id}`,
+            iconName: "ExternalLink",
+            href: `/runs/${r.run_id}`,
+          }))}
+        />
+
+        {/* Header */}
+        <header className="space-y-3 border-b pb-6">
+          <div className="flex items-center gap-3">
+            {/* <Link
+              href="/runs"
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Link> */}
+            <GitCompareArrows className="h-8 w-8 text-red-500" />
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight">
+                Compare Runs
+              </h1>
+              <p className="text-muted-foreground text-sm">
+                {runs.length} runs side-by-side —{" "}
+                {runs.map((r) => `#${r.run_id}`).join(", ")}
+              </p>
+            </div>
+          </div>
+
+          {/* Run summary cards */}
+          <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+            {runs.map((run, i) => (
+              <Link
+                key={run.run_id}
+                href={`/runs/${run.run_id}`}
+                className="hover:bg-muted/50 group flex items-start gap-2 rounded-lg border p-3 transition-colors"
+              >
+                <span
+                  className="mt-1 h-3 w-3 shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: [
+                      "#3b82f6",
+                      "#22c55e",
+                      "#f59e0b",
+                      "#ef4444",
+                      "#8b5cf6",
+                      "#ec4899",
+                      "#14b8a6",
+                      "#f97316",
+                    ][i % 8],
+                  }}
+                />
+                <div className="min-w-0">
+                  <p className="text-sm font-semibold">Run #{run.run_id}</p>
+                  <p className="text-muted-foreground truncate text-xs">
+                    {run.flow_name || `Flow #${run.flow_id}`}
+                  </p>
+                  {run.task_id && (
+                    <p className="text-muted-foreground text-xs">
+                      Task #{run.task_id}
+                    </p>
+                  )}
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          {errors.length > 0 && (
+            <div className="mt-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
+              {errors.length} run(s) could not be loaded: {errors.join("; ")}
+            </div>
+          )}
+        </header>
+
+        {/* Client-side interactive comparison + inline panel */}
+        <div className="mt-6 flex gap-8">
+          <div className="min-w-0 flex-1">
+            <RunComparisonClient runs={runs} />
+          </div>
+          <WorkspaceInlinePanel />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const revalidate = 3600;
diff --git a/app-next/src/app/[locale]/(explore)/tasks/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/tasks/[id]/page.tsx
index 32163f2e..48cfa17c 100644
--- a/app-next/src/app/[locale]/(explore)/tasks/[id]/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/tasks/[id]/page.tsx
@@ -8,7 +8,9 @@ import { CollapsibleSection } from "@/components/ui/collapsible-section";
 import { TaskDefinitionSection } from "@/components/task/task-definition-section";
 import { TaskAnalysisSection } from "@/components/task/task-analysis-section";
 import { TaskRunsList } from "@/components/task/task-runs-list";
-import { TaskNavigationMenu } from "@/components/task/task-navigation-menu";
+import { WorkspaceSetter } from "@/components/workspace/workspace-setter";
+import { WorkspaceInlinePanel } from "@/components/workspace/workspace-inline-panel";
+import { entityColors } from "@/constants";
 
 /**
  * Generate SEO Metadata for Task
@@ -67,12 +69,52 @@ export default async function TaskDetailPage({
     <div className="relative min-h-screen">
       {/* Main Content */}
       <div className="container mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8">
+        {/* Push context to the persistent workspace panel */}
+        <WorkspaceSetter
+          entity={{
+            type: "task",
+            id: task.task_id,
+            title: `${task.tasktype?.name || task.task_type || "Task"} on ${task.source_data?.name || "Unknown"}`,
+            subtitle: `Task #${task.task_id}`,
+            url: `/tasks/${id}`,
+            color: entityColors.task,
+          }}
+          sections={[
+            {
+              id: "definition",
+              label: "Task Definition",
+              iconName: "FileText",
+            },
+            {
+              id: "task-analysis",
+              label: "Task Analysis",
+              iconName: "BarChart3",
+            },
+            {
+              id: "runs",
+              label: "Runs",
+              iconName: "ExternalLink",
+              count: displayRunCount,
+            },
+          ]}
+          quickLinks={[
+            ...(task.source_data?.data_id
+              ? [
+                  {
+                    label: `Dataset: ${task.source_data.name}`,
+                    href: `/datasets/${task.source_data.data_id}`,
+                    iconName: "Database",
+                  },
+                ]
+              : []),
+          ]}
+        />
+
         {/* Header: Full Width - Name, stats, actions (Kaggle-style) */}
         <TaskHeader task={task} runCount={displayRunCount} />
 
-        {/* Content with Sidebar - Below Header */}
-        <div className="relative mt-6 flex min-h-screen gap-8">
-          {/* Left: Main Content - Single Column for now to match requested clean look */}
+        {/* Main Content + Inline Panel */}
+        <div className="mt-6 flex gap-8">
           <div className="min-w-0 flex-1 space-y-6">
             {/* 1. Task Definition (Target, Splits, Metrics) */}
             <CollapsibleSection
@@ -108,9 +150,7 @@ export default async function TaskDetailPage({
               <TaskRunsList task={task} runCount={displayRunCount} />
             </CollapsibleSection>
           </div>
-
-          {/* Right: Navigation Menu - Responsive */}
-          <TaskNavigationMenu runCount={displayRunCount} />
+          <WorkspaceInlinePanel />
         </div>
       </div>
     </div>
diff --git a/app-next/src/app/[locale]/(explore)/tasks/create/page.tsx b/app-next/src/app/[locale]/(explore)/tasks/create/page.tsx
new file mode 100644
index 00000000..af085c4f
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/tasks/create/page.tsx
@@ -0,0 +1,40 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { TaskCreateForm } from "@/components/task/task-create-form";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create Task | OpenML",
+  description: "Define a new machine learning task for a dataset on OpenML.",
+};
+
+export default async function TaskCreatePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect(
+      `/${locale}/auth/sign-in?reason=createTask&callbackUrl=/${locale}/tasks/create`,
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-8 text-center">
+        <h1 className="text-primary text-3xl font-bold tracking-tight sm:text-4xl">
+          Define Task
+        </h1>
+        <p className="text-muted-foreground mt-4 text-lg">
+          Create a new machine learning task for a dataset.
+        </p>
+      </div>
+
+      <TaskCreateForm />
+    </div>
+  );
+}
diff --git a/app-next/src/components/dataset/dataset-header-new.tsx b/app-next/src/components/dataset/dataset-header-new.tsx
index 59041fee..36ed3d2d 100644
--- a/app-next/src/components/dataset/dataset-header-new.tsx
+++ b/app-next/src/components/dataset/dataset-header-new.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import {
-  Heart,
   Calendar,
   CheckCircle,
   AlertTriangle,
@@ -14,8 +13,10 @@ import {
   CloudDownload,
   MessageCircle,
   Tag,
+  Pencil,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverTrigger,
@@ -33,12 +34,14 @@ interface DatasetHeaderProps {
   dataset: Dataset;
   taskCount?: number;
   runCount?: number;
+  isAuthenticated?: boolean;
 }
 
 export function DatasetHeader({
   dataset,
   taskCount = 0,
   runCount = 0,
+  isAuthenticated = false,
 }: DatasetHeaderProps) {
   // Date formatting
   const uploadDate = new Date(dataset.date).toLocaleDateString("en-US", {
@@ -77,7 +80,7 @@ export function DatasetHeader({
   return (
     <header className="space-y-6 border-b p-0">
       {/* LINE 1: Dataset Icon + Title */}
-      <div className="items- flex gap-3">
+      <div className="mb-1.5 flex items-start gap-3">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 448 512"
@@ -149,7 +152,7 @@ export function DatasetHeader({
 
             {/* Version with link to all versions */}
             <Link
-              href={`/datasets?search=${encodeURIComponent(dataset.name)}`}
+              href={`/datasets?q=${encodeURIComponent(dataset.name)}`}
               className="text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
               title="View all versions of this dataset"
             >
@@ -195,11 +198,14 @@ export function DatasetHeader({
                 </div>
               )}
 
-            {/* Likes - purple filled like list view */}
-            <div className="flex items-center gap-1">
-              <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
-              <span>{dataset.nr_of_likes || 0} likes</span>
-            </div>
+            {/* Likes — interactive, synced */}
+            <LikeButton
+              entityType="dataset"
+              entityId={dataset.data_id}
+              initialLikes={dataset.nr_of_likes || 0}
+              showCount={true}
+              size="sm"
+            />
 
             {/* Issues - using MessageCircle */}
             <div className="flex items-center gap-1">
@@ -227,12 +233,25 @@ export function DatasetHeader({
                 {tags.length} tags
               </button>
             </PopoverTrigger>
-            <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-              <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
+            <PopoverContent
+              className="max-h-64 w-72 overflow-y-auto p-3"
+              align="start"
+            >
+              <p className="text-muted-foreground mb-2 text-xs font-medium">
+                All tags ({tags.length})
+              </p>
               <div className="flex flex-wrap gap-1.5">
                 {tags.map((tagObj, idx) => (
-                  <a key={`pop-xs-${tagObj.tag}-${idx}`} href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}>
-                    <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tagObj.tag}</Badge>
+                  <a
+                    key={`pop-xs-${tagObj.tag}-${idx}`}
+                    href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
+                  >
+                    <Badge
+                      variant="secondary"
+                      className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
+                    >
+                      {tagObj.tag}
+                    </Badge>
                   </a>
                 ))}
               </div>
@@ -244,7 +263,7 @@ export function DatasetHeader({
             {tags.slice(0, 3).map((tagObj, idx) => (
               <a
                 key={`sm-${tagObj.tag}-${idx}`}
-                href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}
+                href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
               >
                 <Badge
                   variant="secondary"
@@ -261,12 +280,25 @@ export function DatasetHeader({
                     +{tags.length - 3} more
                   </button>
                 </PopoverTrigger>
-                <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                  <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
+                <PopoverContent
+                  className="max-h-64 w-72 overflow-y-auto p-3"
+                  align="start"
+                >
+                  <p className="text-muted-foreground mb-2 text-xs font-medium">
+                    All tags ({tags.length})
+                  </p>
                   <div className="flex flex-wrap gap-1.5">
                     {tags.map((tagObj, idx) => (
-                      <a key={`pop-sm-${tagObj.tag}-${idx}`} href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}>
-                        <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tagObj.tag}</Badge>
+                      <a
+                        key={`pop-sm-${tagObj.tag}-${idx}`}
+                        href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
+                      >
+                        <Badge
+                          variant="secondary"
+                          className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
+                        >
+                          {tagObj.tag}
+                        </Badge>
                       </a>
                     ))}
                   </div>
@@ -280,7 +312,7 @@ export function DatasetHeader({
             {tags.slice(0, 6).map((tagObj, idx) => (
               <a
                 key={`md-${tagObj.tag}-${idx}`}
-                href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}
+                href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
               >
                 <Badge
                   variant="secondary"
@@ -297,12 +329,25 @@ export function DatasetHeader({
                     +{tags.length - 6} more
                   </button>
                 </PopoverTrigger>
-                <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                  <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
+                <PopoverContent
+                  className="max-h-64 w-72 overflow-y-auto p-3"
+                  align="start"
+                >
+                  <p className="text-muted-foreground mb-2 text-xs font-medium">
+                    All tags ({tags.length})
+                  </p>
                   <div className="flex flex-wrap gap-1.5">
                     {tags.map((tagObj, idx) => (
-                      <a key={`pop-md-${tagObj.tag}-${idx}`} href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}>
-                        <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tagObj.tag}</Badge>
+                      <a
+                        key={`pop-md-${tagObj.tag}-${idx}`}
+                        href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
+                      >
+                        <Badge
+                          variant="secondary"
+                          className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
+                        >
+                          {tagObj.tag}
+                        </Badge>
                       </a>
                     ))}
                   </div>
@@ -316,7 +361,7 @@ export function DatasetHeader({
             {tags.slice(0, 8).map((tagObj, idx) => (
               <a
                 key={`lg-${tagObj.tag}-${idx}`}
-                href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}
+                href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
               >
                 <Badge
                   variant="secondary"
@@ -333,12 +378,25 @@ export function DatasetHeader({
                     +{tags.length - 8} more
                   </button>
                 </PopoverTrigger>
-                <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                  <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
+                <PopoverContent
+                  className="max-h-64 w-72 overflow-y-auto p-3"
+                  align="start"
+                >
+                  <p className="text-muted-foreground mb-2 text-xs font-medium">
+                    All tags ({tags.length})
+                  </p>
                   <div className="flex flex-wrap gap-1.5">
                     {tags.map((tagObj, idx) => (
-                      <a key={`pop-lg-${tagObj.tag}-${idx}`} href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}>
-                        <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tagObj.tag}</Badge>
+                      <a
+                        key={`pop-lg-${tagObj.tag}-${idx}`}
+                        href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
+                      >
+                        <Badge
+                          variant="secondary"
+                          className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
+                        >
+                          {tagObj.tag}
+                        </Badge>
                       </a>
                     ))}
                   </div>
@@ -352,7 +410,7 @@ export function DatasetHeader({
             {tags.slice(0, 10).map((tagObj, idx) => (
               <a
                 key={`xl-${tagObj.tag}-${idx}`}
-                href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}
+                href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
               >
                 <Badge
                   variant="secondary"
@@ -369,12 +427,25 @@ export function DatasetHeader({
                     +{tags.length - 10} more
                   </button>
                 </PopoverTrigger>
-                <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                  <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
+                <PopoverContent
+                  className="max-h-64 w-72 overflow-y-auto p-3"
+                  align="start"
+                >
+                  <p className="text-muted-foreground mb-2 text-xs font-medium">
+                    All tags ({tags.length})
+                  </p>
                   <div className="flex flex-wrap gap-1.5">
                     {tags.map((tagObj, idx) => (
-                      <a key={`pop-xl-${tagObj.tag}-${idx}`} href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}>
-                        <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tagObj.tag}</Badge>
+                      <a
+                        key={`pop-xl-${tagObj.tag}-${idx}`}
+                        href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
+                      >
+                        <Badge
+                          variant="secondary"
+                          className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
+                        >
+                          {tagObj.tag}
+                        </Badge>
                       </a>
                     ))}
                   </div>
@@ -388,7 +459,7 @@ export function DatasetHeader({
             {tags.slice(0, 12).map((tagObj, idx) => (
               <a
                 key={`2xl-${tagObj.tag}-${idx}`}
-                href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}
+                href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
               >
                 <Badge
                   variant="secondary"
@@ -405,12 +476,25 @@ export function DatasetHeader({
                     +{tags.length - 12} more
                   </button>
                 </PopoverTrigger>
-                <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                  <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
+                <PopoverContent
+                  className="max-h-64 w-72 overflow-y-auto p-3"
+                  align="start"
+                >
+                  <p className="text-muted-foreground mb-2 text-xs font-medium">
+                    All tags ({tags.length})
+                  </p>
                   <div className="flex flex-wrap gap-1.5">
                     {tags.map((tagObj, idx) => (
-                      <a key={`pop-2xl-${tagObj.tag}-${idx}`} href={`/search?type=data&tags.tag=${encodeURIComponent(tagObj.tag)}`}>
-                        <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tagObj.tag}</Badge>
+                      <a
+                        key={`pop-2xl-${tagObj.tag}-${idx}`}
+                        href={`/datasets?tag=${encodeURIComponent(tagObj.tag)}`}
+                      >
+                        <Badge
+                          variant="secondary"
+                          className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
+                        >
+                          {tagObj.tag}
+                        </Badge>
                       </a>
                     ))}
                   </div>
@@ -494,6 +578,16 @@ export function DatasetHeader({
 
       {/* LINE 5: Action Buttons */}
       <div className="flex-wrap. mt-2 mb-4 flex items-center justify-end sm:gap-2 md:gap-3 lg:gap-5 xl:gap-7">
+        {/* Edit Button — visible to any logged-in user; owner-only fields are gated in the form */}
+        {isAuthenticated && (
+          <Link href={`/datasets/${dataset.data_id}/edit`}>
+            <Button variant="outline" className="gap-2">
+              <Pencil className="h-4 w-4" />
+              Edit Dataset
+            </Button>
+          </Link>
+        )}
+
         {/* Download Dataset Dropdown */}
         <DatasetDownloadMenu
           datasetId={dataset.data_id}
@@ -515,15 +609,6 @@ export function DatasetHeader({
           taskCount={taskCount}
         />
 
-        {/* Like Button */}
-        <LikeButton
-          entityType="dataset"
-          entityId={dataset.data_id}
-          initialLikes={dataset.nr_of_likes || 0}
-          showCount={true}
-          size="md"
-        />
-
         {/* 3-dot Menu */}
         <DatasetActionsMenu
           datasetId={dataset.data_id}
diff --git a/app-next/src/components/flow/flow-header.tsx b/app-next/src/components/flow/flow-header.tsx
index 8560d9dd..7a185260 100644
--- a/app-next/src/components/flow/flow-header.tsx
+++ b/app-next/src/components/flow/flow-header.tsx
@@ -2,27 +2,24 @@ import Link from "next/link";
 import {
   Calendar,
   Hash,
-  Heart,
   CloudDownload,
   ThumbsDown,
   AlertCircle,
-  FlaskConical,
   GitBranch,
-  User,
-  Users,
-  Cog,
   Tag as TagIcon,
-  Play,
 } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS, entityColors } from "@/constants";
 import { Badge } from "@/components/ui/badge";
 import {
   Popover,
   PopoverTrigger,
   PopoverContent,
 } from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { LikeButton } from "@/components/ui/like-button";
+import { ClickableTagList } from "@/components/ui/clickable-tag-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { LikeButton } from "@/components/ui/like-button";
+import { EntityActionsMenu } from "@/components/ui/entity-actions-menu";
 import type { Flow } from "@/types/flow";
 
 interface FlowHeaderProps {
@@ -67,15 +64,23 @@ export function FlowHeader({ flow, runCount }: FlowHeaderProps) {
   };
 
   return (
-    <header className="space-y-6 border-b pb-6">
-      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+    <header className="space-y-6 border-b p-0">
+      <div className="mb-1 flex flex-col lg:flex-row lg:items-start lg:justify-between">
         {/* Left: Icon + Title + Metadata */}
         <div className="flex min-w-0 items-start gap-4">
           <div
             className="flex h-10 w-10 shrink-0 items-center justify-center p-0"
             aria-hidden="true"
           >
-            <Cog className="h-10 w-10 text-[#3b82f6]" strokeWidth={1.5} />
+            <FontAwesomeIcon
+              icon={ENTITY_ICONS.flow}
+              className="h-8 w-8"
+              style={{
+                color: entityColors.flow,
+                height: "2rem",
+                width: "2rem",
+              }}
+            />
           </div>
 
           <div className="mr-6 min-w-0 flex-1 space-y-1">
@@ -87,8 +92,8 @@ export function FlowHeader({ flow, runCount }: FlowHeaderProps) {
             <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
               {/* Flow ID Badge - using Flow color (blue) */}
               <Badge
-                variant="outline"
-                className="flex items-center gap-0.5 border-blue-200 bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-700 hover:bg-blue-200"
+                variant="openml"
+                className="flex items-center gap-0.5 bg-[#2f65cb] px-2 py-0.5 text-xs font-semibold text-white hover:bg-blue-800"
               >
                 <Hash className="h-3 w-3" />
                 {flow.flow_id}
@@ -133,13 +138,16 @@ export function FlowHeader({ flow, runCount }: FlowHeaderProps) {
               )}
             </div>
 
-            {/* LINE 3: Stats row (Matching Task style) - Wrapped to remove extra padding/margin */}
+            {/* LINE 3: Stats row */}
             <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
-              {/* Likes */}
-              <div className="flex items-center gap-1">
-                <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
-                <span>{likes} likes</span>
-              </div>
+              {/* Likes — interactive, synced */}
+              <LikeButton
+                entityType="flow"
+                entityId={flow.flow_id}
+                initialLikes={likes}
+                showCount={true}
+                size="sm"
+              />
 
               {/* Downvotes */}
               <div className="text-muted-foreground flex items-center gap-1">
@@ -161,7 +169,11 @@ export function FlowHeader({ flow, runCount }: FlowHeaderProps) {
 
               {/* Runs */}
               <div className="text-muted-foreground flex items-center gap-1">
-                <FlaskConical className="h-4 w-4 text-black dark:text-white" />
+                <FontAwesomeIcon
+                  icon={ENTITY_ICONS.run}
+                  className="h-4 w-4"
+                  style={{ color: entityColors.run }}
+                />
                 <span className="font-semibold">
                   {displayRunCount.toLocaleString()} runs
                 </span>
@@ -170,47 +182,85 @@ export function FlowHeader({ flow, runCount }: FlowHeaderProps) {
 
             {/* LINE 4: Tags Section */}
             {tags.length > 0 && (
-              <div className="flex flex-wrap items-center gap-2 pt-4">
-                <TagIcon className="text-muted-foreground h-4 w-4" />
-                <div className="flex flex-wrap gap-2">
-                  {tags.slice(0, 10).map((tag, idx) => (
-                    <Link
-                      key={`${tag}-${idx}`}
-                      href={`/search?type=flow&tag=${encodeURIComponent(tag)}`}
-                    >
-                      <Badge
-                        variant="secondary"
-                        className="border-accent hover:bg-primary/10 hover:text-primary cursor-pointer border text-xs transition-colors"
-                      >
-                        {tag}
-                      </Badge>
-                    </Link>
-                  ))}
+              <div className="flex items-start gap-2">
+                <TagIcon className="text-muted-foreground mt-1 h-4 w-4 shrink-0" />
+                <div className="min-w-0 flex-1">
+                  <ClickableTagList
+                    tags={tags.slice(0, 10)}
+                    getHref={(tag) => `/flows?tag=${encodeURIComponent(tag)}`}
+                  />
                   {tags.length > 10 && (
                     <Popover>
                       <PopoverTrigger asChild>
-                        <button className="text-muted-foreground hover:text-foreground cursor-pointer text-xs font-medium transition-colors">
+                        <button className="text-muted-foreground hover:text-foreground mt-2 cursor-pointer text-xs font-medium transition-colors">
                           +{tags.length - 10} more
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                        <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
-                        <div className="flex flex-wrap gap-1.5">
-                          {tags.map((tag, idx) => (
-                            <Link key={`pop-${tag}-${idx}`} href={`/search?type=flow&tag=${encodeURIComponent(tag)}`}>
-                              <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tag}</Badge>
-                            </Link>
-                          ))}
-                        </div>
+                      <PopoverContent
+                        className="max-h-64 w-72 overflow-y-auto p-3"
+                        align="start"
+                      >
+                        <p className="text-muted-foreground mb-2 text-xs font-medium">
+                          All tags ({tags.length})
+                        </p>
+                        <ClickableTagList
+                          tags={tags}
+                          getHref={(tag) =>
+                            `/flows?tag=${encodeURIComponent(tag)}`
+                          }
+                          className="gap-1.5"
+                        />
                       </PopoverContent>
                     </Popover>
                   )}
                 </div>
               </div>
             )}
+            {/* {tags.length > 0 && (
+              <div className="flex flex-wrap items-center gap-2">
+                <TagIcon className="text-muted-foreground h-4 w-4" />
+                <ClickableTagList
+                  tags={tags.slice(0, 10)}
+                  getHref={(tag) => `/flows?tag=${encodeURIComponent(tag)}`}
+                />
+                {tags.length > 10 && (
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <button className="text-muted-foreground hover:text-foreground cursor-pointer text-xs font-medium transition-colors">
+                        +{tags.length - 10} more
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      className="max-h-64 w-72 overflow-y-auto p-3"
+                      align="start"
+                    >
+                      <p className="text-muted-foreground mb-2 text-xs font-medium">
+                        All tags ({tags.length})
+                      </p>
+                      <ClickableTagList
+                        tags={tags}
+                        getHref={(tag) =>
+                          `/flows?tag=${encodeURIComponent(tag)}`
+                        }
+                        className="gap-1.5"
+                      />
+                    </PopoverContent>
+                  </Popover>
+                )}
+              </div>
+            )} */}
           </div>
         </div>
       </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap items-center justify-end gap-3 pb-4">
+        <EntityActionsMenu
+          entityType="flow"
+          entityId={flow.flow_id}
+          entityName={flow.name}
+        />
+      </div>
     </header>
   );
 }
diff --git a/app-next/src/components/measure/measure-header.tsx b/app-next/src/components/measure/measure-header.tsx
new file mode 100644
index 00000000..b73d8d5a
--- /dev/null
+++ b/app-next/src/components/measure/measure-header.tsx
@@ -0,0 +1,119 @@
+import { Calendar, Hash, ArrowUp, ArrowDown, Ruler } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS } from "@/constants/entityIcons";
+import { Badge } from "@/components/ui/badge";
+import type { Measure } from "@/types/measure";
+import { entityColors } from "@/constants/entityColors";
+
+const MEASURE_TYPE_LABELS: Record<string, string> = {
+  data_quality: "Data Quality",
+  evaluation_measure: "Evaluation Measure",
+  estimation_procedure: "Estimation Procedure",
+};
+
+interface MeasureHeaderProps {
+  measure: Measure;
+}
+
+export function MeasureHeader({ measure }: MeasureHeaderProps) {
+  const measureId =
+    measure.eval_id ||
+    measure.proc_id ||
+    measure.quality_id ||
+    measure.measure_id;
+  const typeLabel =
+    MEASURE_TYPE_LABELS[measure.measure_type] || measure.measure_type;
+
+  const uploadDate = measure.date
+    ? new Date(measure.date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      })
+    : null;
+
+  return (
+    <header className="space-y-6 border-b pb-4">
+      {/* LINE 1: Icon + Title */}
+      <div className="flex items-start gap-3">
+        <div
+          className="flex shrink-0 items-center justify-center"
+          aria-hidden="true"
+        >
+          <FontAwesomeIcon
+            icon={ENTITY_ICONS.measure}
+            size="3x"
+            style={{ color: entityColors.measures }}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {measure.name}
+          </h1>
+
+          {/* LINE 2: ID badge, type, date */}
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
+            {measureId !== undefined && (
+              <Badge
+                variant="default"
+                className="flex items-center gap-0.5 border-0 px-2 py-0.5 text-xs font-semibold text-white hover:opacity-90"
+                style={{ backgroundColor: entityColors.measures }}
+              >
+                <Hash className="h-3 w-3" />
+                {measureId}
+              </Badge>
+            )}
+
+            <Badge variant="outline" className="text-xs">
+              {typeLabel}
+            </Badge>
+
+            {uploadDate && (
+              <div className="text-muted-foreground flex items-center gap-1">
+                <Calendar className="h-4 w-4 text-gray-500" />
+                <span>{uploadDate}</span>
+              </div>
+            )}
+          </div>
+
+          {/* LINE 3: Properties */}
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 pt-1 text-sm">
+            {measure.higherIsBetter !== undefined && (
+              <div className="flex items-center gap-1">
+                {measure.higherIsBetter ? (
+                  <ArrowUp className="h-4 w-4 text-green-600" />
+                ) : (
+                  <ArrowDown className="h-4 w-4 text-red-500" />
+                )}
+                <span>
+                  {measure.higherIsBetter
+                    ? "Higher is better"
+                    : "Lower is better"}
+                </span>
+              </div>
+            )}
+
+            {measure.min !== undefined && (
+              <div className="text-muted-foreground flex items-center gap-1">
+                <Ruler className="h-4 w-4 text-gray-500" />
+                <span>Min: {measure.min}</span>
+              </div>
+            )}
+
+            {measure.max !== undefined && (
+              <div className="text-muted-foreground flex items-center gap-1">
+                <Ruler className="h-4 w-4 text-gray-500" />
+                <span>Max: {measure.max}</span>
+              </div>
+            )}
+
+            {measure.unit && (
+              <div className="text-muted-foreground">Unit: {measure.unit}</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/app-next/src/components/run/run-header.tsx b/app-next/src/components/run/run-header.tsx
index ac370a7a..21034056 100644
--- a/app-next/src/components/run/run-header.tsx
+++ b/app-next/src/components/run/run-header.tsx
@@ -1,22 +1,27 @@
 import Link from "next/link";
 import {
-  Calendar,
   User,
-  Database,
-  Cog,
-  Trophy,
-  FlaskConical,
   CheckCircle2,
   XCircle,
-  Heart,
   CloudDownload,
   MessageCircle,
-  ThumbsDown,
   Eye,
   EyeOff,
+  GitCompareArrows,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { entityColors } from "@/constants/entityColors";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS } from "@/constants/entityIcons";
+import { LikeButton } from "@/components/ui/like-button";
+import { EntityActionsMenu } from "@/components/ui/entity-actions-menu";
+
+function truncateFlowName(name: string): string {
+  const words = name.split(" ");
+  if (words.length <= 8) return name;
+  return `${words.slice(0, 4).join(" ")} ... ${words.slice(-4).join(" ")}`;
+}
 
 interface RunTaskSourceData {
   data_id?: number;
@@ -51,30 +56,38 @@ interface RunHeaderProps {
 }
 
 export function RunHeader({ run }: RunHeaderProps) {
-  const uploadDate =
-    run.uploader_date || run.upload_time
-      ? new Date(run.uploader_date || run.upload_time || "").toLocaleDateString(
-          "en-US",
-          {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-          },
-        )
-      : null;
-
   const hasError = !!run.error_message;
   const isPublic = run.visibility === "public" || !run.visibility;
+  const uploaderLabel =
+    run.uploader || (run.uploader_id ? `user/${run.uploader_id}` : null);
+  const uploaderHref = run.uploader
+    ? `/users/${run.uploader}`
+    : run.uploader_id
+      ? `/users/${run.uploader_id}`
+      : null;
+  const flowLabel = run.flow_name
+    ? truncateFlowName(run.flow_name)
+    : run.flow_id
+      ? `Flow #${run.flow_id}`
+      : null;
+
+  const likes = run.nr_of_likes || 0;
 
   return (
-    <header className="space-y-6 border-b pb-6">
+    <header className="space-y-3 border-b p-0">
       <div className="flex items-start gap-3">
-        <FlaskConical
+        <FontAwesomeIcon
+          icon={ENTITY_ICONS.run}
           className="mt-1 h-9 w-9 shrink-0"
-          style={{ color: entityColors.run, fill: entityColors.run }}
+          style={{
+            color: entityColors.run,
+            width: "32px",
+            height: "32px",
+          }}
         />
 
         <div className="flex-1 space-y-2">
+          {/* Line 1: Run ID + status badges */}
           <div className="flex items-center gap-3">
             <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
               Run #{run.run_id}
@@ -93,7 +106,6 @@ export function RunHeader({ run }: RunHeaderProps) {
                 Success
               </Badge>
             )}
-            {/* Visibility indicator */}
             <Badge
               variant="outline"
               className={`flex items-center gap-1 ${isPublic ? "border-green-500 text-green-600" : "border-orange-500 text-orange-600"}`}
@@ -107,87 +119,76 @@ export function RunHeader({ run }: RunHeaderProps) {
             </Badge>
           </div>
 
-          {/* Links to related entities */}
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
-            {/* Flow */}
-            {run.flow_id && (
-              <Link
-                href={`/flows/${run.flow_id}`}
-                className="flex items-center gap-1 text-[#3b82f6] hover:underline"
-              >
-                <Cog className="h-4 w-4" />
-                {run.flow_name || `Flow #${run.flow_id}`}
-              </Link>
-            )}
-
-            {/* Dataset */}
-            {run.task?.source_data?.data_id && (
-              <Link
-                href={`/datasets/${run.task.source_data.data_id}`}
-                className="flex items-center gap-1 text-green-600 hover:underline"
-              >
-                <Database className="h-4 w-4" />
-                {run.task.source_data.name ||
-                  `Dataset #${run.task.source_data.data_id}`}
-              </Link>
-            )}
-
-            {/* Task */}
-            {run.task_id && (
-              <Link
-                href={`/tasks/${run.task_id}`}
-                className="flex items-center gap-1 text-[#FFA726] hover:underline"
-              >
-                <Trophy className="h-4 w-4" />
-                Task #{run.task_id}
-              </Link>
-            )}
-          </div>
-
-          {/* Uploader and Date */}
+          {/* Line 2: Uploader + engagement metrics */}
           <div className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
-            {run.uploader && (
+            {uploaderLabel && uploaderHref && (
               <Link
-                href={`/users/${run.uploader}`}
+                href={uploaderHref}
                 className="flex items-center gap-1 hover:underline"
               >
                 <User className="h-4 w-4" />
-                {run.uploader}
+                {uploaderLabel}
               </Link>
             )}
-
-            {uploadDate && (
-              <div className="flex items-center gap-1">
-                <Calendar className="h-4 w-4" />
-                <span>{uploadDate}</span>
-              </div>
-            )}
-
-            {/* Engagement Metrics (NEW) */}
-            <span className="flex items-center gap-1" title="likes">
-              <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
-              {run.nr_of_likes || 0} likes
-            </span>
-
+            <LikeButton
+              entityType="run"
+              entityId={run.run_id}
+              initialLikes={likes}
+              showCount={true}
+              size="sm"
+            />
             <span className="flex items-center gap-1" title="downloads">
               <CloudDownload className="h-4 w-4 text-gray-500" />
               {run.nr_of_downloads || 0} downloads
             </span>
-
             <span className="flex items-center gap-1" title="issues">
               <MessageCircle className="h-4 w-4 text-orange-500" />
               {run.nr_of_issues || 0} issues
             </span>
+          </div>
 
-            {(run.nr_of_downvotes ?? 0) > 0 && (
-              <span className="flex items-center gap-1" title="downvotes">
-                <ThumbsDown className="h-4 w-4 text-red-500" />
-                {run.nr_of_downvotes} downvotes
-              </span>
+          {/* Line 3: Task ID + truncated flow name */}
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
+            {run.task_id && (
+              <Link
+                href={`/tasks/${run.task_id}`}
+                className="flex items-center gap-1 hover:underline"
+                style={{ color: entityColors.task }}
+              >
+                <FontAwesomeIcon icon={ENTITY_ICONS.task} className="h-4 w-4" />
+                Task #{run.task_id}
+              </Link>
+            )}
+            {run.flow_id && flowLabel && (
+              <Link
+                href={`/flows/${run.flow_id}`}
+                className="flex items-center gap-1 hover:underline"
+                style={{ color: entityColors.flow }}
+              >
+                <FontAwesomeIcon icon={ENTITY_ICONS.flow} className="h-4 w-4" />
+                <span className="max-w-[480px] truncate" title={run.flow_name}>
+                  {flowLabel}
+                </span>
+              </Link>
             )}
           </div>
         </div>
       </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap items-center justify-end gap-3 pb-4">
+        <Button variant="outline" size="sm" asChild>
+          <Link href={`/runs/compare?ids=${run.run_id}`}>
+            <GitCompareArrows className="h-4 w-4" />
+            Compare with…
+          </Link>
+        </Button>
+        <EntityActionsMenu
+          entityType="run"
+          entityId={run.run_id}
+          entityName={`Run #${run.run_id}`}
+        />
+      </div>
     </header>
   );
 }
diff --git a/app-next/src/components/task/task-header.tsx b/app-next/src/components/task/task-header.tsx
index 663106e7..a3ddd56f 100644
--- a/app-next/src/components/task/task-header.tsx
+++ b/app-next/src/components/task/task-header.tsx
@@ -1,15 +1,15 @@
 import Link from "next/link";
+import { ENTITY_ICONS, entityColors } from "@/constants";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Calendar,
   Hash,
   Target,
   Tag,
-  Heart,
   CloudDownload,
   Settings,
   ThumbsDown,
   AlertCircle,
-  FlaskConical,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -17,8 +17,11 @@ import {
   PopoverTrigger,
   PopoverContent,
 } from "@/components/ui/popover";
+import { ClickableTagList } from "@/components/ui/clickable-tag-list";
 import type { Task } from "@/types/task";
 import { ExperimentMenu } from "@/components/ui/experiment-menu";
+import { LikeButton } from "@/components/ui/like-button";
+import { EntityActionsMenu } from "@/components/ui/entity-actions-menu";
 
 interface TaskHeaderProps {
   task: Task;
@@ -49,8 +52,13 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
       })
     : null;
 
-  // Tags
-  const tags = task.tag ?? [];
+  // Tags — API may return a single string instead of string[]
+  const rawTags = task.tag;
+  const tags = Array.isArray(rawTags)
+    ? rawTags
+    : typeof rawTags === "string"
+      ? [rawTags]
+      : [];
 
   // Stats
   const likes = task.nr_of_likes ?? 0;
@@ -61,7 +69,7 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
   return (
     <header className="space-y-6 border-b p-0">
       {/* LINE 1: Task Icon + Title */}
-      <div className="flex items-start gap-3">
+      <div className="mb-0 flex items-start gap-3">
         <div
           className="flex h-9 w-9 shrink-0 items-center justify-center p-0"
           aria-hidden="true"
@@ -94,7 +102,6 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
               {task.task_id}
             </Badge>
 
-            {/* Dataset Link - Green Icon + Text */}
             {/* Dataset Link - Green Icon + Text */}
             {datasetId && (
               <Link
@@ -145,13 +152,16 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
             )}
           </div>
 
-          {/* LINE 3: Stats (Likes, Downvotes, Issues, Downloads, Runs) */}
+          {/* LINE 3: Stats */}
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1 pt-1 text-sm">
-            {/* Likes */}
-            <div className="flex items-center gap-1">
-              <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
-              <span>{likes} likes</span>
-            </div>
+            {/* Likes — interactive, synced */}
+            <LikeButton
+              entityType="task"
+              entityId={task.task_id}
+              initialLikes={likes}
+              showCount={true}
+              size="sm"
+            />
 
             {/* Downvotes */}
             <div className="text-muted-foreground flex items-center gap-1">
@@ -173,7 +183,11 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
 
             {/* Runs */}
             <div className="text-muted-foreground flex items-center gap-1">
-              <FlaskConical className="h-4 w-4 text-black dark:text-white" />
+              <FontAwesomeIcon
+                icon={ENTITY_ICONS.run}
+                className="h-4 w-4"
+                style={{ color: entityColors.run }}
+              />
               <span className="font-semibold">
                 {displayRunCount.toLocaleString()} runs
               </span>
@@ -186,19 +200,10 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
       {tags.length > 0 && (
         <div className="flex flex-wrap items-center gap-2 pl-12">
           <Tag className="text-muted-foreground h-4 w-4" />
-          {tags.slice(0, 10).map((tag, idx) => (
-            <Link
-              key={`${tag}-${idx}`}
-              href={`/search?type=task&tag=${encodeURIComponent(tag)}`}
-            >
-              <Badge
-                variant="secondary"
-                className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors"
-              >
-                {tag}
-              </Badge>
-            </Link>
-          ))}
+          <ClickableTagList
+            tags={tags.slice(0, 10)}
+            getHref={(tag) => `/tasks?tag=${encodeURIComponent(tag)}`}
+          />
           {tags.length > 10 && (
             <Popover>
               <PopoverTrigger asChild>
@@ -206,15 +211,18 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
                   +{tags.length - 10} more
                 </button>
               </PopoverTrigger>
-              <PopoverContent className="max-h-64 w-72 overflow-y-auto p-3" align="start">
-                <p className="text-muted-foreground mb-2 text-xs font-medium">All tags ({tags.length})</p>
-                <div className="flex flex-wrap gap-1.5">
-                  {tags.map((tag, idx) => (
-                    <Link key={`pop-${tag}-${idx}`} href={`/search?type=task&tag=${encodeURIComponent(tag)}`}>
-                      <Badge variant="secondary" className="hover:bg-primary/10 hover:text-primary cursor-pointer text-xs transition-colors">{tag}</Badge>
-                    </Link>
-                  ))}
-                </div>
+              <PopoverContent
+                className="max-h-64 w-72 overflow-y-auto p-3"
+                align="start"
+              >
+                <p className="text-muted-foreground mb-2 text-xs font-medium">
+                  All tags ({tags.length})
+                </p>
+                <ClickableTagList
+                  tags={tags}
+                  getHref={(tag) => `/tasks?tag=${encodeURIComponent(tag)}`}
+                  className="gap-1.5"
+                />
               </PopoverContent>
             </Popover>
           )}
@@ -223,6 +231,11 @@ export function TaskHeader({ task, runCount }: TaskHeaderProps) {
 
       {/* LINE 5: Action Buttons */}
       <div className="flex flex-wrap items-center justify-end gap-3 pt-2 pb-4">
+        <EntityActionsMenu
+          entityType="task"
+          entityId={task.task_id}
+          entityName={`${taskType} on ${datasetName}`}
+        />
         <ExperimentMenu
           entityType="task"
           entityId={task.task_id}