diff --git a/app-next/docs/OPEN_ITEMS.md b/app-next/docs/OPEN_ITEMS.md
index d7625432..51ec54fc 100644
--- a/app-next/docs/OPEN_ITEMS.md
+++ b/app-next/docs/OPEN_ITEMS.md
@@ -6,7 +6,7 @@ Last updated: 2026-02-18
 
 | Item                        | Status      | File                           | Details                                                                                                                                                                   |
 | --------------------------- | ----------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| CORS on `data.openml.org`   | Blocked     | `hooks/useParquetData.ts`      | All data files proxied through `/api/proxy-file` because `data.openml.org` blocks browser requests. Adding `Access-Control-Allow-Origin: *` would remove this workaround. |
+| CORS on `data.openml.org`   | Discussing  | `hooks/useParquetData.ts`      | **Current**: Data files < 5MB proxied through `/api/proxy-file` due to missing CORS headers. **Team feedback** (Joaquin): Need to understand why CORS is needed; may be unsafe. **Alternative being considered**: Precompute stats and serve via main REST API instead of requiring browser access to raw data files. |
 | Dash 502 for large datasets | Bug         | (server-side)                  | `openml.org/dashboard/data/47160` returns 502. Missing `metric` component in Dash callback.                                                                               |
 | Bookmark API                | Not started | `dataset-actions-menu.tsx:98`  | UI exists, no backend call.                                                                                                                                               |
 | Collections API             | Not started | `dataset-actions-menu.tsx:289` | Dialog is placeholder, needs endpoint to fetch/create collections.                                                                                                        |
@@ -25,11 +25,11 @@ Last updated: 2026-02-18
 
 | Item                          | Status       | Details                                                                           |
 | ----------------------------- | ------------ | --------------------------------------------------------------------------------- |
-| Distribution (small datasets) | Working      | Parquet/ARFF < 10MB loads in browser.                                             |
-| Distribution (large datasets) | Partial      | Nominal features show from metadata. Numeric shows "coming soon".                 |
+| Distribution (small datasets) | Working      | Parquet/ARFF < 5MB loads in browser via `/api/proxy-file`.                        |
+| Distribution (large datasets) | Partial      | Datasets > 5MB use Dash iframe: `/dashboard/data-features/{id}`. Nominal features show from metadata. Numeric shows "coming soon". |
 | Correlation                   | Working      | Shows when parquet loads. "Coming soon" otherwise.                                |
 | Parquet-wasm                  | Intermittent | Sometimes fails silently on valid files (e.g. dataset 1590). Falls back to ARFF.  |
-| Dash JSON API                 | Future       | Server-side computation for large datasets. Would replace "coming soon" messages. |
+| Dash JSON API                 | Discussing   | **Current**: Large datasets use Dash iframe. **Team feedback** (Joaquin): Considering precomputing main statistics and dataset preview, serving via main REST API (not Flask). Would allow rendering charts in Next.js with consistent styling instead of iframes. |
 
 ## 4. Auth & Infrastructure
 
@@ -43,3 +43,28 @@ Last updated: 2026-02-18
 
 - **Question for team**: Incremental pushes to Vercel preview vs. batched PRs — what works best?
 - Minor merge conflicts when syncing with upstream.
+
+## Extras improvements
+
+### Dataset Edit Form - Markdown Preview
+
+**Current state**: The dataset edit form (`dataset-edit-form.tsx`) has a plain `<Textarea>` for the description field.
+
+**Enhancement opportunity**: The legacy React app (`server/src/client/app/src/pages/auth/DataEdit.js`) includes a nice 2-tab interface for editing descriptions with Markdown:
+
+- **Tab 1 "Description"**: Edit mode with raw Markdown syntax
+- **Tab 2 "Preview"**: Rendered preview using `ReactMarkdown`
+- Includes a Markdown icon linking to GitHub's Markdown guide
+
+**Implementation**:
+
+- Add tabs component (Edit/Preview) for the description field
+- Use `react-markdown` or similar library for preview rendering
+- Add Markdown helper icon/link for user guidance
+- Consider applying to other multiline text fields (citation, etc.)
+
+**Files affected**:
+
+- `app-next/src/components/dataset/dataset-edit-form.tsx`
+
+**Priority**: Low (nice-to-have UX improvement)
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..1d71cfef 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,16 @@
 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 { Award, Database, Flag, Cog, FlaskConical, Calendar, User } from "lucide-react";
 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 { entityColors } from "@/constants/entityColors";
 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,12 +21,10 @@ 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`,
-      description:
+      title: `${study.name} - ${typeLabel} - OpenML Benchmarks`, description:
         study.description?.substring(0, 160) ||
         `OpenML Benchmark ${typeLabel} #${id}`,
       openGraph: {
@@ -90,37 +57,32 @@ 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: Cog,
+      color: entityColors.flow,
     },
     {
       label: "Runs",
       count: study.runs_included || 0,
-      icon: Zap,
-      color: "text-purple-600",
-      href: `/runs?q=study_${id}`,
+      icon: FlaskConical,
+      color: entityColors.run,
     },
   ];
 
@@ -130,14 +92,21 @@ 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" />
+            <Award
+              className="h-8 w-8"
+              style={{ color: entityColors.benchmarks }}
+              aria-hidden="true"
+            />
             {study.name}
           </h1>
 
@@ -166,11 +135,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 +149,54 @@ 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={
+                    <Award
+                      className="h-4 w-4"
+                      style={{ color: entityColors.benchmarks }}
+                    />
+                  }
+                  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)/collections/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/collections/[id]/page.tsx
index 3fd15027..96d101da 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,16 @@
 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, Cog, FlaskConical, Calendar, User } from "lucide-react";
 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 { entityColors } from "@/constants/entityColors";
 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,
@@ -100,29 +67,25 @@ 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: Cog,
+      color: entityColors.flow,
     },
     {
       label: "Runs",
       count: study.runs_included || 0,
-      icon: Zap,
-      color: "text-purple-600",
-      href: `/runs?q=study_${id}`,
+      icon: FlaskConical,
+      color: entityColors.run,
     },
   ];
 
@@ -132,14 +95,21 @@ 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" />
+            <Layers
+              className="h-8 w-8"
+              style={{ color: entityColors.collections }}
+              aria-hidden="true"
+            />
             {study.name}
           </h1>
 
@@ -168,11 +138,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 +152,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)/measures/[id]/page.tsx b/app-next/src/app/[locale]/(explore)/measures/[id]/page.tsx
new file mode 100644
index 00000000..b974cdc7
--- /dev/null
+++ b/app-next/src/app/[locale]/(explore)/measures/[id]/page.tsx
@@ -0,0 +1,194 @@
+import { Metadata } from "next";
+import { setRequestLocale } from "next-intl/server";
+import Link from "next/link";
+import { FileText, Flag, Hash, FlaskConical, Database, BarChart3 } from "lucide-react";
+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 { entityColors } from "@/constants/entityColors";
+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="Tasks that use this measure for evaluation"
+              icon={
+                <Flag
+                  className="h-4 w-4"
+                  style={{ color: 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">
+                                  <FlaskConical className="h-4 w-4 fill-red-500 text-red-500" />
+                                  {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/page.tsx b/app-next/src/app/[locale]/(explore)/measures/data/page.tsx
index ef77f478..52990726 100644
--- a/app-next/src/app/[locale]/(explore)/measures/data/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/data/page.tsx
@@ -1,6 +1,8 @@
 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS } from "@/constants/entityIcons";
+import { entityColors } from "@/constants/entityColors";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -37,7 +39,12 @@ 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.measure}
+              className="h-8 w-8"
+              style={{ color: entityColors.measures }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Data Quality Measures
@@ -49,8 +56,9 @@ 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" />
+      <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..1516e0a1 100644
--- a/app-next/src/app/[locale]/(explore)/measures/evaluation/page.tsx
+++ b/app-next/src/app/[locale]/(explore)/measures/evaluation/page.tsx
@@ -1,6 +1,8 @@
 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS } from "@/constants/entityIcons";
+import { entityColors } from "@/constants/entityColors";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -39,7 +41,12 @@ 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.measure}
+              className="h-8 w-8"
+              style={{ color: entityColors.measures }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Evaluation Measures
@@ -51,8 +58,9 @@ 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" />
+      <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/procedures/page.tsx b/app-next/src/app/[locale]/(explore)/measures/procedures/page.tsx
index ead406b7..43e04c59 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,8 @@
 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS } from "@/constants/entityIcons";
+import { entityColors } from "@/constants/entityColors";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -36,7 +38,12 @@ 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.measure}
+              className="h-8 w-8"
+              style={{ color: entityColors.measures }}
+              aria-hidden="true"
+            />
             <div>
               <h1 className="text-3xl font-bold tracking-tight">
                 Estimation Procedures
@@ -48,8 +55,9 @@ 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" />
+      <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/api/datasets/[id]/stats/route.ts b/app-next/src/app/api/datasets/[id]/stats/route.ts
new file mode 100644
index 00000000..716b922f
--- /dev/null
+++ b/app-next/src/app/api/datasets/[id]/stats/route.ts
@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const FLASK_BACKEND_URL =
+  process.env.FLASK_BACKEND_URL || "http://localhost:5000";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id: datasetId } = await params;
+  const searchParams = request.nextUrl.searchParams;
+  const maxPreviewRows = searchParams.get("max_preview_rows") || "100";
+  const forceRefresh = searchParams.get("force_refresh") || "false";
+
+  try {
+    const flaskUrl = `${FLASK_BACKEND_URL}/api/v1/datasets/${datasetId}/stats?max_preview_rows=${maxPreviewRows}&force_refresh=${forceRefresh}`;
+
+    console.log(`[Stats API] Fetching from: ${flaskUrl}`);
+
+    const response = await fetch(flaskUrl, {
+      headers: {
+        "Accept": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const contentType = response.headers.get("content-type");
+
+      // If Flask returned XML error (OpenML production server)
+      if (contentType?.includes("xml")) {
+        console.error(`[Stats API] Flask not available at ${FLASK_BACKEND_URL}. Is Flask running locally?`);
+        return NextResponse.json(
+          {
+            error: `Stats API not available. Flask may not be running at ${FLASK_BACKEND_URL}. Start Flask with: cd server && python app.py`,
+          },
+          { status: 503 }
+        );
+      }
+
+      const errorText = await response.text();
+      console.error(`[Stats API] Flask error:`, errorText);
+      return NextResponse.json(
+        { error: `Flask error: ${errorText}` },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    console.log(`[Stats API] Success for dataset ${datasetId}`);
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("[Stats API] Failed to fetch stats from Flask:", error);
+
+    // Network error - Flask likely not running
+    if (error instanceof TypeError && error.message.includes("fetch")) {
+      return NextResponse.json(
+        {
+          error: `Cannot connect to Flask at ${FLASK_BACKEND_URL}. Is Flask running? Start with: cd server && python app.py`,
+        },
+        { status: 503 }
+      );
+    }
+
+    return NextResponse.json(
+      {
+        error:
+          error instanceof Error
+            ? error.message
+            : "Failed to fetch dataset statistics",
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app-next/src/app/api/search/route.ts b/app-next/src/app/api/search/route.ts
index fab9e4c1..e2c2a0cf 100644
--- a/app-next/src/app/api/search/route.ts
+++ b/app-next/src/app/api/search/route.ts
@@ -44,12 +44,28 @@ export async function POST(req: NextRequest) {
       const { indexName, esQuery } = body;
       const url = getElasticsearchUrl(`${indexName}/_search`);
 
-      const response = await axios.post(url, esQuery, {
+      console.log(`[Search API] Case 2: indexName="${indexName}", URL="${url}"`);
+      console.log(`[Search API] ES Query:`, JSON.stringify(esQuery, null, 2));
+
+      // Use fetch instead of axios (matches original MeasureList pattern)
+      const response = await fetch(url, {
+        method: "POST",
         headers: { "Content-Type": "application/json" },
-        timeout: 30000,
+        body: JSON.stringify(esQuery),
       });
 
-      return NextResponse.json(response.data);
+      console.log(`[Search API] ES Response status:`, response.status);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error(`[Search API] ES Error:`, errorText);
+        throw new Error(`Elasticsearch returned ${response.status}: ${errorText}`);
+      }
+
+      const data = await response.json();
+      console.log(`[Search API] ES Response hits:`, data.hits?.total);
+
+      return NextResponse.json(data);
     }
 
     // Case 3: Raw multi-search or other requests (fallback)
@@ -61,10 +77,17 @@ export async function POST(req: NextRequest) {
     const duration = Date.now() - startTime;
     console.error(`❌ [Search API] Failed after ${duration}ms:`, error.message);
 
+    // Log full Elasticsearch error details
+    if (error.response) {
+      console.error(`[Search API] ES Error Status:`, error.response.status);
+      console.error(`[Search API] ES Error Data:`, JSON.stringify(error.response.data, null, 2));
+    }
+
     return NextResponse.json(
       {
         error: "Search failed",
         details: error.message,
+        esError: error.response?.data,
       },
       { status: error.response?.status || 500 },
     );
diff --git a/app-next/src/app/api/study/[id]/datasets/route.ts b/app-next/src/app/api/study/[id]/datasets/route.ts
new file mode 100644
index 00000000..8fc8830d
--- /dev/null
+++ b/app-next/src/app/api/study/[id]/datasets/route.ts
@@ -0,0 +1,91 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getElasticsearchUrl } from "@/lib/elasticsearch";
+
+/**
+ * GET /api/study/:id/datasets?page=1&limit=20&q=search
+ *
+ * Fetches the dataset IDs from the OpenML REST API for this study,
+ * then returns a paginated slice from Elasticsearch with full details.
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const searchParams = request.nextUrl.searchParams;
+  const page = Math.max(1, parseInt(searchParams.get("page") || "1", 10));
+  const limit = Math.min(100, Math.max(1, parseInt(searchParams.get("limit") || "20", 10)));
+  const query = searchParams.get("q") || "";
+  const sortField = searchParams.get("sort") || "runs";
+  const sortDir = searchParams.get("dir") || "desc";
+
+  // 1. Fetch study member IDs from REST API (cached)
+  const studyRes = await fetch(
+    `https://www.openml.org/api/v1/json/study/${id}`,
+    { next: { revalidate: 3600 } },
+  );
+
+  if (!studyRes.ok) {
+    return NextResponse.json(
+      { error: "Study not found" },
+      { status: 404 },
+    );
+  }
+
+  const studyJson = await studyRes.json();
+  const allIds: string[] = studyJson.study?.data?.data_id || [];
+
+  if (allIds.length === 0) {
+    return NextResponse.json({ results: [], total: 0, page, limit });
+  }
+
+  // 2. Build ES query — filter by IDs + optional text search
+  const must: Record<string, unknown>[] = [
+    { ids: { values: allIds } },
+  ];
+  if (query) {
+    must.push({
+      multi_match: {
+        query,
+        fields: ["name^3", "description"],
+        type: "best_fields",
+      },
+    });
+  }
+
+  const esUrl = getElasticsearchUrl("data/_search");
+  const esRes = await fetch(esUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      query: { bool: { must } },
+      _source: [
+        "data_id", "name", "version", "description", "format", "status", "date",
+        "qualities.NumberOfInstances", "qualities.NumberOfFeatures",
+        "qualities.NumberOfClasses",
+        "runs", "nr_of_likes", "nr_of_downloads", "uploader",
+      ],
+      from: (page - 1) * limit,
+      size: limit,
+      sort: query
+        ? [{ _score: { order: "desc" } }]
+        : [{ [sortField]: { order: sortDir } }],
+    }),
+    next: { revalidate: 300 },
+  });
+
+  if (!esRes.ok) {
+    return NextResponse.json(
+      { error: "Failed to fetch datasets" },
+      { status: 500 },
+    );
+  }
+
+  const esData = await esRes.json();
+  const results = (esData.hits?.hits || []).map(
+    (hit: { _source: Record<string, unknown> }) => hit._source,
+  );
+  const total = esData.hits?.total?.value ?? esData.hits?.total ?? 0;
+
+  return NextResponse.json({ results, total, page, limit });
+}
diff --git a/app-next/src/app/api/study/[id]/tasks/route.ts b/app-next/src/app/api/study/[id]/tasks/route.ts
new file mode 100644
index 00000000..412577ff
--- /dev/null
+++ b/app-next/src/app/api/study/[id]/tasks/route.ts
@@ -0,0 +1,90 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getElasticsearchUrl } from "@/lib/elasticsearch";
+
+/**
+ * GET /api/study/:id/tasks?page=1&limit=20&q=search
+ *
+ * Fetches the task IDs from the OpenML REST API for this study,
+ * then returns a paginated slice from Elasticsearch with full details.
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const searchParams = request.nextUrl.searchParams;
+  const page = Math.max(1, parseInt(searchParams.get("page") || "1", 10));
+  const limit = Math.min(100, Math.max(1, parseInt(searchParams.get("limit") || "20", 10)));
+  const query = searchParams.get("q") || "";
+  const sortField = searchParams.get("sort") || "runs";
+  const sortDir = searchParams.get("dir") || "desc";
+
+  // 1. Fetch study member IDs from REST API (cached)
+  const studyRes = await fetch(
+    `https://www.openml.org/api/v1/json/study/${id}`,
+    { next: { revalidate: 3600 } },
+  );
+
+  if (!studyRes.ok) {
+    return NextResponse.json(
+      { error: "Study not found" },
+      { status: 404 },
+    );
+  }
+
+  const studyJson = await studyRes.json();
+  const allIds: string[] = studyJson.study?.tasks?.task_id || [];
+
+  if (allIds.length === 0) {
+    return NextResponse.json({ results: [], total: 0, page, limit });
+  }
+
+  // 2. Build ES query — filter by IDs + optional text search
+  const must: Record<string, unknown>[] = [
+    { ids: { values: allIds } },
+  ];
+  if (query) {
+    must.push({
+      multi_match: {
+        query,
+        fields: ["source_data.name^3", "task_type^2"],
+        type: "best_fields",
+      },
+    });
+  }
+
+  const esUrl = getElasticsearchUrl("task/_search");
+  const esRes = await fetch(esUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      query: { bool: { must } },
+      _source: [
+        "task_id", "task_type_id", "task_type",
+        "source_data", "estimation_procedure",
+        "runs", "nr_of_likes", "nr_of_downloads",
+      ],
+      from: (page - 1) * limit,
+      size: limit,
+      sort: query
+        ? [{ _score: { order: "desc" } }]
+        : [{ [sortField]: { order: sortDir } }],
+    }),
+    next: { revalidate: 300 },
+  });
+
+  if (!esRes.ok) {
+    return NextResponse.json(
+      { error: "Failed to fetch tasks" },
+      { status: 500 },
+    );
+  }
+
+  const esData = await esRes.json();
+  const results = (esData.hits?.hits || []).map(
+    (hit: { _source: Record<string, unknown> }) => hit._source,
+  );
+  const total = esData.hits?.total?.value ?? esData.hits?.total ?? 0;
+
+  return NextResponse.json({ results, total, page, limit });
+}
diff --git a/app-next/src/components/benchmark/benchmark-datasets-section.tsx b/app-next/src/components/benchmark/benchmark-datasets-section.tsx
new file mode 100644
index 00000000..157a4519
--- /dev/null
+++ b/app-next/src/components/benchmark/benchmark-datasets-section.tsx
@@ -0,0 +1,654 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import {
+  Database,
+  ChevronRight,
+  ChevronLeft,
+  Search,
+  FlaskConical,
+  Heart,
+  CloudDownload,
+  BarChart3,
+  Clock,
+  Hash,
+  Loader2,
+  List,
+  Table2,
+  Grid3x3,
+  PanelLeftClose,
+  ArrowRight,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { entityColors } from "@/constants/entityColors";
+import { truncateName } from "@/lib/utils";
+
+interface DatasetResult {
+  data_id: number;
+  name: string;
+  version?: number;
+  description?: string;
+  format?: string;
+  date?: string;
+  uploader?: string;
+  qualities?: {
+    NumberOfInstances?: number;
+    NumberOfFeatures?: number;
+    NumberOfClasses?: number;
+  };
+  runs?: number;
+  nr_of_likes?: number;
+  nr_of_downloads?: number;
+}
+
+interface BenchmarkDatasetsSectionProps {
+  studyId: string;
+  totalCount: number;
+}
+
+const SORT_OPTIONS = [
+  { id: "runs", label: "Most Runs", field: "runs", dir: "desc" },
+  { id: "recent", label: "Most Recent", field: "date", dir: "desc" },
+  { id: "likes", label: "Most Likes", field: "nr_of_likes", dir: "desc" },
+  {
+    id: "downloads",
+    label: "Most Downloads",
+    field: "nr_of_downloads",
+    dir: "desc",
+  },
+  {
+    id: "instances",
+    label: "Most Instances",
+    field: "qualities.NumberOfInstances",
+    dir: "desc",
+  },
+  {
+    id: "features",
+    label: "Most Features",
+    field: "qualities.NumberOfFeatures",
+    dir: "desc",
+  },
+];
+
+const PAGE_SIZE = 20;
+
+export function BenchmarkDatasetsSection({
+  studyId,
+  totalCount,
+}: BenchmarkDatasetsSectionProps) {
+  const [datasets, setDatasets] = useState<DatasetResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(totalCount);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [view, setView] = useState("list");
+  const [sortId, setSortId] = useState("runs");
+  const [selectedDataset, setSelectedDataset] = useState<DatasetResult | null>(
+    null,
+  );
+
+  const fetchPage = useCallback(
+    async (p: number, q: string, sort: string) => {
+      setLoading(true);
+      try {
+        const sortOpt =
+          SORT_OPTIONS.find((s) => s.id === sort) || SORT_OPTIONS[0];
+        const params = new URLSearchParams({
+          page: p.toString(),
+          limit: PAGE_SIZE.toString(),
+          sort: sortOpt.field,
+          dir: sortOpt.dir,
+        });
+        if (q) params.set("q", q);
+
+        const res = await fetch(`/api/study/${studyId}/datasets?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          setDatasets(data.results);
+          setTotal(data.total);
+        }
+      } catch (err) {
+        console.error("Failed to fetch datasets:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [studyId],
+  );
+
+  useEffect(() => {
+    fetchPage(page, searchQuery, sortId);
+  }, [page, searchQuery, sortId, fetchPage]);
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const handleSearch = () => {
+    setPage(1);
+    setSearchQuery(searchInput);
+  };
+
+  if (totalCount === 0) return null;
+
+  const renderStats = (d: DatasetResult, size: "sm" | "xs" = "sm") => {
+    const iconSize = size === "sm" ? "h-4 w-4" : "h-3 w-3";
+    return (
+      <div className={`flex flex-wrap gap-x-4 gap-y-1 text-${size}`}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <FlaskConical
+                className={`${iconSize} fill-red-500 text-red-500`}
+              />
+              {Number(d.runs || 0).toLocaleString()}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Runs</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <Heart
+                className={`${iconSize} fill-purple-500 text-purple-500`}
+              />
+              {Number(d.nr_of_likes || 0)}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Likes</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <CloudDownload className={`${iconSize} text-blue-500`} />
+              {Number(d.nr_of_downloads || 0)}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Downloads</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <BarChart3 className={`${iconSize} text-gray-500`} />
+              {d.qualities?.NumberOfInstances
+                ? Number(d.qualities.NumberOfInstances).toLocaleString()
+                : "N/A"}{" "}
+              x{" "}
+              {d.qualities?.NumberOfFeatures
+                ? Number(d.qualities.NumberOfFeatures)
+                : "N/A"}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Dimensions (rows x columns)</TooltipContent>
+        </Tooltip>
+        {d.date && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-muted-foreground flex items-center gap-1.5">
+                <Clock className={iconSize} />
+                {new Date(d.date).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Upload date</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <CollapsibleSection
+      id="datasets"
+      title="Datasets"
+      description="Datasets included in this benchmark"
+      icon={
+        <Database className="h-4 w-4" style={{ color: entityColors.data }} />
+      }
+      badge={totalCount}
+      defaultOpen={true}
+    >
+      {/* Controls bar */}
+      <div className="bg-background mb-3 flex items-center justify-between gap-4 border-b px-3 py-2">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-sm">Sort:</span>
+            <Select
+              value={sortId}
+              onValueChange={(v) => {
+                setSortId(v);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger className="h-8 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.id} value={opt.id}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <ToggleGroup
+            type="single"
+            value={view}
+            onValueChange={(v) => v && setView(v)}
+            className="border"
+          >
+            <ToggleGroupItem
+              value="list"
+              aria-label="List view"
+              className="data-[state=on]:bg-accent"
+            >
+              <List className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="table"
+              aria-label="Table view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Table2 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="grid"
+              aria-label="Grid view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Grid3x3 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="split"
+              aria-label="Split view"
+              className="data-[state=on]:bg-accent"
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="relative w-48">
+            <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
+            <Input
+              placeholder="Search datasets..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+              className="h-8 pl-8 text-sm"
+            />
+          </div>
+          <span className="text-muted-foreground text-xs whitespace-nowrap">
+            {total.toLocaleString()} results
+          </span>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {/* LIST VIEW */}
+          {view === "list" && (
+            <div className="space-y-0">
+              {datasets.length > 0 ? (
+                datasets.map((d) => (
+                  <div
+                    key={d.data_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">
+                        <Database
+                          className="mt-0.5 h-5 w-5 shrink-0"
+                          style={{ color: entityColors.data }}
+                        />
+                        <div className="flex items-baseline gap-2">
+                          <h3 className="text-base font-semibold">
+                            {truncateName(d.name)}
+                          </h3>
+                          <span className="text-primary text-xs">
+                            v.{d.version || 1} ✓
+                          </span>
+                        </div>
+                      </div>
+                      {d.description && (
+                        <p className="text-muted-foreground mb-2 line-clamp-2 text-sm">
+                          {d.description}
+                        </p>
+                      )}
+                      {renderStats(d)}
+                    </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.data }}
+                    >
+                      <Hash className="h-3 w-3" />
+                      {d.data_id}
+                    </Badge>
+                    <Link
+                      href={`/datasets/${d.data_id}`}
+                      className="absolute inset-0"
+                      aria-label={`View ${d.name}`}
+                    >
+                      <span className="sr-only">View {d.name}</span>
+                    </Link>
+                  </div>
+                ))
+              ) : (
+                <div className="text-muted-foreground p-8 text-center">
+                  {searchQuery
+                    ? "No datasets match your search"
+                    : "No datasets found"}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TABLE VIEW */}
+          {view === "table" && (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-muted/50 border-b">
+                    <th className="px-3 py-2 text-left font-medium">ID</th>
+                    <th className="px-3 py-2 text-left font-medium">Name</th>
+                    <th className="px-3 py-2 text-right font-medium">
+                      Instances
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium">
+                      Features
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium">Runs</th>
+                    <th className="px-3 py-2 text-left font-medium">Date</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {datasets.length > 0 ? (
+                    datasets.map((d) => (
+                      <tr
+                        key={d.data_id}
+                        className="hover:bg-accent border-b transition-colors"
+                      >
+                        <td className="px-3 py-2">
+                          <Badge
+                            variant="openml"
+                            className="text-[10px] font-semibold text-white"
+                            style={{ backgroundColor: entityColors.data }}
+                          >
+                            {d.data_id}
+                          </Badge>
+                        </td>
+                        <td className="max-w-[300px] truncate px-3 py-2 font-medium">
+                          <Link
+                            href={`/datasets/${d.data_id}`}
+                            className="hover:underline"
+                          >
+                            {truncateName(d.name)}
+                          </Link>
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {d.qualities?.NumberOfInstances
+                            ? Number(
+                                d.qualities.NumberOfInstances,
+                              ).toLocaleString()
+                            : "-"}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {d.qualities?.NumberOfFeatures
+                            ? Number(
+                                d.qualities.NumberOfFeatures,
+                              ).toLocaleString()
+                            : "-"}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {Number(d.runs || 0).toLocaleString()}
+                        </td>
+                        <td className="text-muted-foreground px-3 py-2">
+                          {d.date
+                            ? new Date(d.date).toLocaleDateString("en-US", {
+                                year: "numeric",
+                                month: "short",
+                              })
+                            : "-"}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={6}
+                        className="text-muted-foreground px-3 py-8 text-center"
+                      >
+                        No datasets found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* GRID VIEW */}
+          {view === "grid" && (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {datasets.length > 0 ? (
+                datasets.map((d) => (
+                  <Link
+                    key={d.data_id}
+                    href={`/datasets/${d.data_id}`}
+                    className="hover:bg-accent group relative flex flex-col rounded-lg border p-4 transition-colors"
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <Database
+                        className="h-5 w-5"
+                        style={{ color: entityColors.data }}
+                      />
+                      <Badge
+                        variant="openml"
+                        className="text-[10px] font-semibold text-white"
+                        style={{ backgroundColor: entityColors.data }}
+                      >
+                        <Hash className="h-2.5 w-2.5" />
+                        {d.data_id}
+                      </Badge>
+                    </div>
+                    <h4 className="mb-1 line-clamp-1 text-sm font-semibold">
+                      {d.name}
+                    </h4>
+                    {d.description && (
+                      <p className="text-muted-foreground mb-3 line-clamp-2 text-xs">
+                        {d.description}
+                      </p>
+                    )}
+                    <div className="mt-auto flex flex-wrap gap-x-3 gap-y-1 text-xs">
+                      <span className="flex items-center gap-1">
+                        <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                        {Number(d.runs || 0).toLocaleString()}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <BarChart3 className="h-3 w-3 text-gray-500" />
+                        {d.qualities?.NumberOfInstances
+                          ? Number(
+                              d.qualities.NumberOfInstances,
+                            ).toLocaleString()
+                          : "?"}{" "}
+                        x {d.qualities?.NumberOfFeatures || "?"}
+                      </span>
+                    </div>
+                  </Link>
+                ))
+              ) : (
+                <div className="text-muted-foreground col-span-full p-8 text-center">
+                  No datasets found
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* SPLIT VIEW */}
+          {view === "split" && (
+            <div className="flex gap-0">
+              <div
+                className="w-[380px] space-y-0 overflow-y-auto border-r"
+                style={{ maxHeight: "600px" }}
+              >
+                {datasets.length > 0 ? (
+                  (() => {
+                    if (
+                      !selectedDataset ||
+                      !datasets.find(
+                        (d) => d.data_id === selectedDataset.data_id,
+                      )
+                    ) {
+                      setTimeout(() => setSelectedDataset(datasets[0]), 0);
+                    }
+                    return datasets.map((d) => (
+                      <button
+                        key={d.data_id}
+                        onClick={() => setSelectedDataset(d)}
+                        className={`hover:bg-accent block w-full cursor-pointer border-b p-3 text-left transition-colors ${selectedDataset?.data_id === d.data_id ? "bg-accent" : ""}`}
+                      >
+                        <div className="mb-1 flex items-start gap-2">
+                          <Database
+                            className="mt-0.5 h-4 w-4 shrink-0"
+                            style={{ color: entityColors.data }}
+                          />
+                          <h4 className="line-clamp-1 text-sm font-semibold">
+                            {truncateName(d.name)}
+                          </h4>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+                          <span className="flex items-center gap-1">
+                            <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                            {Number(d.runs || 0).toLocaleString()}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <BarChart3 className="h-3 w-3 text-gray-500" />
+                            {d.qualities?.NumberOfInstances
+                              ? Number(
+                                  d.qualities.NumberOfInstances,
+                                ).toLocaleString()
+                              : "?"}{" "}
+                            x {d.qualities?.NumberOfFeatures || "?"}
+                          </span>
+                        </div>
+                      </button>
+                    ));
+                  })()
+                ) : (
+                  <div className="text-muted-foreground p-8 text-center">
+                    No datasets found
+                  </div>
+                )}
+              </div>
+              <div
+                className="flex-1 overflow-y-auto p-6"
+                style={{ maxHeight: "600px" }}
+              >
+                {selectedDataset ? (
+                  <div>
+                    <div className="mb-4 flex items-start justify-between">
+                      <div className="flex items-center gap-3">
+                        <Database
+                          className="h-6 w-6"
+                          style={{ color: entityColors.data }}
+                        />
+                        <h2 className="text-xl font-bold">
+                          {selectedDataset.name}
+                        </h2>
+                        <span className="text-primary text-xs">
+                          v.{selectedDataset.version || 1}
+                        </span>
+                      </div>
+                      <Badge
+                        variant="openml"
+                        className="text-xs font-semibold text-white"
+                        style={{ backgroundColor: entityColors.data }}
+                      >
+                        <Hash className="h-3 w-3" />
+                        {selectedDataset.data_id}
+                      </Badge>
+                    </div>
+                    {selectedDataset.description && (
+                      <p className="text-muted-foreground mb-4 text-sm leading-relaxed">
+                        {selectedDataset.description}
+                      </p>
+                    )}
+                    <div className="mb-4">{renderStats(selectedDataset)}</div>
+                    <Link
+                      href={`/datasets/${selectedDataset.data_id}`}
+                      className="text-primary mt-2 inline-flex items-center gap-1 text-sm hover:underline"
+                    >
+                      View full details <ArrowRight className="h-3.5 w-3.5" />
+                    </Link>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground flex h-full items-center justify-center">
+                    Select a dataset to view details
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between border-t pt-3">
+              <p className="text-muted-foreground text-xs">
+                Showing {(page - 1) * PAGE_SIZE + 1}–
+                {Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+              </p>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page <= 1}
+                  className="h-7 px-2"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="text-muted-foreground px-2 text-xs">
+                  {page} / {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={page >= totalPages}
+                  className="h-7 px-2"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </CollapsibleSection>
+  );
+}
diff --git a/app-next/src/components/benchmark/benchmark-navigation-menu.tsx b/app-next/src/components/benchmark/benchmark-navigation-menu.tsx
new file mode 100644
index 00000000..84e4587a
--- /dev/null
+++ b/app-next/src/components/benchmark/benchmark-navigation-menu.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  Database,
+  Flag,
+  FileText,
+  Menu,
+  X,
+  ChevronRight,
+  ChevronLeft,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { entityColors } from "@/constants/entityColors";
+
+interface BenchmarkNavigationMenuProps {
+  datasetsCount: number;
+  tasksCount: number;
+  basePath: string;
+}
+
+export function BenchmarkNavigationMenu({
+  datasetsCount,
+  tasksCount,
+  basePath,
+}: BenchmarkNavigationMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const navItems = [
+    { id: "description", label: "Description", icon: FileText },
+    ...(datasetsCount > 0
+      ? [
+          {
+            id: "datasets",
+            label: "Datasets",
+            icon: Database,
+            count: datasetsCount,
+            color: entityColors.data,
+          },
+        ]
+      : []),
+    ...(tasksCount > 0
+      ? [
+          {
+            id: "tasks",
+            label: "Tasks",
+            icon: Flag,
+            count: tasksCount,
+            color: entityColors.task,
+          },
+        ]
+      : []),
+  ];
+
+  const color = entityColors.benchmarks;
+
+  const NavContent = () => (
+    <div className="space-y-4">
+      <div className="bg-card rounded-lg border p-4 shadow-sm">
+        <h3
+          className="mb-3 text-sm font-semibold"
+          style={{ color }}
+        >
+          On This Page
+        </h3>
+        <nav className="space-y-1">
+          {navItems.map((item) => (
+            <a
+              key={item.id}
+              href={`#${item.id}`}
+              onClick={() => setIsOpen(false)}
+              className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center justify-between rounded-md px-3 py-2 text-sm transition-colors"
+            >
+              <span className="flex items-center gap-2">
+                <item.icon
+                  className="h-4 w-4"
+                  style={"color" in item ? { color: item.color } : undefined}
+                />
+                {item.label}
+              </span>
+              {"count" in item && item.count !== undefined && item.count > 0 && (
+                <Badge variant="secondary" className="text-xs">
+                  {item.count.toLocaleString()}
+                </Badge>
+              )}
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      <div className="bg-card rounded-lg border p-4 shadow-sm">
+        <h3
+          className="mb-3 text-sm font-semibold"
+          style={{ color }}
+        >
+          Navigation
+        </h3>
+        <nav className="space-y-1">
+          <Link
+            href={basePath}
+            onClick={() => setIsOpen(false)}
+            className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Search
+          </Link>
+        </nav>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Mobile: Floating Menu Button */}
+      <div className="fixed right-6 bottom-6 z-50 xl:hidden">
+        <Button
+          onClick={() => setIsOpen(!isOpen)}
+          size="lg"
+          className="text-white shadow-lg"
+          style={{ backgroundColor: color }}
+        >
+          {isOpen ? (
+            <X className="mr-2 h-5 w-5" />
+          ) : (
+            <Menu className="mr-2 h-5 w-5" />
+          )}
+          {isOpen ? "Close" : "On This Page"}
+        </Button>
+      </div>
+
+      {/* Mobile: Slide-out Panel */}
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/50 xl:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="bg-background fixed top-0 right-0 bottom-0 z-50 w-80 shadow-2xl xl:hidden">
+            <div className="flex h-full flex-col overflow-y-auto p-6">
+              <div className="mb-6 flex items-center justify-between">
+                <h2 className="text-lg font-semibold" style={{ color }}>Navigation</h2>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsOpen(false)}
+                >
+                  <X className="h-5 w-5" />
+                </Button>
+              </div>
+              <NavContent />
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Desktop: Fixed Navigation */}
+      <aside
+        className={`hidden transition-all duration-300 xl:block ${
+          isCollapsed ? "w-12" : "w-72"
+        } shrink-0`}
+      >
+        {isCollapsed ? (
+          <div className="absolute top-8 right-0">
+            <Button
+              onClick={() => setIsCollapsed(false)}
+              variant="outline"
+              size="icon"
+              className="bg-background hover:bg-accent shadow-md"
+              title="Expand navigation"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : (
+          <div className="absolute top-8 right-0 max-h-[calc(100vh-12rem)] w-72 space-y-4 overflow-y-auto">
+            <div className="flex justify-end">
+              <Button
+                onClick={() => setIsCollapsed(true)}
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground hover:text-foreground"
+                title="Collapse navigation"
+              >
+                <ChevronRight className="mr-1 h-4 w-4" />
+                Hide
+              </Button>
+            </div>
+            <NavContent />
+          </div>
+        )}
+      </aside>
+    </>
+  );
+}
diff --git a/app-next/src/components/benchmark/benchmark-tasks-section.tsx b/app-next/src/components/benchmark/benchmark-tasks-section.tsx
new file mode 100644
index 00000000..f79a2dd0
--- /dev/null
+++ b/app-next/src/components/benchmark/benchmark-tasks-section.tsx
@@ -0,0 +1,600 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import {
+  ChevronLeft,
+  Search,
+  Flag,
+  FlaskConical,
+  Heart,
+  Hash,
+  Loader2,
+  List,
+  Table2,
+  Grid3x3,
+  PanelLeftClose,
+  ArrowRight,
+  Database,
+  ChevronRight,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { entityColors } from "@/constants/entityColors";
+
+const TASK_TYPE_NAMES: Record<number, string> = {
+  1: "Supervised Classification",
+  2: "Supervised Regression",
+  3: "Learning Curve",
+  4: "Data Stream Classification",
+  5: "Clustering",
+  6: "ML Challenge",
+  7: "Survival Analysis",
+  8: "Subgroup Discovery",
+};
+
+interface TaskResult {
+  task_id: number;
+  task_type_id: number;
+  task_type?: string;
+  source_data?: {
+    data_id?: number;
+    name?: string;
+  };
+  estimation_procedure?: {
+    type?: string;
+    name?: string;
+  };
+  runs?: number;
+  nr_of_likes?: number;
+  nr_of_downloads?: number;
+}
+
+interface BenchmarkTasksSectionProps {
+  studyId: string;
+  totalCount: number;
+}
+
+const SORT_OPTIONS = [
+  { id: "runs", label: "Most Runs", field: "runs", dir: "desc" },
+  { id: "likes", label: "Most Likes", field: "nr_of_likes", dir: "desc" },
+  {
+    id: "task_id_asc",
+    label: "Task ID (asc)",
+    field: "task_id",
+    dir: "asc",
+  },
+  {
+    id: "task_id_desc",
+    label: "Task ID (desc)",
+    field: "task_id",
+    dir: "desc",
+  },
+];
+
+const PAGE_SIZE = 20;
+
+export function BenchmarkTasksSection({
+  studyId,
+  totalCount,
+}: BenchmarkTasksSectionProps) {
+  const [tasks, setTasks] = useState<TaskResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(totalCount);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [view, setView] = useState("list");
+  const [sortId, setSortId] = useState("runs");
+  const [selectedTask, setSelectedTask] = useState<TaskResult | null>(null);
+
+  const fetchPage = useCallback(
+    async (p: number, q: string, sort: string) => {
+      setLoading(true);
+      try {
+        const sortOpt =
+          SORT_OPTIONS.find((s) => s.id === sort) || SORT_OPTIONS[0];
+        const params = new URLSearchParams({
+          page: p.toString(),
+          limit: PAGE_SIZE.toString(),
+          sort: sortOpt.field,
+          dir: sortOpt.dir,
+        });
+        if (q) params.set("q", q);
+
+        const res = await fetch(`/api/study/${studyId}/tasks?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          setTasks(data.results);
+          setTotal(data.total);
+        }
+      } catch (err) {
+        console.error("Failed to fetch tasks:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [studyId],
+  );
+
+  useEffect(() => {
+    fetchPage(page, searchQuery, sortId);
+  }, [page, searchQuery, sortId, fetchPage]);
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const handleSearch = () => {
+    setPage(1);
+    setSearchQuery(searchInput);
+  };
+
+  if (totalCount === 0) return null;
+
+  const getTypeName = (t: TaskResult) =>
+    TASK_TYPE_NAMES[t.task_type_id] || t.task_type || `Type ${t.task_type_id}`;
+
+  return (
+    <CollapsibleSection
+      id="tasks"
+      title="Tasks"
+      description="Machine learning tasks in this benchmark"
+      icon={<Flag className="h-4 w-4" style={{ color: entityColors.task }} />}
+      badge={totalCount}
+      defaultOpen={false}
+    >
+      {/* Controls bar */}
+      <div className="bg-background mb-3 flex items-center justify-between gap-4 border-b px-3 py-2">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-sm">Sort:</span>
+            <Select
+              value={sortId}
+              onValueChange={(v) => {
+                setSortId(v);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger className="h-8 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.id} value={opt.id}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <ToggleGroup
+            type="single"
+            value={view}
+            onValueChange={(v) => v && setView(v)}
+            className="border"
+          >
+            <ToggleGroupItem
+              value="list"
+              aria-label="List view"
+              className="data-[state=on]:bg-accent"
+            >
+              <List className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="table"
+              aria-label="Table view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Table2 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="grid"
+              aria-label="Grid view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Grid3x3 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="split"
+              aria-label="Split view"
+              className="data-[state=on]:bg-accent"
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="relative w-48">
+            <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
+            <Input
+              placeholder="Search tasks..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+              className="h-8 pl-8 text-sm"
+            />
+          </div>
+          <span className="text-muted-foreground text-xs whitespace-nowrap">
+            {total.toLocaleString()} results
+          </span>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {/* LIST VIEW */}
+          {view === "list" && (
+            <div className="space-y-0">
+              {tasks.length > 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">
+                            {getTypeName(t)}
+                          </Badge>
+                        </div>
+                      </div>
+                      <div className="text-muted-foreground mb-2 text-sm">
+                        {t.source_data?.name && (
+                          <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>
+                        )}
+                        {t.estimation_procedure?.name && (
+                          <span className="text-xs">
+                            {t.estimation_procedure.name}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="flex items-center gap-1.5">
+                              <FlaskConical className="h-4 w-4 fill-red-500 text-red-500" />
+                              {Number(t.runs || 0).toLocaleString()}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>Runs</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="flex items-center gap-1.5">
+                              <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
+                              {Number(t.nr_of_likes || 0)}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>Likes</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 className="text-muted-foreground p-8 text-center">
+                  {searchQuery
+                    ? "No tasks match your search"
+                    : "No tasks found"}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TABLE VIEW */}
+          {view === "table" && (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-muted/50 border-b">
+                    <th className="px-3 py-2 text-left font-medium">ID</th>
+                    <th className="px-3 py-2 text-left font-medium">Type</th>
+                    <th className="px-3 py-2 text-left font-medium">Dataset</th>
+                    <th className="px-3 py-2 text-left font-medium">
+                      Procedure
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium">Runs</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tasks.length > 0 ? (
+                    tasks.map((t) => (
+                      <tr
+                        key={t.task_id}
+                        className="hover:bg-accent border-b transition-colors"
+                      >
+                        <td className="px-3 py-2">
+                          <Link
+                            href={`/tasks/${t.task_id}`}
+                            className="hover:underline"
+                          >
+                            <Badge
+                              variant="openml"
+                              className="text-[10px] font-semibold text-white"
+                              style={{ backgroundColor: entityColors.task }}
+                            >
+                              {t.task_id}
+                            </Badge>
+                          </Link>
+                        </td>
+                        <td className="px-3 py-2">{getTypeName(t)}</td>
+                        <td className="max-w-[200px] truncate px-3 py-2">
+                          {t.source_data?.name || "-"}
+                        </td>
+                        <td className="text-muted-foreground max-w-[200px] truncate px-3 py-2">
+                          {t.estimation_procedure?.name || "-"}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {Number(t.runs || 0).toLocaleString()}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={5}
+                        className="text-muted-foreground px-3 py-8 text-center"
+                      >
+                        No tasks found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* GRID VIEW */}
+          {view === "grid" && (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {tasks.length > 0 ? (
+                tasks.map((t) => (
+                  <Link
+                    key={t.task_id}
+                    href={`/tasks/${t.task_id}`}
+                    className="hover:bg-accent group relative flex flex-col rounded-lg border p-4 transition-colors"
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <Flag
+                        className="h-5 w-5"
+                        style={{ color: entityColors.task }}
+                      />
+                      <Badge
+                        variant="openml"
+                        className="text-[10px] font-semibold text-white"
+                        style={{ backgroundColor: entityColors.task }}
+                      >
+                        <Hash className="h-2.5 w-2.5" />
+                        {t.task_id}
+                      </Badge>
+                    </div>
+                    <h4 className="mb-1 text-sm font-semibold">
+                      {getTypeName(t)}
+                    </h4>
+                    {t.source_data?.name && (
+                      <p className="text-muted-foreground mb-3 line-clamp-1 text-xs">
+                        <Database
+                          className="mr-1 inline h-3 w-3"
+                          style={{ color: entityColors.data }}
+                        />
+                        {t.source_data.name}
+                      </p>
+                    )}
+                    <div className="mt-auto flex flex-wrap gap-x-3 gap-y-1 text-xs">
+                      <span className="flex items-center gap-1">
+                        <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                        {Number(t.runs || 0).toLocaleString()}
+                      </span>
+                    </div>
+                  </Link>
+                ))
+              ) : (
+                <div className="text-muted-foreground col-span-full p-8 text-center">
+                  No tasks found
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* SPLIT VIEW */}
+          {view === "split" && (
+            <div className="flex gap-0">
+              <div
+                className="w-[380px] space-y-0 overflow-y-auto border-r"
+                style={{ maxHeight: "600px" }}
+              >
+                {tasks.length > 0 ? (
+                  (() => {
+                    if (
+                      !selectedTask ||
+                      !tasks.find((t) => t.task_id === selectedTask.task_id)
+                    ) {
+                      setTimeout(() => setSelectedTask(tasks[0]), 0);
+                    }
+                    return tasks.map((t) => (
+                      <button
+                        key={t.task_id}
+                        onClick={() => setSelectedTask(t)}
+                        className={`hover:bg-accent block w-full cursor-pointer border-b p-3 text-left transition-colors ${selectedTask?.task_id === t.task_id ? "bg-accent" : ""}`}
+                      >
+                        <div className="mb-1 flex items-start gap-2">
+                          <Flag
+                            className="mt-0.5 h-4 w-4 shrink-0"
+                            style={{ color: entityColors.task }}
+                          />
+                          <h4 className="line-clamp-1 text-sm font-semibold">
+                            Task #{t.task_id}
+                          </h4>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+                          <span className="text-muted-foreground">
+                            {getTypeName(t)}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                            {Number(t.runs || 0).toLocaleString()}
+                          </span>
+                        </div>
+                      </button>
+                    ));
+                  })()
+                ) : (
+                  <div className="text-muted-foreground p-8 text-center">
+                    No tasks found
+                  </div>
+                )}
+              </div>
+              <div
+                className="flex-1 overflow-y-auto p-6"
+                style={{ maxHeight: "600px" }}
+              >
+                {selectedTask ? (
+                  <div>
+                    <div className="mb-4 flex items-start justify-between">
+                      <div className="flex items-center gap-3">
+                        <Flag
+                          className="h-6 w-6"
+                          style={{ color: entityColors.task }}
+                        />
+                        <h2 className="text-xl font-bold">
+                          Task #{selectedTask.task_id}
+                        </h2>
+                      </div>
+                      <Badge
+                        variant="openml"
+                        className="text-xs font-semibold text-white"
+                        style={{ backgroundColor: entityColors.task }}
+                      >
+                        <Hash className="h-3 w-3" />
+                        {selectedTask.task_id}
+                      </Badge>
+                    </div>
+                    <div className="mb-3">
+                      <Badge variant="secondary">
+                        {getTypeName(selectedTask)}
+                      </Badge>
+                    </div>
+                    {selectedTask.source_data?.name && (
+                      <p className="text-muted-foreground mb-2 text-sm">
+                        <Database
+                          className="mr-1 inline h-4 w-4"
+                          style={{ color: entityColors.data }}
+                        />
+                        Dataset: {selectedTask.source_data.name}
+                      </p>
+                    )}
+                    {selectedTask.estimation_procedure?.name && (
+                      <p className="text-muted-foreground mb-4 text-sm">
+                        {selectedTask.estimation_procedure.name}
+                      </p>
+                    )}
+                    <div className="mb-4 flex gap-4 text-sm">
+                      <span className="flex items-center gap-1.5">
+                        <FlaskConical className="h-4 w-4 fill-red-500 text-red-500" />
+                        {Number(selectedTask.runs || 0).toLocaleString()} runs
+                      </span>
+                      <span className="flex items-center gap-1.5">
+                        <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
+                        {Number(selectedTask.nr_of_likes || 0)} likes
+                      </span>
+                    </div>
+                    <Link
+                      href={`/tasks/${selectedTask.task_id}`}
+                      className="text-primary mt-2 inline-flex items-center gap-1 text-sm hover:underline"
+                    >
+                      View full details <ArrowRight className="h-3.5 w-3.5" />
+                    </Link>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground flex h-full items-center justify-center">
+                    Select a task to view details
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between border-t pt-3">
+              <p className="text-muted-foreground text-xs">
+                Showing {(page - 1) * PAGE_SIZE + 1}–
+                {Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+              </p>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page <= 1}
+                  className="h-7 px-2"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="text-muted-foreground px-2 text-xs">
+                  {page} / {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={page >= totalPages}
+                  className="h-7 px-2"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </CollapsibleSection>
+  );
+}
diff --git a/app-next/src/components/benchmark/index.ts b/app-next/src/components/benchmark/index.ts
new file mode 100644
index 00000000..70c55dc8
--- /dev/null
+++ b/app-next/src/components/benchmark/index.ts
@@ -0,0 +1,3 @@
+export { BenchmarkDatasetsSection } from "./benchmark-datasets-section";
+export { BenchmarkTasksSection } from "./benchmark-tasks-section";
+export { BenchmarkNavigationMenu } from "./benchmark-navigation-menu";
diff --git a/app-next/src/components/collection/collection-datasets-section.tsx b/app-next/src/components/collection/collection-datasets-section.tsx
new file mode 100644
index 00000000..f87055c7
--- /dev/null
+++ b/app-next/src/components/collection/collection-datasets-section.tsx
@@ -0,0 +1,654 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import {
+  Database,
+  ChevronRight,
+  ChevronLeft,
+  Search,
+  FlaskConical,
+  Heart,
+  CloudDownload,
+  BarChart3,
+  Clock,
+  Hash,
+  Loader2,
+  List,
+  Table2,
+  Grid3x3,
+  PanelLeftClose,
+  ArrowRight,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { entityColors } from "@/constants/entityColors";
+import { truncateName } from "@/lib/utils";
+
+interface DatasetResult {
+  data_id: number;
+  name: string;
+  version?: number;
+  description?: string;
+  format?: string;
+  date?: string;
+  uploader?: string;
+  qualities?: {
+    NumberOfInstances?: number;
+    NumberOfFeatures?: number;
+    NumberOfClasses?: number;
+  };
+  runs?: number;
+  nr_of_likes?: number;
+  nr_of_downloads?: number;
+}
+
+interface CollectionDatasetsSectionProps {
+  studyId: string;
+  totalCount: number;
+}
+
+const SORT_OPTIONS = [
+  { id: "runs", label: "Most Runs", field: "runs", dir: "desc" },
+  { id: "recent", label: "Most Recent", field: "date", dir: "desc" },
+  { id: "likes", label: "Most Likes", field: "nr_of_likes", dir: "desc" },
+  {
+    id: "downloads",
+    label: "Most Downloads",
+    field: "nr_of_downloads",
+    dir: "desc",
+  },
+  {
+    id: "instances",
+    label: "Most Instances",
+    field: "qualities.NumberOfInstances",
+    dir: "desc",
+  },
+  {
+    id: "features",
+    label: "Most Features",
+    field: "qualities.NumberOfFeatures",
+    dir: "desc",
+  },
+];
+
+const PAGE_SIZE = 20;
+
+export function CollectionDatasetsSection({
+  studyId,
+  totalCount,
+}: CollectionDatasetsSectionProps) {
+  const [datasets, setDatasets] = useState<DatasetResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(totalCount);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [view, setView] = useState("list");
+  const [sortId, setSortId] = useState("runs");
+  const [selectedDataset, setSelectedDataset] = useState<DatasetResult | null>(
+    null,
+  );
+
+  const fetchPage = useCallback(
+    async (p: number, q: string, sort: string) => {
+      setLoading(true);
+      try {
+        const sortOpt =
+          SORT_OPTIONS.find((s) => s.id === sort) || SORT_OPTIONS[0];
+        const params = new URLSearchParams({
+          page: p.toString(),
+          limit: PAGE_SIZE.toString(),
+          sort: sortOpt.field,
+          dir: sortOpt.dir,
+        });
+        if (q) params.set("q", q);
+
+        const res = await fetch(`/api/study/${studyId}/datasets?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          setDatasets(data.results);
+          setTotal(data.total);
+        }
+      } catch (err) {
+        console.error("Failed to fetch datasets:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [studyId],
+  );
+
+  useEffect(() => {
+    fetchPage(page, searchQuery, sortId);
+  }, [page, searchQuery, sortId, fetchPage]);
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const handleSearch = () => {
+    setPage(1);
+    setSearchQuery(searchInput);
+  };
+
+  if (totalCount === 0) return null;
+
+  const renderStats = (d: DatasetResult, size: "sm" | "xs" = "sm") => {
+    const iconSize = size === "sm" ? "h-4 w-4" : "h-3 w-3";
+    return (
+      <div className={`flex flex-wrap gap-x-4 gap-y-1 text-${size}`}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <FlaskConical
+                className={`${iconSize} fill-red-500 text-red-500`}
+              />
+              {Number(d.runs || 0).toLocaleString()}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Runs</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <Heart
+                className={`${iconSize} fill-purple-500 text-purple-500`}
+              />
+              {Number(d.nr_of_likes || 0)}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Likes</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <CloudDownload className={`${iconSize} text-blue-500`} />
+              {Number(d.nr_of_downloads || 0)}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Downloads</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1.5">
+              <BarChart3 className={`${iconSize} text-gray-500`} />
+              {d.qualities?.NumberOfInstances
+                ? Number(d.qualities.NumberOfInstances).toLocaleString()
+                : "N/A"}{" "}
+              x{" "}
+              {d.qualities?.NumberOfFeatures
+                ? Number(d.qualities.NumberOfFeatures)
+                : "N/A"}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Dimensions (rows x columns)</TooltipContent>
+        </Tooltip>
+        {d.date && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-muted-foreground flex items-center gap-1.5">
+                <Clock className={iconSize} />
+                {new Date(d.date).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Upload date</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <CollapsibleSection
+      id="datasets"
+      title="Datasets"
+      description="Datasets included in this collection"
+      icon={
+        <Database className="h-4 w-4" style={{ color: entityColors.data }} />
+      }
+      badge={totalCount}
+      defaultOpen={true}
+    >
+      {/* Controls bar */}
+      <div className="bg-background mb-3 flex items-center justify-between gap-4 border-b px-3 py-2">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-sm">Sort:</span>
+            <Select
+              value={sortId}
+              onValueChange={(v) => {
+                setSortId(v);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger className="h-8 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.id} value={opt.id}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <ToggleGroup
+            type="single"
+            value={view}
+            onValueChange={(v) => v && setView(v)}
+            className="border"
+          >
+            <ToggleGroupItem
+              value="list"
+              aria-label="List view"
+              className="data-[state=on]:bg-accent"
+            >
+              <List className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="table"
+              aria-label="Table view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Table2 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="grid"
+              aria-label="Grid view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Grid3x3 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="split"
+              aria-label="Split view"
+              className="data-[state=on]:bg-accent"
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="relative w-48">
+            <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
+            <Input
+              placeholder="Search datasets..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+              className="h-8 pl-8 text-sm"
+            />
+          </div>
+          <span className="text-muted-foreground text-xs whitespace-nowrap">
+            {total.toLocaleString()} results
+          </span>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {/* LIST VIEW */}
+          {view === "list" && (
+            <div className="space-y-0">
+              {datasets.length > 0 ? (
+                datasets.map((d) => (
+                  <div
+                    key={d.data_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">
+                        <Database
+                          className="mt-0.5 h-5 w-5 shrink-0"
+                          style={{ color: entityColors.data }}
+                        />
+                        <div className="flex items-baseline gap-2">
+                          <h3 className="text-base font-semibold">
+                            {truncateName(d.name)}
+                          </h3>
+                          <span className="text-primary text-xs">
+                            v.{d.version || 1} ✓
+                          </span>
+                        </div>
+                      </div>
+                      {d.description && (
+                        <p className="text-muted-foreground mb-2 line-clamp-2 text-sm">
+                          {d.description}
+                        </p>
+                      )}
+                      {renderStats(d)}
+                    </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.data }}
+                    >
+                      <Hash className="h-3 w-3" />
+                      {d.data_id}
+                    </Badge>
+                    <Link
+                      href={`/datasets/${d.data_id}`}
+                      className="absolute inset-0"
+                      aria-label={`View ${d.name}`}
+                    >
+                      <span className="sr-only">View {d.name}</span>
+                    </Link>
+                  </div>
+                ))
+              ) : (
+                <div className="text-muted-foreground p-8 text-center">
+                  {searchQuery
+                    ? "No datasets match your search"
+                    : "No datasets found"}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TABLE VIEW */}
+          {view === "table" && (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-muted/50 border-b">
+                    <th className="px-3 py-2 text-left font-medium">ID</th>
+                    <th className="px-3 py-2 text-left font-medium">Name</th>
+                    <th className="px-3 py-2 text-right font-medium">
+                      Instances
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium">
+                      Features
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium">Runs</th>
+                    <th className="px-3 py-2 text-left font-medium">Date</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {datasets.length > 0 ? (
+                    datasets.map((d) => (
+                      <tr
+                        key={d.data_id}
+                        className="hover:bg-accent border-b transition-colors"
+                      >
+                        <td className="px-3 py-2">
+                          <Badge
+                            variant="openml"
+                            className="text-[10px] font-semibold text-white"
+                            style={{ backgroundColor: entityColors.data }}
+                          >
+                            {d.data_id}
+                          </Badge>
+                        </td>
+                        <td className="max-w-[300px] truncate px-3 py-2 font-medium">
+                          <Link
+                            href={`/datasets/${d.data_id}`}
+                            className="hover:underline"
+                          >
+                            {truncateName(d.name)}
+                          </Link>
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {d.qualities?.NumberOfInstances
+                            ? Number(
+                                d.qualities.NumberOfInstances,
+                              ).toLocaleString()
+                            : "-"}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {d.qualities?.NumberOfFeatures
+                            ? Number(
+                                d.qualities.NumberOfFeatures,
+                              ).toLocaleString()
+                            : "-"}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {Number(d.runs || 0).toLocaleString()}
+                        </td>
+                        <td className="text-muted-foreground px-3 py-2">
+                          {d.date
+                            ? new Date(d.date).toLocaleDateString("en-US", {
+                                year: "numeric",
+                                month: "short",
+                              })
+                            : "-"}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={6}
+                        className="text-muted-foreground px-3 py-8 text-center"
+                      >
+                        No datasets found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* GRID VIEW */}
+          {view === "grid" && (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {datasets.length > 0 ? (
+                datasets.map((d) => (
+                  <Link
+                    key={d.data_id}
+                    href={`/datasets/${d.data_id}`}
+                    className="hover:bg-accent group relative flex flex-col rounded-lg border p-4 transition-colors"
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <Database
+                        className="h-5 w-5"
+                        style={{ color: entityColors.data }}
+                      />
+                      <Badge
+                        variant="openml"
+                        className="text-[10px] font-semibold text-white"
+                        style={{ backgroundColor: entityColors.data }}
+                      >
+                        <Hash className="h-2.5 w-2.5" />
+                        {d.data_id}
+                      </Badge>
+                    </div>
+                    <h4 className="mb-1 line-clamp-1 text-sm font-semibold">
+                      {d.name}
+                    </h4>
+                    {d.description && (
+                      <p className="text-muted-foreground mb-3 line-clamp-2 text-xs">
+                        {d.description}
+                      </p>
+                    )}
+                    <div className="mt-auto flex flex-wrap gap-x-3 gap-y-1 text-xs">
+                      <span className="flex items-center gap-1">
+                        <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                        {Number(d.runs || 0).toLocaleString()}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <BarChart3 className="h-3 w-3 text-gray-500" />
+                        {d.qualities?.NumberOfInstances
+                          ? Number(
+                              d.qualities.NumberOfInstances,
+                            ).toLocaleString()
+                          : "?"}{" "}
+                        x {d.qualities?.NumberOfFeatures || "?"}
+                      </span>
+                    </div>
+                  </Link>
+                ))
+              ) : (
+                <div className="text-muted-foreground col-span-full p-8 text-center">
+                  No datasets found
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* SPLIT VIEW */}
+          {view === "split" && (
+            <div className="flex gap-0">
+              <div
+                className="w-[380px] space-y-0 overflow-y-auto border-r"
+                style={{ maxHeight: "600px" }}
+              >
+                {datasets.length > 0 ? (
+                  (() => {
+                    if (
+                      !selectedDataset ||
+                      !datasets.find(
+                        (d) => d.data_id === selectedDataset.data_id,
+                      )
+                    ) {
+                      setTimeout(() => setSelectedDataset(datasets[0]), 0);
+                    }
+                    return datasets.map((d) => (
+                      <button
+                        key={d.data_id}
+                        onClick={() => setSelectedDataset(d)}
+                        className={`hover:bg-accent block w-full cursor-pointer border-b p-3 text-left transition-colors ${selectedDataset?.data_id === d.data_id ? "bg-accent" : ""}`}
+                      >
+                        <div className="mb-1 flex items-start gap-2">
+                          <Database
+                            className="mt-0.5 h-4 w-4 shrink-0"
+                            style={{ color: entityColors.data }}
+                          />
+                          <h4 className="line-clamp-1 text-sm font-semibold">
+                            {truncateName(d.name)}
+                          </h4>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+                          <span className="flex items-center gap-1">
+                            <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                            {Number(d.runs || 0).toLocaleString()}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <BarChart3 className="h-3 w-3 text-gray-500" />
+                            {d.qualities?.NumberOfInstances
+                              ? Number(
+                                  d.qualities.NumberOfInstances,
+                                ).toLocaleString()
+                              : "?"}{" "}
+                            x {d.qualities?.NumberOfFeatures || "?"}
+                          </span>
+                        </div>
+                      </button>
+                    ));
+                  })()
+                ) : (
+                  <div className="text-muted-foreground p-8 text-center">
+                    No datasets found
+                  </div>
+                )}
+              </div>
+              <div
+                className="flex-1 overflow-y-auto p-6"
+                style={{ maxHeight: "600px" }}
+              >
+                {selectedDataset ? (
+                  <div>
+                    <div className="mb-4 flex items-start justify-between">
+                      <div className="flex items-center gap-3">
+                        <Database
+                          className="h-6 w-6"
+                          style={{ color: entityColors.data }}
+                        />
+                        <h2 className="text-xl font-bold">
+                          {selectedDataset.name}
+                        </h2>
+                        <span className="text-primary text-xs">
+                          v.{selectedDataset.version || 1}
+                        </span>
+                      </div>
+                      <Badge
+                        variant="openml"
+                        className="text-xs font-semibold text-white"
+                        style={{ backgroundColor: entityColors.data }}
+                      >
+                        <Hash className="h-3 w-3" />
+                        {selectedDataset.data_id}
+                      </Badge>
+                    </div>
+                    {selectedDataset.description && (
+                      <p className="text-muted-foreground mb-4 text-sm leading-relaxed">
+                        {selectedDataset.description}
+                      </p>
+                    )}
+                    <div className="mb-4">{renderStats(selectedDataset)}</div>
+                    <Link
+                      href={`/datasets/${selectedDataset.data_id}`}
+                      className="text-primary mt-2 inline-flex items-center gap-1 text-sm hover:underline"
+                    >
+                      View full details <ArrowRight className="h-3.5 w-3.5" />
+                    </Link>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground flex h-full items-center justify-center">
+                    Select a dataset to view details
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between border-t pt-3">
+              <p className="text-muted-foreground text-xs">
+                Showing {(page - 1) * PAGE_SIZE + 1}–
+                {Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+              </p>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page <= 1}
+                  className="h-7 px-2"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="text-muted-foreground px-2 text-xs">
+                  {page} / {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={page >= totalPages}
+                  className="h-7 px-2"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </CollapsibleSection>
+  );
+}
diff --git a/app-next/src/components/collection/collection-navigation-menu.tsx b/app-next/src/components/collection/collection-navigation-menu.tsx
new file mode 100644
index 00000000..c1fc2c32
--- /dev/null
+++ b/app-next/src/components/collection/collection-navigation-menu.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  Database,
+  Flag,
+  FileText,
+  Menu,
+  X,
+  ChevronRight,
+  ChevronLeft,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { entityColors } from "@/constants/entityColors";
+
+interface CollectionNavigationMenuProps {
+  datasetsCount: number;
+  tasksCount: number;
+  basePath: string;
+  /** Override the accent color (defaults to collections pink) */
+  accentColor?: string;
+}
+
+export function CollectionNavigationMenu({
+  datasetsCount,
+  tasksCount,
+  basePath,
+  accentColor,
+}: CollectionNavigationMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const navItems = [
+    { id: "description", label: "Description", icon: FileText },
+    ...(datasetsCount > 0
+      ? [
+          {
+            id: "datasets",
+            label: "Datasets",
+            icon: Database,
+            count: datasetsCount,
+            color: entityColors.data,
+          },
+        ]
+      : []),
+    ...(tasksCount > 0
+      ? [
+          {
+            id: "tasks",
+            label: "Tasks",
+            icon: Flag,
+            count: tasksCount,
+            color: entityColors.task,
+          },
+        ]
+      : []),
+  ];
+
+  const color = accentColor || entityColors.collections;
+
+  const NavContent = () => (
+    <div className="space-y-4">
+      <div className="bg-card rounded-lg border p-4 shadow-sm">
+        <h3
+          className="mb-3 text-sm font-semibold"
+          style={{ color }}
+        >
+          On This Page
+        </h3>
+        <nav className="space-y-1">
+          {navItems.map((item) => (
+            <a
+              key={item.id}
+              href={`#${item.id}`}
+              onClick={() => setIsOpen(false)}
+              className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center justify-between rounded-md px-3 py-2 text-sm transition-colors"
+            >
+              <span className="flex items-center gap-2">
+                <item.icon
+                  className="h-4 w-4"
+                  style={"color" in item ? { color: item.color } : undefined}
+                />
+                {item.label}
+              </span>
+              {"count" in item && item.count !== undefined && item.count > 0 && (
+                <Badge variant="secondary" className="text-xs">
+                  {item.count.toLocaleString()}
+                </Badge>
+              )}
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      <div className="bg-card rounded-lg border p-4 shadow-sm">
+        <h3
+          className="mb-3 text-sm font-semibold"
+          style={{ color }}
+        >
+          Navigation
+        </h3>
+        <nav className="space-y-1">
+          <Link
+            href={basePath}
+            onClick={() => setIsOpen(false)}
+            className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Search
+          </Link>
+        </nav>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Mobile: Floating Menu Button */}
+      <div className="fixed right-6 bottom-6 z-50 xl:hidden">
+        <Button
+          onClick={() => setIsOpen(!isOpen)}
+          size="lg"
+          className="text-white shadow-lg"
+          style={{ backgroundColor: color }}
+        >
+          {isOpen ? (
+            <X className="mr-2 h-5 w-5" />
+          ) : (
+            <Menu className="mr-2 h-5 w-5" />
+          )}
+          {isOpen ? "Close" : "On This Page"}
+        </Button>
+      </div>
+
+      {/* Mobile: Slide-out Panel */}
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/50 xl:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="bg-background fixed top-0 right-0 bottom-0 z-50 w-80 shadow-2xl xl:hidden">
+            <div className="flex h-full flex-col overflow-y-auto p-6">
+              <div className="mb-6 flex items-center justify-between">
+                <h2 className="text-lg font-semibold" style={{ color }}>Navigation</h2>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsOpen(false)}
+                >
+                  <X className="h-5 w-5" />
+                </Button>
+              </div>
+              <NavContent />
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Desktop: Fixed Navigation */}
+      <aside
+        className={`hidden transition-all duration-300 xl:block ${
+          isCollapsed ? "w-12" : "w-72"
+        } shrink-0`}
+      >
+        {isCollapsed ? (
+          <div className="absolute top-8 right-0">
+            <Button
+              onClick={() => setIsCollapsed(false)}
+              variant="outline"
+              size="icon"
+              className="bg-background hover:bg-accent shadow-md"
+              title="Expand navigation"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : (
+          <div className="absolute top-8 right-0 max-h-[calc(100vh-12rem)] w-72 space-y-4 overflow-y-auto">
+            <div className="flex justify-end">
+              <Button
+                onClick={() => setIsCollapsed(true)}
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground hover:text-foreground"
+                title="Collapse navigation"
+              >
+                <ChevronRight className="mr-1 h-4 w-4" />
+                Hide
+              </Button>
+            </div>
+            <NavContent />
+          </div>
+        )}
+      </aside>
+    </>
+  );
+}
diff --git a/app-next/src/components/collection/collection-tasks-section.tsx b/app-next/src/components/collection/collection-tasks-section.tsx
new file mode 100644
index 00000000..64b69c04
--- /dev/null
+++ b/app-next/src/components/collection/collection-tasks-section.tsx
@@ -0,0 +1,600 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import {
+  ChevronLeft,
+  Search,
+  Flag,
+  FlaskConical,
+  Heart,
+  Hash,
+  Loader2,
+  List,
+  Table2,
+  Grid3x3,
+  PanelLeftClose,
+  ArrowRight,
+  Database,
+  ChevronRight,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { entityColors } from "@/constants/entityColors";
+
+const TASK_TYPE_NAMES: Record<number, string> = {
+  1: "Supervised Classification",
+  2: "Supervised Regression",
+  3: "Learning Curve",
+  4: "Data Stream Classification",
+  5: "Clustering",
+  6: "ML Challenge",
+  7: "Survival Analysis",
+  8: "Subgroup Discovery",
+};
+
+interface TaskResult {
+  task_id: number;
+  task_type_id: number;
+  task_type?: string;
+  source_data?: {
+    data_id?: number;
+    name?: string;
+  };
+  estimation_procedure?: {
+    type?: string;
+    name?: string;
+  };
+  runs?: number;
+  nr_of_likes?: number;
+  nr_of_downloads?: number;
+}
+
+interface CollectionTasksSectionProps {
+  studyId: string;
+  totalCount: number;
+}
+
+const SORT_OPTIONS = [
+  { id: "runs", label: "Most Runs", field: "runs", dir: "desc" },
+  { id: "likes", label: "Most Likes", field: "nr_of_likes", dir: "desc" },
+  {
+    id: "task_id_asc",
+    label: "Task ID (asc)",
+    field: "task_id",
+    dir: "asc",
+  },
+  {
+    id: "task_id_desc",
+    label: "Task ID (desc)",
+    field: "task_id",
+    dir: "desc",
+  },
+];
+
+const PAGE_SIZE = 20;
+
+export function CollectionTasksSection({
+  studyId,
+  totalCount,
+}: CollectionTasksSectionProps) {
+  const [tasks, setTasks] = useState<TaskResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(totalCount);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [view, setView] = useState("list");
+  const [sortId, setSortId] = useState("runs");
+  const [selectedTask, setSelectedTask] = useState<TaskResult | null>(null);
+
+  const fetchPage = useCallback(
+    async (p: number, q: string, sort: string) => {
+      setLoading(true);
+      try {
+        const sortOpt =
+          SORT_OPTIONS.find((s) => s.id === sort) || SORT_OPTIONS[0];
+        const params = new URLSearchParams({
+          page: p.toString(),
+          limit: PAGE_SIZE.toString(),
+          sort: sortOpt.field,
+          dir: sortOpt.dir,
+        });
+        if (q) params.set("q", q);
+
+        const res = await fetch(`/api/study/${studyId}/tasks?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          setTasks(data.results);
+          setTotal(data.total);
+        }
+      } catch (err) {
+        console.error("Failed to fetch tasks:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [studyId],
+  );
+
+  useEffect(() => {
+    fetchPage(page, searchQuery, sortId);
+  }, [page, searchQuery, sortId, fetchPage]);
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const handleSearch = () => {
+    setPage(1);
+    setSearchQuery(searchInput);
+  };
+
+  if (totalCount === 0) return null;
+
+  const getTypeName = (t: TaskResult) =>
+    TASK_TYPE_NAMES[t.task_type_id] || t.task_type || `Type ${t.task_type_id}`;
+
+  return (
+    <CollapsibleSection
+      id="tasks"
+      title="Tasks"
+      description="Machine learning tasks in this collection"
+      icon={<Flag className="h-4 w-4" style={{ color: entityColors.task }} />}
+      badge={totalCount}
+      defaultOpen={false}
+    >
+      {/* Controls bar */}
+      <div className="bg-background mb-3 flex items-center justify-between gap-4 border-b px-3 py-2">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-sm">Sort:</span>
+            <Select
+              value={sortId}
+              onValueChange={(v) => {
+                setSortId(v);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger className="h-8 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.id} value={opt.id}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <ToggleGroup
+            type="single"
+            value={view}
+            onValueChange={(v) => v && setView(v)}
+            className="border"
+          >
+            <ToggleGroupItem
+              value="list"
+              aria-label="List view"
+              className="data-[state=on]:bg-accent"
+            >
+              <List className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="table"
+              aria-label="Table view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Table2 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="grid"
+              aria-label="Grid view"
+              className="data-[state=on]:bg-accent"
+            >
+              <Grid3x3 className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="split"
+              aria-label="Split view"
+              className="data-[state=on]:bg-accent"
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="relative w-48">
+            <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
+            <Input
+              placeholder="Search tasks..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+              className="h-8 pl-8 text-sm"
+            />
+          </div>
+          <span className="text-muted-foreground text-xs whitespace-nowrap">
+            {total.toLocaleString()} results
+          </span>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <>
+          {/* LIST VIEW */}
+          {view === "list" && (
+            <div className="space-y-0">
+              {tasks.length > 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">
+                            {getTypeName(t)}
+                          </Badge>
+                        </div>
+                      </div>
+                      <div className="text-muted-foreground mb-2 text-sm">
+                        {t.source_data?.name && (
+                          <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>
+                        )}
+                        {t.estimation_procedure?.name && (
+                          <span className="text-xs">
+                            {t.estimation_procedure.name}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="flex items-center gap-1.5">
+                              <FlaskConical className="h-4 w-4 fill-red-500 text-red-500" />
+                              {Number(t.runs || 0).toLocaleString()}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>Runs</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="flex items-center gap-1.5">
+                              <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
+                              {Number(t.nr_of_likes || 0)}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>Likes</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 className="text-muted-foreground p-8 text-center">
+                  {searchQuery
+                    ? "No tasks match your search"
+                    : "No tasks found"}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TABLE VIEW */}
+          {view === "table" && (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-muted/50 border-b">
+                    <th className="px-3 py-2 text-left font-medium">ID</th>
+                    <th className="px-3 py-2 text-left font-medium">Type</th>
+                    <th className="px-3 py-2 text-left font-medium">Dataset</th>
+                    <th className="px-3 py-2 text-left font-medium">
+                      Procedure
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium">Runs</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tasks.length > 0 ? (
+                    tasks.map((t) => (
+                      <tr
+                        key={t.task_id}
+                        className="hover:bg-accent border-b transition-colors"
+                      >
+                        <td className="px-3 py-2">
+                          <Link
+                            href={`/tasks/${t.task_id}`}
+                            className="hover:underline"
+                          >
+                            <Badge
+                              variant="openml"
+                              className="text-[10px] font-semibold text-white"
+                              style={{ backgroundColor: entityColors.task }}
+                            >
+                              {t.task_id}
+                            </Badge>
+                          </Link>
+                        </td>
+                        <td className="px-3 py-2">{getTypeName(t)}</td>
+                        <td className="max-w-[200px] truncate px-3 py-2">
+                          {t.source_data?.name || "-"}
+                        </td>
+                        <td className="text-muted-foreground max-w-[200px] truncate px-3 py-2">
+                          {t.estimation_procedure?.name || "-"}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {Number(t.runs || 0).toLocaleString()}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={5}
+                        className="text-muted-foreground px-3 py-8 text-center"
+                      >
+                        No tasks found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* GRID VIEW */}
+          {view === "grid" && (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {tasks.length > 0 ? (
+                tasks.map((t) => (
+                  <Link
+                    key={t.task_id}
+                    href={`/tasks/${t.task_id}`}
+                    className="hover:bg-accent group relative flex flex-col rounded-lg border p-4 transition-colors"
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <Flag
+                        className="h-5 w-5"
+                        style={{ color: entityColors.task }}
+                      />
+                      <Badge
+                        variant="openml"
+                        className="text-[10px] font-semibold text-white"
+                        style={{ backgroundColor: entityColors.task }}
+                      >
+                        <Hash className="h-2.5 w-2.5" />
+                        {t.task_id}
+                      </Badge>
+                    </div>
+                    <h4 className="mb-1 text-sm font-semibold">
+                      {getTypeName(t)}
+                    </h4>
+                    {t.source_data?.name && (
+                      <p className="text-muted-foreground mb-3 line-clamp-1 text-xs">
+                        <Database
+                          className="mr-1 inline h-3 w-3"
+                          style={{ color: entityColors.data }}
+                        />
+                        {t.source_data.name}
+                      </p>
+                    )}
+                    <div className="mt-auto flex flex-wrap gap-x-3 gap-y-1 text-xs">
+                      <span className="flex items-center gap-1">
+                        <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                        {Number(t.runs || 0).toLocaleString()}
+                      </span>
+                    </div>
+                  </Link>
+                ))
+              ) : (
+                <div className="text-muted-foreground col-span-full p-8 text-center">
+                  No tasks found
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* SPLIT VIEW */}
+          {view === "split" && (
+            <div className="flex gap-0">
+              <div
+                className="w-[380px] space-y-0 overflow-y-auto border-r"
+                style={{ maxHeight: "600px" }}
+              >
+                {tasks.length > 0 ? (
+                  (() => {
+                    if (
+                      !selectedTask ||
+                      !tasks.find((t) => t.task_id === selectedTask.task_id)
+                    ) {
+                      setTimeout(() => setSelectedTask(tasks[0]), 0);
+                    }
+                    return tasks.map((t) => (
+                      <button
+                        key={t.task_id}
+                        onClick={() => setSelectedTask(t)}
+                        className={`hover:bg-accent block w-full cursor-pointer border-b p-3 text-left transition-colors ${selectedTask?.task_id === t.task_id ? "bg-accent" : ""}`}
+                      >
+                        <div className="mb-1 flex items-start gap-2">
+                          <Flag
+                            className="mt-0.5 h-4 w-4 shrink-0"
+                            style={{ color: entityColors.task }}
+                          />
+                          <h4 className="line-clamp-1 text-sm font-semibold">
+                            Task #{t.task_id}
+                          </h4>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+                          <span className="text-muted-foreground">
+                            {getTypeName(t)}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <FlaskConical className="h-3 w-3 fill-red-500 text-red-500" />
+                            {Number(t.runs || 0).toLocaleString()}
+                          </span>
+                        </div>
+                      </button>
+                    ));
+                  })()
+                ) : (
+                  <div className="text-muted-foreground p-8 text-center">
+                    No tasks found
+                  </div>
+                )}
+              </div>
+              <div
+                className="flex-1 overflow-y-auto p-6"
+                style={{ maxHeight: "600px" }}
+              >
+                {selectedTask ? (
+                  <div>
+                    <div className="mb-4 flex items-start justify-between">
+                      <div className="flex items-center gap-3">
+                        <Flag
+                          className="h-6 w-6"
+                          style={{ color: entityColors.task }}
+                        />
+                        <h2 className="text-xl font-bold">
+                          Task #{selectedTask.task_id}
+                        </h2>
+                      </div>
+                      <Badge
+                        variant="openml"
+                        className="text-xs font-semibold text-white"
+                        style={{ backgroundColor: entityColors.task }}
+                      >
+                        <Hash className="h-3 w-3" />
+                        {selectedTask.task_id}
+                      </Badge>
+                    </div>
+                    <div className="mb-3">
+                      <Badge variant="secondary">
+                        {getTypeName(selectedTask)}
+                      </Badge>
+                    </div>
+                    {selectedTask.source_data?.name && (
+                      <p className="text-muted-foreground mb-2 text-sm">
+                        <Database
+                          className="mr-1 inline h-4 w-4"
+                          style={{ color: entityColors.data }}
+                        />
+                        Dataset: {selectedTask.source_data.name}
+                      </p>
+                    )}
+                    {selectedTask.estimation_procedure?.name && (
+                      <p className="text-muted-foreground mb-4 text-sm">
+                        {selectedTask.estimation_procedure.name}
+                      </p>
+                    )}
+                    <div className="mb-4 flex gap-4 text-sm">
+                      <span className="flex items-center gap-1.5">
+                        <FlaskConical className="h-4 w-4 fill-red-500 text-red-500" />
+                        {Number(selectedTask.runs || 0).toLocaleString()} runs
+                      </span>
+                      <span className="flex items-center gap-1.5">
+                        <Heart className="h-4 w-4 fill-purple-500 text-purple-500" />
+                        {Number(selectedTask.nr_of_likes || 0)} likes
+                      </span>
+                    </div>
+                    <Link
+                      href={`/tasks/${selectedTask.task_id}`}
+                      className="text-primary mt-2 inline-flex items-center gap-1 text-sm hover:underline"
+                    >
+                      View full details <ArrowRight className="h-3.5 w-3.5" />
+                    </Link>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground flex h-full items-center justify-center">
+                    Select a task to view details
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between border-t pt-3">
+              <p className="text-muted-foreground text-xs">
+                Showing {(page - 1) * PAGE_SIZE + 1}–
+                {Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+              </p>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page <= 1}
+                  className="h-7 px-2"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="text-muted-foreground px-2 text-xs">
+                  {page} / {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={page >= totalPages}
+                  className="h-7 px-2"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </CollapsibleSection>
+  );
+}
diff --git a/app-next/src/components/dataset/data-analysis-section.tsx b/app-next/src/components/dataset/data-analysis-section.tsx
index 5a76f944..509e04e8 100644
--- a/app-next/src/components/dataset/data-analysis-section.tsx
+++ b/app-next/src/components/dataset/data-analysis-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useState, useRef, useCallback, useMemo } from "react";
 import {
   ChevronDown,
   ChevronLeft,
@@ -39,6 +39,7 @@ import { useTheme } from "next-themes";
 import { cn } from "@/lib/utils";
 import type { Dataset, DatasetFeature } from "@/types/dataset";
 import { useParquetData, computeDistribution } from "@/hooks/useParquetData";
+import { useDatasetStats } from "@/hooks/useDatasetStats";
 
 // Dynamic import for Plotly (required for SSR compatibility)
 const Plot = dynamic(() => import("react-plotly.js"), {
@@ -94,6 +95,9 @@ export function DataAnalysisSection({
     isHugeDataset ? undefined : dataset.url,
   );
 
+  // Try stats API first (faster, works for all sizes)
+  const statsState = useDatasetStats(dataset.data_id, 100, true);
+
   // Fullscreen toggle handler
   const toggleFullscreen = useCallback(async () => {
     if (!containerRef.current) return;
@@ -431,6 +435,8 @@ export function DataAnalysisSection({
                     isTooLarge={parquetState.isTooLarge}
                     isHugeDataset={isHugeDataset}
                     datasetId={dataset.data_id}
+                    statsData={statsState.stats?.distribution}
+                    isLoadingStats={statsState.isLoading}
                   />
                 </TabsContent>
 
@@ -441,6 +447,8 @@ export function DataAnalysisSection({
                     parquetData={parquetState.data}
                     isLoadingParquet={parquetState.isLoading}
                     datasetId={dataset.data_id}
+                    statsData={statsState.stats?.correlation}
+                    isLoadingStats={statsState.isLoading}
                   />
                 </TabsContent>
               </Tabs>
@@ -595,7 +603,8 @@ function FeatureDistributionPlots({
   isLoadingParquet,
   isTooLarge,
   isHugeDataset,
-  datasetId,
+  statsData,
+  isLoadingStats,
 }: {
   numericFeatures?: DatasetFeature[];
   nominalFeatures?: DatasetFeature[];
@@ -605,6 +614,8 @@ function FeatureDistributionPlots({
   isTooLarge?: boolean;
   isHugeDataset?: boolean;
   datasetId?: number;
+  statsData?: Record<string, any>;
+  isLoadingStats?: boolean;
 }) {
   // Whether parquet data is unavailable (too large to load in browser)
   const dataUnavailable = isTooLarge || isHugeDataset;
@@ -630,11 +641,6 @@ function FeatureDistributionPlots({
     featurePage * FEATURES_PER_PAGE,
   );
 
-  // Reset to page 1 when filter changes
-  useEffect(() => {
-    setFeaturePage(1);
-  }, [filterText]);
-
   // State for feature selection
   const [selectedFeatures, setSelectedFeatures] = useState<Set<number>>(() => {
     const initialSelection = new Set<number>();
@@ -699,7 +705,10 @@ function FeatureDistributionPlots({
             <Input
               placeholder="Filter features..."
               value={filterText}
-              onChange={(e) => setFilterText(e.target.value)}
+              onChange={(e) => {
+                setFilterText(e.target.value);
+                setFeaturePage(1);
+              }}
               className="h-8 max-w-xs"
             />
             <span className="text-muted-foreground text-xs">
@@ -776,7 +785,7 @@ function FeatureDistributionPlots({
       </div>
 
       {/* Distribution Plots */}
-      {isLoadingParquet && !dataUnavailable ? (
+      {(isLoadingStats || (isLoadingParquet && !dataUnavailable)) ? (
         <div className="flex items-center justify-center py-12">
           <Loader2 className="h-8 w-8 animate-spin text-green-500" />
           <span className="text-muted-foreground ml-2">Loading data...</span>
@@ -793,6 +802,7 @@ function FeatureDistributionPlots({
               feature={feature}
               parquetData={parquetData}
               dataUnavailable={dataUnavailable}
+              statsData={statsData}
             />
           ))}
         </div>
@@ -808,24 +818,60 @@ function DistributionPlot({
   feature,
   parquetData,
   dataUnavailable,
+  statsData,
 }: {
   feature: DatasetFeature;
   parquetData: Record<string, (string | number | null)[]> | null;
   targetFeature?: DatasetFeature;
   targetColors?: string[];
   dataUnavailable?: boolean;
+  statsData?: Record<string, any>;
 }) {
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
   const isNumeric = feature.type === "numeric";
 
-  // Compute distribution from parquet data or use feature.distr
+  // Compute distribution from stats API first, then fall back to parquet data or feature.distr
   const distribution = useMemo(() => {
+    // Priority 1: Use stats API datanpm if available
+    if (statsData && statsData[feature.name]) {
+      const featureStats = statsData[feature.name];
+      if (featureStats.type === "numeric") {
+        // Convert bins/counts from stats API to plot format
+        return {
+          bins: featureStats.bins?.map((binEdge: number, i: number, arr: number[]) => ({
+            min: binEdge,
+            max: arr[i + 1] || binEdge,
+            count: featureStats.counts[i] || 0,
+          })).slice(0, -1), // Remove last incomplete bin
+          stats: {
+            min: featureStats.min,
+            max: featureStats.max,
+            mean: featureStats.mean,
+            median: (featureStats.min + featureStats.max) / 2, // Approximate
+            q1: featureStats.min,
+            q3: featureStats.max,
+            std: featureStats.std,
+          },
+        };
+      } else {
+        // Nominal feature from stats API
+        return {
+          categories: featureStats.categories?.map((cat: string, i: number) => ({
+            value: cat,
+            count: featureStats.counts[i],
+          })),
+        };
+      }
+    }
+
+    // Priority 2: Compute from parquet data
     if (parquetData && parquetData[feature.name]) {
       const dataType = feature.type === "numeric" ? "numeric" : "nominal";
       return computeDistribution(parquetData[feature.name], dataType);
     }
-    // Fallback to feature.distr if available (works for nominal without parquet)
+
+    // Priority 3: Fallback to feature.distr if available (works for nominal without parquet)
     if (feature.distr && feature.distr.length > 0) {
       if (isNumeric) {
         return {
@@ -840,7 +886,7 @@ function DistributionPlot({
       };
     }
     return null;
-  }, [parquetData, feature, isNumeric]);
+  }, [statsData, parquetData, feature, isNumeric]);
 
   // Numeric features in too-large datasets: show "coming soon"
   if (dataUnavailable && isNumeric) {
@@ -864,15 +910,28 @@ function DistributionPlot({
     );
   }
 
-  // Filter out null values for Plotly
+  // Filter out null values for Plotly (only if using parquet data with raw values)
   const cleanData =
     parquetData?.[feature.name]?.filter(
       (v): v is string | number => v !== null,
     ) || [];
 
-  // Prepare bar chart data for nominal features
-  const barLabels = distribution.categories?.map((c) => c.value) || [];
-  const barValues = distribution.categories?.map((c) => c.count) || [];
+  // Prepare data based on distribution type
+  const hasRawData = cleanData.length > 0 && !statsData?.[feature.name];
+  const hasBinnedData = distribution?.bins && distribution.bins.length > 0;
+
+  // For numeric: use histogram with raw data OR bar chart with binned data
+  // For nominal: use bar chart with category counts
+  const barLabels = distribution?.categories?.map((c: any) => c.value) || [];
+  const barValues = distribution?.categories?.map((c: any) => c.count) || [];
+
+  // For binned numeric data, create bar chart labels from bin ranges
+  const binnedLabels = hasBinnedData
+    ? distribution.bins.map((bin: any) => `${bin.min.toFixed(1)}-${bin.max.toFixed(1)}`)
+    : [];
+  const binnedValues = hasBinnedData
+    ? distribution.bins.map((bin: any) => bin.count)
+    : [];
 
   return (
     <div className="rounded-lg border p-2">
@@ -886,13 +945,23 @@ function DistributionPlot({
         <Plot
           data={[
             isNumeric
-              ? {
-                  type: "histogram" as const,
-                  x: cleanData,
-                  marker: { color: "#22c55e" },
-                  opacity: 0.75,
-                }
+              ? hasRawData
+                ? {
+                    // Raw data histogram
+                    type: "histogram" as const,
+                    x: cleanData,
+                    marker: { color: "#22c55e" },
+                    opacity: 0.75,
+                  }
+                : {
+                    // Binned data bar chart
+                    type: "bar" as const,
+                    x: binnedLabels,
+                    y: binnedValues,
+                    marker: { color: "#22c55e" },
+                  }
               : {
+                  // Nominal bar chart
                   type: "bar" as const,
                   x: barLabels,
                   y: barValues,
@@ -908,15 +977,11 @@ function DistributionPlot({
             xaxis: {
               tickangle: isNumeric ? 0 : -45,
               automargin: true,
-              gridcolor: isDark
-                ? "rgba(255,255,255,0.1)"
-                : "rgba(0,0,0,0.1)",
+              gridcolor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
             },
             yaxis: {
               title: "Count",
-              gridcolor: isDark
-                ? "rgba(255,255,255,0.1)"
-                : "rgba(0,0,0,0.1)",
+              gridcolor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
             },
             bargap: 0.1,
             paper_bgcolor: "transparent",
@@ -942,11 +1007,15 @@ function CorrelationHeatmap({
   parquetData,
   isLoadingParquet,
   datasetId,
+  statsData,
+  isLoadingStats,
 }: {
   numericFeatures: DatasetFeature[];
   parquetData: Record<string, (string | number | null)[]> | null;
   isLoadingParquet?: boolean;
   datasetId?: number;
+  statsData?: { features: string[]; matrix: number[][] } | null;
+  isLoadingStats?: boolean;
 }) {
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
@@ -955,32 +1024,46 @@ function CorrelationHeatmap({
   const MAX_FEATURES = 20;
   const limitedFeatures = numericFeatures.slice(0, MAX_FEATURES);
 
-  // Compute correlation matrix
-  const correlationMatrix = useMemo(() => {
-    if (!parquetData || limitedFeatures.length === 0) return null;
-
-    const n = limitedFeatures.length;
-    const matrix: number[][] = [];
-
-    for (let i = 0; i < n; i++) {
-      const row: number[] = [];
-      for (let j = 0; j < n; j++) {
-        if (i === j) {
-          row.push(1);
-        } else if (j < i) {
-          // Use symmetric value
-          row.push(matrix[j][i]);
-        } else {
-          const xData = parquetData[limitedFeatures[i].name] || [];
-          const yData = parquetData[limitedFeatures[j].name] || [];
-          row.push(computePearsonCorrelation(xData, yData));
+  // Use stats API data first, then fall back to computing from parquet data
+  const correlationData = useMemo(() => {
+    // Priority 1: Use stats API data if available
+    if (statsData && statsData.features && statsData.matrix) {
+      return {
+        features: statsData.features,
+        matrix: statsData.matrix,
+      };
+    }
+
+    // Priority 2: Compute from parquet data
+    if (parquetData && limitedFeatures.length > 0) {
+      const n = limitedFeatures.length;
+      const matrix: number[][] = [];
+
+      for (let i = 0; i < n; i++) {
+        const row: number[] = [];
+        for (let j = 0; j < n; j++) {
+          if (i === j) {
+            row.push(1);
+          } else if (j < i) {
+            // Use symmetric value
+            row.push(matrix[j][i]);
+          } else {
+            const xData = parquetData[limitedFeatures[i].name] || [];
+            const yData = parquetData[limitedFeatures[j].name] || [];
+            row.push(computePearsonCorrelation(xData, yData));
+          }
         }
+        matrix.push(row);
       }
-      matrix.push(row);
+
+      return {
+        features: limitedFeatures.map((f) => f.name),
+        matrix,
+      };
     }
 
-    return matrix;
-  }, [parquetData, limitedFeatures]);
+    return null;
+  }, [statsData, parquetData, limitedFeatures]);
 
   if (numericFeatures.length === 0) {
     return (
@@ -990,8 +1073,8 @@ function CorrelationHeatmap({
     );
   }
 
-  if (!parquetData) {
-    if (isLoadingParquet) {
+  if (!correlationData) {
+    if (isLoadingStats || isLoadingParquet) {
       return (
         <div className="flex items-center justify-center py-12">
           <Loader2 className="h-8 w-8 animate-spin text-green-500" />
@@ -1009,21 +1092,14 @@ function CorrelationHeatmap({
     );
   }
 
-  if (!correlationMatrix) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-green-500" />
-      </div>
-    );
-  }
-
-  const featureNames = limitedFeatures.map((f) => f.name);
+  const featureNames = correlationData.features;
+  const correlationMatrix = correlationData.matrix;
 
   return (
     <div className="space-y-4">
       {numericFeatures.length > MAX_FEATURES && (
         <p className="text-shadow-muted-foreground text-sm">
-          Showing correlation for first {MAX_FEATURES} of{" "}
+          Showing correlation for first {featureNames.length} of{" "}
           {numericFeatures.length} numeric features.
         </p>
       )}
@@ -1047,7 +1123,7 @@ function CorrelationHeatmap({
           },
         ]}
         layout={{
-          height: Math.max(400, limitedFeatures.length * 25),
+          height: Math.max(400, featureNames.length * 25),
           margin: { l: 120, r: 20, t: 20, b: 120 },
           font: {
             color: isDark ? "rgba(250,250,250,0.6)" : "rgba(0,0,0,0.6)",
diff --git a/app-next/src/components/dataset/dataset-header-new.tsx b/app-next/src/components/dataset/dataset-header-new.tsx
index 59041fee..dabb32db 100644
--- a/app-next/src/components/dataset/dataset-header-new.tsx
+++ b/app-next/src/components/dataset/dataset-header-new.tsx
@@ -227,12 +227,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 +257,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 +274,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 +306,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 +323,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 +355,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 +372,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 +404,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 +421,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 +453,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 +470,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>
diff --git a/app-next/src/components/dataset/metadata-section.tsx b/app-next/src/components/dataset/metadata-section.tsx
index 34baab51..ded5426c 100644
--- a/app-next/src/components/dataset/metadata-section.tsx
+++ b/app-next/src/components/dataset/metadata-section.tsx
@@ -225,7 +225,7 @@ export function MetadataSection({ dataset }: MetadataSectionProps) {
               {tags.map((tag, idx) => (
                 <Link
                   key={idx}
-                  href={`/search?type=data&tags.tag=${encodeURIComponent(tag.tag)}`}
+                  href={`/datasets?tag=${encodeURIComponent(tag.tag)}`}
                   className="bg-muted hover:bg-muted/80 rounded-full px-2 py-1 text-xs transition-colors"
                 >
                   {tag.tag}
diff --git a/app-next/src/components/measure/index.ts b/app-next/src/components/measure/index.ts
new file mode 100644
index 00000000..1ddfc208
--- /dev/null
+++ b/app-next/src/components/measure/index.ts
@@ -0,0 +1,7 @@
+export { MeasureList } from "./measure-list";
+export { MeasureSearchContainer } from "./measure-search-container";
+export { MeasureHeader } from "./measure-header";
+export { MeasureDescriptionSection } from "./measure-description-section";
+export { MeasureNavigationMenu } from "./measure-navigation-menu";
+export { MeasureStatsCard } from "./measure-stats-card";
+export { MeasureAnalysisSection } from "./measure-analysis-section";
diff --git a/app-next/src/components/measure/measure-analysis-section.tsx b/app-next/src/components/measure/measure-analysis-section.tsx
new file mode 100644
index 00000000..db0487e6
--- /dev/null
+++ b/app-next/src/components/measure/measure-analysis-section.tsx
@@ -0,0 +1,314 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState, useEffect, useMemo } from "react";
+import { Loader2, TrendingUp, TrendingDown } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { useTheme } from "next-themes";
+import { entityColors } from "@/constants/entityColors";
+import type { Measure } from "@/types/measure";
+
+// Dynamic import for Plotly (required for SSR compatibility)
+const Plot = dynamic(() => import("react-plotly.js"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-[400px] items-center justify-center">
+      <Skeleton className="h-full w-full" />
+    </div>
+  ),
+});
+
+interface MeasureAnalysisSectionProps {
+  measure: Measure;
+}
+
+export function MeasureAnalysisSection({
+  measure,
+}: MeasureAnalysisSectionProps) {
+  const [relatedMeasures, setRelatedMeasures] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    const fetchRelatedMeasures = async () => {
+      try {
+        // Fetch all measures of the same type for comparison
+        const esQuery = {
+          query: {
+            bool: {
+              filter: [{ term: { measure_type: measure.measure_type } }],
+            },
+          },
+          size: 500,
+          sort: [{ date: { order: "asc" } }],
+        };
+
+        const res = await fetch("/api/search", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            indexName: "measure",
+            esQuery,
+          }),
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          const measures =
+            data.hits?.hits?.map((hit: any) => hit._source) || [];
+          setRelatedMeasures(measures);
+        }
+      } catch (error) {
+        console.error("[MeasureAnalysisSection] Error:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRelatedMeasures();
+  }, [measure.measure_type]);
+
+  // Compute timeline data
+  const timelineData = useMemo(() => {
+    if (relatedMeasures.length === 0) return null;
+
+    // Group by year
+    const yearCounts: Record<string, number> = {};
+    relatedMeasures.forEach((m) => {
+      if (m.date) {
+        const year = new Date(m.date).getFullYear().toString();
+        yearCounts[year] = (yearCounts[year] || 0) + 1;
+      }
+    });
+
+    const years = Object.keys(yearCounts).sort();
+    const counts = years.map((y) => yearCounts[y]);
+
+    return { years, counts };
+  }, [relatedMeasures]);
+
+  // Compute stats
+  const stats = useMemo(() => {
+    if (measure.measure_type === "evaluation_measure") {
+      const higher = relatedMeasures.filter(
+        (m) => m.higherIsBetter === "1" || m.higherIsBetter === 1,
+      ).length;
+      const lower = relatedMeasures.filter(
+        (m) => m.higherIsBetter === "0" || m.higherIsBetter === 0,
+      ).length;
+
+      return {
+        current: measure.higherIsBetter
+          ? "Higher is better"
+          : "Lower is better",
+        higherCount: higher,
+        lowerCount: lower,
+      };
+    }
+
+    if (measure.measure_type === "estimation_procedure") {
+      const stratifiedCount = relatedMeasures.filter(
+        (m) => m.stratified_sampling === "true",
+      ).length;
+
+      return {
+        current:
+          measure.stratified_sampling === "true"
+            ? "Stratified"
+            : "Non-stratified",
+        stratifiedCount,
+        nonStratifiedCount: relatedMeasures.length - stratifiedCount,
+      };
+    }
+
+    return null;
+  }, [measure, relatedMeasures]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2
+          className="h-8 w-8 animate-spin"
+          style={{ color: entityColors.measures }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Stats Cards */}
+      {stats && (
+        <div className="grid gap-4 md:grid-cols-2">
+          {measure.measure_type === "evaluation_measure" && (
+            <>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <div className="rounded-full bg-green-100 p-3 dark:bg-green-900/30">
+                      <TrendingUp className="h-6 w-6 text-green-600" />
+                    </div>
+                    <div>
+                      <p className="text-2xl font-bold">{stats.higherCount}</p>
+                      <p className="text-muted-foreground text-sm">
+                        Higher is Better
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <div className="rounded-full bg-red-100 p-3 dark:bg-red-900/30">
+                      <TrendingDown className="h-6 w-6 text-red-600" />
+                    </div>
+                    <div>
+                      <p className="text-2xl font-bold">{stats.lowerCount}</p>
+                      <p className="text-muted-foreground text-sm">
+                        Lower is Better
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </>
+          )}
+
+          {measure.measure_type === "estimation_procedure" && (
+            <>
+              <Card>
+                <CardContent className="pt-6">
+                  <div>
+                    <p className="text-2xl font-bold">
+                      {stats.stratifiedCount}
+                    </p>
+                    <p className="text-muted-foreground text-sm">
+                      Stratified Procedures
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardContent className="pt-6">
+                  <div>
+                    <p className="text-2xl font-bold">
+                      {stats.nonStratifiedCount}
+                    </p>
+                    <p className="text-muted-foreground text-sm">
+                      Non-Stratified Procedures
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Timeline Chart */}
+      {timelineData && timelineData.years.length > 1 && (
+        <Card>
+          <CardContent className="pt-6">
+            <h3 className="mb-4 text-lg font-semibold">
+              Measures Added Over Time
+            </h3>
+            <Plot
+              data={[
+                {
+                  x: timelineData.years,
+                  y: timelineData.counts,
+                  type: "bar",
+                  marker: { color: entityColors.measures },
+                  hovertemplate:
+                    "<b>%{x}</b><br>Measures Added: %{y}<extra></extra>",
+                },
+              ]}
+              layout={{
+                xaxis: {
+                  title: {
+                    text: "Year",
+                    font: {
+                      color:
+                        theme === "dark"
+                          ? "rgba(255,255,255,0.5)"
+                          : "rgba(0,0,0,0.5)",
+                    },
+                  },
+                  tickfont: {
+                    color:
+                      theme === "dark"
+                        ? "rgba(255,255,255,0.5)"
+                        : "rgba(0,0,0,0.5)",
+                  },
+                  gridcolor:
+                    theme === "dark"
+                      ? "rgba(255,255,255,0.1)"
+                      : "rgba(0,0,0,0.1)",
+                  linecolor:
+                    theme === "dark"
+                      ? "rgba(255,255,255,0.1)"
+                      : "rgba(0,0,0,0.1)",
+                },
+                yaxis: {
+                  title: {
+                    text: "Count",
+                    font: {
+                      color:
+                        theme === "dark"
+                          ? "rgba(255,255,255,0.5)"
+                          : "rgba(0,0,0,0.5)",
+                    },
+                  },
+                  tickfont: {
+                    color:
+                      theme === "dark"
+                        ? "rgba(255,255,255,0.5)"
+                        : "rgba(0,0,0,0.5)",
+                  },
+                  gridcolor:
+                    theme === "dark"
+                      ? "rgba(255,255,255,0.1)"
+                      : "rgba(0,0,0,0.1)",
+                  linecolor:
+                    theme === "dark"
+                      ? "rgba(255,255,255,0.1)"
+                      : "rgba(0,0,0,0.1)",
+                },
+                hovermode: "closest",
+                height: 300,
+                margin: { l: 50, r: 20, t: 20, b: 50 },
+                plot_bgcolor: "transparent",
+                paper_bgcolor: "transparent",
+              }}
+              config={{
+                responsive: true,
+                displayModeBar: false,
+              }}
+              style={{ width: "100%", height: "300px" }}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Current Measure Properties */}
+      {(measure.min !== undefined || measure.max !== undefined) && (
+        <Alert>
+          <AlertDescription>
+            <div className="flex items-center justify-between">
+              <span className="font-semibold">Range:</span>
+              <span>
+                {measure.min ?? "−∞"} to {measure.max ?? "+∞"}
+                {measure.unit && ` ${measure.unit}`}
+              </span>
+            </div>
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}
diff --git a/app-next/src/components/measure/measure-description-section.tsx b/app-next/src/components/measure/measure-description-section.tsx
new file mode 100644
index 00000000..710e0eb3
--- /dev/null
+++ b/app-next/src/components/measure/measure-description-section.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { ArrowUp, ArrowDown, Ruler, Tag } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import type { Measure } from "@/types/measure";
+
+const MEASURE_TYPE_LABELS: Record<string, string> = {
+  data_quality: "Data Quality",
+  evaluation_measure: "Evaluation Measure",
+  estimation_procedure: "Estimation Procedure",
+};
+
+interface MeasureDescriptionSectionProps {
+  measure: Measure;
+}
+
+export function MeasureDescriptionSection({
+  measure,
+}: MeasureDescriptionSectionProps) {
+  const typeLabel =
+    MEASURE_TYPE_LABELS[measure.measure_type] || measure.measure_type;
+
+  const hasProperties =
+    measure.higherIsBetter !== undefined ||
+    measure.min !== undefined ||
+    measure.max !== undefined ||
+    measure.unit;
+
+  return (
+    <div className="space-y-6">
+      {/* Description */}
+      {measure.description && (
+        <div className="prose dark:prose-invert max-w-none">
+          <p className="text-base leading-relaxed">{measure.description}</p>
+        </div>
+      )}
+
+      {/* Properties Grid */}
+      {hasProperties && (
+        <Card>
+          <CardContent className="pt-5 pb-4">
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide">
+              Properties
+            </h3>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {/* Type */}
+              <div className="flex items-start gap-2">
+                <Tag className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />
+                <div>
+                  <p className="text-muted-foreground text-xs">Type</p>
+                  <p className="text-sm font-medium">{typeLabel}</p>
+                </div>
+              </div>
+
+              {/* Direction */}
+              {measure.higherIsBetter !== undefined && (
+                <div className="flex items-start gap-2">
+                  {measure.higherIsBetter ? (
+                    <ArrowUp className="mt-0.5 h-4 w-4 shrink-0 text-green-600" />
+                  ) : (
+                    <ArrowDown className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
+                  )}
+                  <div>
+                    <p className="text-muted-foreground text-xs">Direction</p>
+                    <p className="text-sm font-medium">
+                      {measure.higherIsBetter
+                        ? "Higher is better"
+                        : "Lower is better"}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Range */}
+              {(measure.min !== undefined || measure.max !== undefined) && (
+                <div className="flex items-start gap-2">
+                  <Ruler className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />
+                  <div>
+                    <p className="text-muted-foreground text-xs">Range</p>
+                    <p className="text-sm font-medium">
+                      {measure.min !== undefined ? measure.min : "–"} to{" "}
+                      {measure.max !== undefined ? measure.max : "–"}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Unit */}
+              {measure.unit && (
+                <div className="flex items-start gap-2">
+                  <Ruler className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />
+                  <div>
+                    <p className="text-muted-foreground text-xs">Unit</p>
+                    <p className="text-sm font-medium">{measure.unit}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
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..770ea722
--- /dev/null
+++ b/app-next/src/components/measure/measure-header.tsx
@@ -0,0 +1,122 @@
+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 p-0">
+      {/* 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/measure/measure-list.tsx b/app-next/src/components/measure/measure-list.tsx
index b293ce08..283a1772 100644
--- a/app-next/src/components/measure/measure-list.tsx
+++ b/app-next/src/components/measure/measure-list.tsx
@@ -31,7 +31,6 @@ async function fetchMeasures(measureType: string): Promise<Measure[]> {
         },
       },
       size: 200,
-      sort: [{ name: { order: "asc" } }],
     }),
     next: { revalidate: 3600 },
   });
@@ -39,9 +38,12 @@ async function fetchMeasures(measureType: string): Promise<Measure[]> {
   if (!res.ok) return [];
 
   const data = await res.json();
-  return (data.hits?.hits || []).map(
+  const measures = (data.hits?.hits || []).map(
     (hit: { _source: Measure }) => hit._source,
   );
+  return measures.sort((a: Measure, b: Measure) =>
+    a.name.localeCompare(b.name),
+  );
 }
 
 export async function MeasureList({ measureType }: MeasureListProps) {
diff --git a/app-next/src/components/measure/measure-navigation-menu.tsx b/app-next/src/components/measure/measure-navigation-menu.tsx
new file mode 100644
index 00000000..009d9c34
--- /dev/null
+++ b/app-next/src/components/measure/measure-navigation-menu.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  Grid3x3,
+  Menu,
+  X,
+  ChevronRight,
+  ChevronLeft,
+  FileText,
+  Flag,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { entityColors } from "@/constants/entityColors";
+
+interface MeasureNavigationMenuProps {
+  relatedTaskCount: number;
+  measureType: string;
+}
+
+const MEASURE_TYPE_ROUTES: Record<string, { href: string; label: string }> = {
+  evaluation_measure: { href: "/measures/evaluation", label: "Evaluation Measures" },
+  data_quality: { href: "/measures/data", label: "Data Quality Measures" },
+  estimation_procedure: { href: "/measures/procedures", label: "Estimation Procedures" },
+};
+
+export function MeasureNavigationMenu({
+  relatedTaskCount,
+  measureType,
+}: MeasureNavigationMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const backRoute = MEASURE_TYPE_ROUTES[measureType] || {
+    href: "/measures/evaluation",
+    label: "All Measures",
+  };
+
+  const pageNavItems = [
+    { id: "description", label: "Description", icon: FileText },
+    {
+      id: "related-tasks",
+      label: "Related Tasks",
+      icon: Flag,
+      count: relatedTaskCount,
+    },
+  ];
+
+  const violet = entityColors.measures;
+
+  return (
+    <>
+      {/* Mobile: Floating Menu Button */}
+      <div className="fixed right-6 bottom-6 z-50 xl:hidden">
+        <Button
+          onClick={() => setIsOpen(!isOpen)}
+          size="lg"
+          className="text-white shadow-lg"
+          style={{ backgroundColor: violet }}
+        >
+          {isOpen ? (
+            <X className="mr-2 h-5 w-5" />
+          ) : (
+            <Menu className="mr-2 h-5 w-5" />
+          )}
+          {isOpen ? "Close" : "On This Page"}
+        </Button>
+      </div>
+
+      {/* Mobile: Slide-out Panel */}
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/50 xl:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="bg-background fixed top-0 right-0 bottom-0 z-50 w-80 shadow-2xl xl:hidden">
+            <div className="flex h-full flex-col overflow-y-auto p-6">
+              <div className="mb-6 flex items-center justify-between">
+                <h2 className="text-lg font-semibold" style={{ color: violet }}>Navigation</h2>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsOpen(false)}
+                >
+                  <X className="h-5 w-5" />
+                </Button>
+              </div>
+              <div className="space-y-4">
+                <div className="bg-card rounded-lg border p-4 shadow-sm">
+                  <h3
+                    className="mb-3 text-sm font-semibold"
+                    style={{ color: violet }}
+                  >
+                    On This Page
+                  </h3>
+                  <nav className="space-y-1">
+                    {pageNavItems.map((item) => (
+                      <a
+                        key={item.id}
+                        href={`#${item.id}`}
+                        onClick={() => setIsOpen(false)}
+                        className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors dark:hover:bg-slate-700 dark:hover:text-white"
+                      >
+                        <item.icon className="h-4 w-4" />
+                        {item.label}
+                        {item.count !== undefined && item.count > 0 && (
+                          <Badge
+                            variant="secondary"
+                            className="ml-auto text-xs"
+                          >
+                            {item.count.toLocaleString()}
+                          </Badge>
+                        )}
+                      </a>
+                    ))}
+                  </nav>
+                </div>
+                <div className="bg-card rounded-lg border p-4 shadow-sm">
+                  <h3 className="mb-3 text-sm font-semibold" style={{ color: violet }}>
+                    Quick Links
+                  </h3>
+                  <nav className="space-y-1">
+                    <Link
+                      href={backRoute.href}
+                      className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors dark:hover:bg-slate-700 dark:hover:text-white"
+                      onClick={() => setIsOpen(false)}
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                      {backRoute.label}
+                    </Link>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Desktop: Fixed Navigation */}
+      <aside
+        className={`hidden transition-all duration-300 xl:block ${
+          isCollapsed ? "w-12" : "w-72"
+        } shrink-0`}
+      >
+        {isCollapsed ? (
+          <div className="absolute top-8 right-0">
+            <Button
+              onClick={() => setIsCollapsed(false)}
+              variant="outline"
+              size="icon"
+              className="bg-background hover:bg-accent shadow-md"
+              title="Expand navigation"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : (
+          <div className="absolute top-8 right-0 max-h-[calc(100vh-12rem)] w-72 space-y-4 overflow-y-auto">
+            <div className="flex justify-end">
+              <Button
+                onClick={() => setIsCollapsed(true)}
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground hover:text-foreground"
+                title="Collapse navigation"
+              >
+                <ChevronRight className="mr-1 h-4 w-4" />
+                Hide
+              </Button>
+            </div>
+            <div className="bg-card rounded-lg border p-4 shadow-sm">
+              <h3
+                className="mb-3 text-sm font-semibold"
+                style={{ color: violet }}
+              >
+                On This Page
+              </h3>
+              <nav className="space-y-1">
+                {pageNavItems.map((item) => (
+                  <a
+                    key={item.id}
+                    href={`#${item.id}`}
+                    className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors dark:hover:bg-slate-700 dark:hover:text-white"
+                  >
+                    <item.icon className="h-4 w-4" />
+                    {item.label}
+                    {item.count !== undefined && item.count > 0 && (
+                      <Badge variant="secondary" className="ml-auto text-xs">
+                        {item.count.toLocaleString()}
+                      </Badge>
+                    )}
+                  </a>
+                ))}
+              </nav>
+            </div>
+            <div className="bg-card rounded-lg border p-4 shadow-sm">
+              <h3 className="mb-3 text-sm font-semibold" style={{ color: violet }}>
+                Quick Links
+              </h3>
+              <nav className="space-y-1">
+                <Link
+                  href={backRoute.href}
+                  className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors dark:hover:bg-slate-700 dark:hover:text-white"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                  {backRoute.label}
+                </Link>
+                <Link
+                  href="/search?type=measure"
+                  className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors dark:hover:bg-slate-700 dark:hover:text-white"
+                >
+                  <Grid3x3 className="h-4 w-4" />
+                  All Measures
+                </Link>
+              </nav>
+            </div>
+          </div>
+        )}
+      </aside>
+    </>
+  );
+}
diff --git a/app-next/src/components/measure/measure-search-container.tsx b/app-next/src/components/measure/measure-search-container.tsx
new file mode 100644
index 00000000..35119ea9
--- /dev/null
+++ b/app-next/src/components/measure/measure-search-container.tsx
@@ -0,0 +1,595 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import {
+  Gauge,
+  Search,
+  Loader2,
+  List,
+  Table2,
+  Grid3x3,
+  ArrowUp,
+  ArrowDown,
+  Hash,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { entityColors } from "@/constants/entityColors";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface Measure {
+  quality_id?: number;
+  proc_id?: number;
+  eval_id?: number;
+  name: string;
+  description?: string;
+  date?: string;
+  min?: number;
+  max?: number;
+  unit?: string;
+  higherIsBetter?: boolean;
+  measure_type?: string;
+}
+
+interface MeasureSearchContainerProps {
+  measureType: "evaluation_measure" | "estimation_procedure" | "data_quality";
+}
+
+const SORT_OPTIONS = [
+  { id: "date_desc", label: "Most Recent", field: "date", dir: "desc" },
+  { id: "date_asc", label: "Oldest First", field: "date", dir: "asc" },
+];
+
+export function MeasureSearchContainer({
+  measureType,
+}: MeasureSearchContainerProps) {
+  const [measures, setMeasures] = useState<Measure[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchInput, setSearchInput] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [view, setView] = useState("list");
+  const [sortId, setSortId] = useState("date_desc");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [resultsPerPage] = useState(20);
+
+  const fetchMeasures = useCallback(async () => {
+    setLoading(true);
+    try {
+      const sortOpt = SORT_OPTIONS.find((s) => s.id === sortId) || SORT_OPTIONS[0];
+
+      // Build ES query matching the original MeasureList pattern
+      const esQuery: {
+        query: {
+          bool: {
+            filter: Array<{ term: { [key: string]: string } }>;
+            must?: {
+              multi_match: {
+                query: string;
+                fields: string[];
+                type: string;
+              };
+            };
+          };
+        };
+        size: number;
+        from: number;
+        sort?: Array<{ [key: string]: { order: string} }>;
+      } = {
+        query: {
+          bool: {
+            // Use exact same format as original MeasureList (without .keyword)
+            filter: [{ term: { measure_type: measureType } }],
+          },
+        },
+        size: resultsPerPage,
+        from: (currentPage - 1) * resultsPerPage,
+      };
+
+      // Add search if provided
+      if (searchQuery) {
+        esQuery.query.bool.must = {
+          multi_match: {
+            query: searchQuery,
+            fields: ["name^2", "description"],
+            type: "best_fields",
+          },
+        };
+      }
+
+      // Add sort (measure index only supports date sorting)
+      if (sortOpt.field && sortOpt.dir) {
+        esQuery.sort = [{ [sortOpt.field]: { order: sortOpt.dir } }];
+      }
+
+      console.log("[MeasureSearchContainer] ES Query:", JSON.stringify(esQuery, null, 2));
+
+      // Use the /api/search proxy (now uses fetch instead of axios)
+      const res = await fetch("/api/search", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          indexName: "measure",
+          esQuery,
+        }),
+      });
+
+      console.log("[MeasureSearchContainer] Response status:", res.status);
+
+      if (res.ok) {
+        const data = await res.json();
+        console.log("[MeasureSearchContainer] ES response:", {
+          total: data.hits?.total,
+          hitCount: data.hits?.hits?.length,
+        });
+
+        const measures = (data.hits?.hits || []).map(
+          (hit: { _source: Record<string, unknown>; _id: string }) => ({
+            ...hit._source,
+            _id: hit._id,
+          }),
+        );
+
+        console.log("[MeasureSearchContainer] Received measures:", measures.length);
+        setMeasures(measures);
+
+        // Set total count for pagination
+        const totalValue = typeof data.hits?.total === 'object'
+          ? data.hits.total.value
+          : data.hits?.total || 0;
+        setTotal(totalValue);
+      } else {
+        const responseText = await res.text();
+        console.error("[MeasureSearchContainer] Error response status:", res.status);
+        console.error("[MeasureSearchContainer] Error response text:", responseText);
+
+        try {
+          const errorData = JSON.parse(responseText);
+          console.error("[MeasureSearchContainer] Error data parsed:", errorData);
+        } catch (parseErr) {
+          console.error("[MeasureSearchContainer] Could not parse error as JSON");
+        }
+      }
+    } catch (err) {
+      console.error("[MeasureSearchContainer] Fetch error:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [measureType, searchQuery, sortId, currentPage, resultsPerPage]);
+
+  useEffect(() => {
+    fetchMeasures();
+  }, [fetchMeasures]);
+
+  const handleSearch = () => {
+    setCurrentPage(1); // Reset to page 1 on new search
+    setSearchQuery(searchInput);
+  };
+
+  const handleSortChange = (newSortId: string) => {
+    setCurrentPage(1); // Reset to page 1 on sort change
+    setSortId(newSortId);
+  };
+
+  const getMeasureId = (measure: Measure) => {
+    return measure.eval_id || measure.proc_id || measure.quality_id;
+  };
+
+  const renderListView = () => (
+    <div className="space-y-3">
+      {measures.map((measure, index) => {
+        const id = getMeasureId(measure);
+        return (
+          <Link
+            key={id || index}
+            href={`/measures/${id}`}
+            className="block transition-transform hover:scale-[1.01]"
+          >
+            <Card className="hover:border-primary/30 transition-colors">
+              <CardContent className="pb-4 pt-5">
+                <div className="flex items-start gap-3">
+                  <Gauge
+                    className="mt-0.5 h-5 w-5 shrink-0"
+                    style={{ color: entityColors.measures }}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <h3 className="mb-1 font-semibold">{measure.name}</h3>
+                    {measure.description && (
+                      <p className="text-muted-foreground mb-2 line-clamp-2 text-sm">
+                        {measure.description}
+                      </p>
+                    )}
+                    <div className="text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-xs">
+                      {measure.higherIsBetter !== undefined && (
+                        <span className="flex items-center gap-1">
+                          {measure.higherIsBetter ? (
+                            <ArrowUp className="h-3 w-3 text-green-600" />
+                          ) : (
+                            <ArrowDown className="h-3 w-3 text-red-500" />
+                          )}
+                          {measure.higherIsBetter
+                            ? "Higher is better"
+                            : "Lower is better"}
+                        </span>
+                      )}
+                      {measure.min !== undefined && (
+                        <span>Min: {measure.min}</span>
+                      )}
+                      {measure.max !== undefined && (
+                        <span>Max: {measure.max}</span>
+                      )}
+                      {measure.unit && <span>Unit: {measure.unit}</span>}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        );
+      })}
+    </div>
+  );
+
+  const renderTableView = () => (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b">
+            <th className="pb-3 pl-0 text-left text-sm font-medium">Name</th>
+            <th className="pb-3 text-left text-sm font-medium">Description</th>
+            <th className="pb-3 text-left text-sm font-medium">Direction</th>
+            <th className="pb-3 text-left text-sm font-medium">Range</th>
+            <th className="pb-3 text-right text-sm font-medium">ID</th>
+          </tr>
+        </thead>
+        <tbody>
+          {measures.map((measure, index) => {
+            const id = getMeasureId(measure);
+            return (
+              <tr key={id || index} className="border-b">
+                <td className="py-3 pl-0">
+                  <Link
+                    href={`/measures/${id}`}
+                    className="font-medium hover:underline"
+                    style={{ color: entityColors.measures }}
+                  >
+                    {measure.name}
+                  </Link>
+                </td>
+                <td className="text-muted-foreground py-3 text-sm">
+                  {measure.description
+                    ? measure.description.slice(0, 80) +
+                      (measure.description.length > 80 ? "..." : "")
+                    : "—"}
+                </td>
+                <td className="py-3">
+                  {measure.higherIsBetter !== undefined ? (
+                    <span className="flex items-center gap-1 text-sm">
+                      {measure.higherIsBetter ? (
+                        <ArrowUp className="h-3 w-3 text-green-600" />
+                      ) : (
+                        <ArrowDown className="h-3 w-3 text-red-500" />
+                      )}
+                      {measure.higherIsBetter ? "Higher" : "Lower"}
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">—</span>
+                  )}
+                </td>
+                <td className="text-muted-foreground py-3 text-sm">
+                  {measure.min !== undefined || measure.max !== undefined ? (
+                    <>
+                      {measure.min ?? "−∞"} – {measure.max ?? "+∞"}
+                      {measure.unit && ` ${measure.unit}`}
+                    </>
+                  ) : (
+                    "—"
+                  )}
+                </td>
+                <td className="py-3 pr-0 text-right">
+                  <Badge
+                    variant="secondary"
+                    className="flex items-center gap-0.5 text-xs"
+                    style={{
+                      backgroundColor: `${entityColors.measures}20`,
+                      color: entityColors.measures,
+                    }}
+                  >
+                    <Hash className="h-3 w-3" />
+                    {id}
+                  </Badge>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  const renderGridView = () => (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {measures.map((measure, index) => {
+        const id = getMeasureId(measure);
+        return (
+          <Link
+            key={id || index}
+            href={`/measures/${id}`}
+            className="block transition-transform hover:scale-[1.02]"
+          >
+            <Card className="hover:border-primary/30 h-full transition-colors">
+              <CardContent className="pb-4 pt-5">
+                <div className="mb-2 flex items-start justify-between gap-2">
+                  <Gauge
+                    className="h-5 w-5 shrink-0"
+                    style={{ color: entityColors.measures }}
+                  />
+                  <Badge
+                    variant="secondary"
+                    className="flex items-center gap-0.5 text-xs"
+                    style={{
+                      backgroundColor: `${entityColors.measures}20`,
+                      color: entityColors.measures,
+                    }}
+                  >
+                    <Hash className="h-3 w-3" />
+                    {id}
+                  </Badge>
+                </div>
+                <h3 className="mb-2 line-clamp-2 font-semibold">
+                  {measure.name}
+                </h3>
+                {measure.description && (
+                  <p className="text-muted-foreground mb-3 line-clamp-3 text-sm">
+                    {measure.description}
+                  </p>
+                )}
+                <div className="text-muted-foreground flex flex-wrap gap-2 text-xs">
+                  {measure.higherIsBetter !== undefined && (
+                    <span className="flex items-center gap-1">
+                      {measure.higherIsBetter ? (
+                        <ArrowUp className="h-3 w-3 text-green-600" />
+                      ) : (
+                        <ArrowDown className="h-3 w-3 text-red-500" />
+                      )}
+                      {measure.higherIsBetter ? "Higher" : "Lower"}
+                    </span>
+                  )}
+                  {(measure.min !== undefined || measure.max !== undefined) && (
+                    <span>
+                      {measure.min ?? "−∞"} – {measure.max ?? "+∞"}
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        );
+      })}
+    </div>
+  );
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin" style={{ color: entityColors.measures }} />
+      </div>
+    );
+  }
+
+  if (measures.length === 0 && !searchQuery) {
+    return (
+      <div className="py-12 text-center">
+        <p className="text-muted-foreground">No measures found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Controls Bar */}
+      <div className="bg-background mb-3 flex items-center justify-between gap-4 border-b px-3 py-2">
+        {/* Left: Sort */}
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm">Sort:</span>
+          <Select value={sortId} onValueChange={handleSortChange}>
+            <SelectTrigger className="h-8 w-[180px] text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {SORT_OPTIONS.map((opt) => (
+                <SelectItem key={opt.id} value={opt.id} className="text-sm">
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Center: View Toggle */}
+        <ToggleGroup
+          type="single"
+          value={view}
+          onValueChange={(v) => v && setView(v)}
+          className="border"
+        >
+          <ToggleGroupItem
+            value="list"
+            aria-label="List view"
+            className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+          >
+            <List className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="table"
+            aria-label="Table view"
+            className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+          >
+            <Table2 className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="grid"
+            aria-label="Grid view"
+            className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+          >
+            <Grid3x3 className="h-4 w-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+
+        {/* Right: Search */}
+        <div className="flex items-center gap-2">
+          <Input
+            placeholder="Search measures..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+            className="h-8 w-[200px] text-sm"
+          />
+          <Button
+            onClick={handleSearch}
+            size="sm"
+            className="h-8"
+            style={{ backgroundColor: entityColors.measures }}
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+          <span className="text-muted-foreground text-sm">
+            {total.toLocaleString()} {total === 1 ? "result" : "results"}
+          </span>
+        </div>
+      </div>
+
+      {/* Empty State */}
+      {measures.length === 0 && searchQuery && (
+        <div className="py-12 text-center">
+          <p className="text-muted-foreground mb-2">
+            No measures match "{searchQuery}"
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setSearchInput("");
+              setSearchQuery("");
+            }}
+          >
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {/* Results */}
+      {measures.length > 0 && (
+        <>
+          {view === "list" && renderListView()}
+          {view === "table" && renderTableView()}
+          {view === "grid" && renderGridView()}
+        </>
+      )}
+
+      {/* Pagination */}
+      {total > resultsPerPage && (
+        <div className="mt-8 flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+            Previous
+          </Button>
+
+          <div className="flex items-center gap-1">
+            {(() => {
+              const totalPages = Math.ceil(total / resultsPerPage);
+              const pages = [];
+              const maxVisible = 5;
+
+              let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+              const endPage = Math.min(totalPages, startPage + maxVisible - 1);
+
+              if (endPage - startPage < maxVisible - 1) {
+                startPage = Math.max(1, endPage - maxVisible + 1);
+              }
+
+              if (startPage > 1) {
+                pages.push(
+                  <Button
+                    key={1}
+                    variant={currentPage === 1 ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCurrentPage(1)}
+                    style={currentPage === 1 ? { backgroundColor: entityColors.measures } : undefined}
+                  >
+                    1
+                  </Button>
+                );
+                if (startPage > 2) {
+                  pages.push(<span key="start-ellipsis" className="px-2">...</span>);
+                }
+              }
+
+              for (let i = startPage; i <= endPage; i++) {
+                if (i !== 1 && i !== totalPages) {
+                  pages.push(
+                    <Button
+                      key={i}
+                      variant={currentPage === i ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setCurrentPage(i)}
+                      style={currentPage === i ? { backgroundColor: entityColors.measures } : undefined}
+                    >
+                      {i}
+                    </Button>
+                  );
+                }
+              }
+
+              if (endPage < totalPages) {
+                if (endPage < totalPages - 1) {
+                  pages.push(<span key="end-ellipsis" className="px-2">...</span>);
+                }
+                pages.push(
+                  <Button
+                    key={totalPages}
+                    variant={currentPage === totalPages ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCurrentPage(totalPages)}
+                    style={currentPage === totalPages ? { backgroundColor: entityColors.measures } : undefined}
+                  >
+                    {totalPages}
+                  </Button>
+                );
+              }
+
+              return pages;
+            })()}
+          </div>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((p) => Math.min(Math.ceil(total / resultsPerPage), p + 1))}
+            disabled={currentPage >= Math.ceil(total / resultsPerPage)}
+          >
+            Next
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app-next/src/components/measure/measure-stats-card.tsx b/app-next/src/components/measure/measure-stats-card.tsx
new file mode 100644
index 00000000..e7840e3e
--- /dev/null
+++ b/app-next/src/components/measure/measure-stats-card.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Loader2, TrendingUp, Calendar, Hash } from "lucide-react";
+import { entityColors } from "@/constants/entityColors";
+
+interface MeasureStatsCardProps {
+  measureType: "evaluation_measure" | "estimation_procedure" | "data_quality";
+}
+
+interface Stats {
+  total: number;
+  dateRange: { first: string; last: string } | null;
+  typeSpecific: Record<string, any>;
+}
+
+export function MeasureStatsCard({ measureType }: MeasureStatsCardProps) {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        // Fetch all measures of this type to compute stats
+        const esQuery = {
+          query: {
+            bool: {
+              filter: [{ term: { measure_type: measureType } }],
+            },
+          },
+          size: 500,
+          sort: [{ date: { order: "asc" } }],
+        };
+
+        const res = await fetch("/api/search", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            indexName: "measure",
+            esQuery,
+          }),
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          const measures = data.hits?.hits?.map((hit: any) => hit._source) || [];
+
+          // Compute stats
+          const total = measures.length;
+          const dates = measures
+            .map((m: any) => m.date)
+            .filter(Boolean)
+            .sort();
+          const dateRange =
+            dates.length > 0
+              ? { first: dates[0], last: dates[dates.length - 1] }
+              : null;
+
+          // Type-specific stats
+          let typeSpecific: Record<string, any> = {};
+
+          if (measureType === "evaluation_measure") {
+            const higher = measures.filter(
+              (m: any) => m.higherIsBetter === "1" || m.higherIsBetter === 1
+            ).length;
+            const lower = measures.filter(
+              (m: any) => m.higherIsBetter === "0" || m.higherIsBetter === 0
+            ).length;
+            typeSpecific = {
+              higherIsBetter: higher,
+              lowerIsBetter: lower,
+            };
+          } else if (measureType === "estimation_procedure") {
+            const stratified = measures.filter(
+              (m: any) => m.stratified_sampling === "true"
+            ).length;
+            typeSpecific = {
+              stratified,
+              nonStratified: total - stratified,
+            };
+          }
+
+          setStats({ total, dateRange, typeSpecific });
+        }
+      } catch (error) {
+        console.error("[MeasureStatsCard] Error fetching stats:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+  }, [measureType]);
+
+  if (loading) {
+    return (
+      <Card className="mb-6">
+        <CardContent className="flex items-center justify-center py-8">
+          <Loader2
+            className="h-6 w-6 animate-spin"
+            style={{ color: entityColors.measures }}
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!stats) return null;
+
+  return (
+    <Card className="mb-6" style={{ borderColor: `${entityColors.measures}30` }}>
+      <CardContent className="pt-6">
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {/* Total Count */}
+          <div className="flex items-center gap-3">
+            <Hash
+              className="h-5 w-5"
+              style={{ color: entityColors.measures }}
+            />
+            <div>
+              <p className="text-2xl font-bold">{stats.total}</p>
+              <p className="text-muted-foreground text-xs">Total Measures</p>
+            </div>
+          </div>
+
+          {/* Date Range */}
+          {stats.dateRange && (
+            <div className="flex items-center gap-3">
+              <Calendar
+                className="h-5 w-5"
+                style={{ color: entityColors.measures }}
+              />
+              <div>
+                <p className="text-sm font-semibold">
+                  {new Date(stats.dateRange.first).getFullYear()} -{" "}
+                  {new Date(stats.dateRange.last).getFullYear()}
+                </p>
+                <p className="text-muted-foreground text-xs">Date Range</p>
+              </div>
+            </div>
+          )}
+
+          {/* Type-specific stats */}
+          {measureType === "evaluation_measure" && (
+            <>
+              <div className="flex items-center gap-3">
+                <TrendingUp className="h-5 w-5 text-green-600" />
+                <div>
+                  <p className="text-2xl font-bold">
+                    {stats.typeSpecific.higherIsBetter}
+                  </p>
+                  <p className="text-muted-foreground text-xs">Higher is Better</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3">
+                <TrendingUp className="h-5 w-5 rotate-180 text-red-500" />
+                <div>
+                  <p className="text-2xl font-bold">
+                    {stats.typeSpecific.lowerIsBetter}
+                  </p>
+                  <p className="text-muted-foreground text-xs">Lower is Better</p>
+                </div>
+              </div>
+            </>
+          )}
+
+          {measureType === "estimation_procedure" && (
+            <div className="flex items-center gap-3">
+              <TrendingUp
+                className="h-5 w-5"
+                style={{ color: entityColors.measures }}
+              />
+              <div>
+                <p className="text-2xl font-bold">
+                  {stats.typeSpecific.stratified}
+                </p>
+                <p className="text-muted-foreground text-xs">Stratified</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app-next/src/components/search/benchmarks/benchmarks-search-page.tsx b/app-next/src/components/search/benchmarks/benchmarks-search-page.tsx
index cca3d540..8e002edd 100644
--- a/app-next/src/components/search/benchmarks/benchmarks-search-page.tsx
+++ b/app-next/src/components/search/benchmarks/benchmarks-search-page.tsx
@@ -5,9 +5,14 @@ import type { SearchDriverOptions } from "@elastic/search-ui";
 import { useSearchParams } from "next/navigation";
 import { createBenchmarkConfig } from "./benchmark-search-config";
 import { CollectionsSearchContainer } from "../collections/collections-search-container";
+import { ActiveFiltersHeader } from "../shared/active-filters-header";
 import { BarChart3 } from "lucide-react";
 import { entityColors } from "@/constants/entityColors";
 
+const facetLabels: Record<string, string> = {
+  "uploader.keyword": "Uploader",
+};
+
 interface BenchmarksSearchPageProps {
   studyType: "task" | "run";
   title: string;
@@ -39,16 +44,19 @@ export function BenchmarksSearchPage({
         {/* Page Header */}
         <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">
-              <BarChart3
-                className="h-8 w-8"
-                style={{ color: entityColors.benchmarks }}
-                aria-hidden="true"
-              />
-              <div className="space-y-0">
-                <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-                <p className="text-muted-foreground">{description}</p>
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-start gap-3">
+                <BarChart3
+                  className="h-8 w-8"
+                  style={{ color: entityColors.benchmarks }}
+                  aria-hidden="true"
+                />
+                <div className="space-y-0">
+                  <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+                  <p className="text-muted-foreground">{description}</p>
+                </div>
               </div>
+              <ActiveFiltersHeader facetLabels={facetLabels} />
             </div>
           </div>
         </div>
diff --git a/app-next/src/components/search/collections/collections-search-page.tsx b/app-next/src/components/search/collections/collections-search-page.tsx
index dd8bd9e1..2b798b52 100644
--- a/app-next/src/components/search/collections/collections-search-page.tsx
+++ b/app-next/src/components/search/collections/collections-search-page.tsx
@@ -5,9 +5,14 @@ import type { SearchDriverOptions } from "@elastic/search-ui";
 import { useSearchParams } from "next/navigation";
 import { createCollectionConfig } from "./collection-search-config";
 import { CollectionsSearchContainer } from "./collections-search-container";
+import { ActiveFiltersHeader } from "../shared/active-filters-header";
 import { Layers } from "lucide-react";
 import { entityColors } from "@/constants/entityColors";
 
+const facetLabels: Record<string, string> = {
+  "uploader.keyword": "Uploader",
+};
+
 interface CollectionsSearchPageProps {
   studyType: "task" | "run";
   title: string;
@@ -41,16 +46,19 @@ export function CollectionsSearchPage({
         {/* Page Header */}
         <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">
-              <Layers
-                className="h-8 w-8"
-                style={{ color: entityColors.collections }}
-                aria-hidden="true"
-              />
-              <div className="space-y-0">
-                <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-                <p className="text-muted-foreground">{description}</p>
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-start gap-3">
+                <Layers
+                  className="h-8 w-8"
+                  style={{ color: entityColors.collections }}
+                  aria-hidden="true"
+                />
+                <div className="space-y-0">
+                  <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+                  <p className="text-muted-foreground">{description}</p>
+                </div>
               </div>
+              <ActiveFiltersHeader facetLabels={facetLabels} />
             </div>
           </div>
         </div>
diff --git a/app-next/src/components/search/datasets/datasets-search-page.tsx b/app-next/src/components/search/datasets/datasets-search-page.tsx
index 959c4184..7262049f 100644
--- a/app-next/src/components/search/datasets/datasets-search-page.tsx
+++ b/app-next/src/components/search/datasets/datasets-search-page.tsx
@@ -19,6 +19,7 @@ export function DatasetsSearchPage() {
     "qualities.NumberOfFeatures": "Features",
     "qualities.NumberOfClasses": "Task Type",
     format: "Format",
+    "tags.tag": "Tag",
   };
 
   return (
diff --git a/app-next/src/components/search/datasets/search-container.tsx b/app-next/src/components/search/datasets/search-container.tsx
index eba6ea25..b2f85476 100644
--- a/app-next/src/components/search/datasets/search-container.tsx
+++ b/app-next/src/components/search/datasets/search-container.tsx
@@ -68,29 +68,55 @@ export function SearchContainer() {
   const driver = context?.driver;
   const query = searchParams.get("q") || "";
 
+  const tagFilter = searchParams.get("tag") || "";
+
   // 👇 Sync URL query → Search UI driver (Next.js is source of truth for URL)
   useEffect(() => {
     if (!driver) return;
 
     // Type assertion - these methods exist at runtime but types are incomplete
     const driverAny = driver as unknown as {
-      getState: () => { searchTerm?: string };
+      getState: () => {
+        searchTerm?: string;
+        filters?: Array<{ field: string; values: string[]; type: string }>;
+      };
       getActions: () => {
         setSearchTerm: (
           term: string,
           options?: { shouldClearFilters?: boolean },
         ) => void;
+        addFilter: (
+          field: string,
+          value: string,
+          type?: string,
+        ) => void;
+        removeFilter: (
+          field: string,
+          value?: string,
+          type?: string,
+        ) => void;
       };
     };
 
     const currentTerm = driverAny.getState().searchTerm || "";
 
     // Only update if the term actually changed (prevents loops)
-    if (currentTerm === query) return;
+    if (currentTerm !== query) {
+      driverAny.getActions().setSearchTerm(query, { shouldClearFilters: false });
+    }
 
-    // setSearchTerm from actions triggers search automatically
-    driverAny.getActions().setSearchTerm(query, { shouldClearFilters: false });
-  }, [query, driver]);
+    // Apply tag filter from URL
+    if (tagFilter) {
+      const currentFilters = driverAny.getState().filters || [];
+      const existingTagFilter = currentFilters.find(
+        (f) => f.field === "tags.tag",
+      );
+      const hasTag = existingTagFilter?.values?.includes(tagFilter);
+      if (!hasTag) {
+        driverAny.getActions().addFilter("tags.tag", tagFilter, "any");
+      }
+    }
+  }, [query, tagFilter, driver]);
 
   return (
     <WithSearch
diff --git a/app-next/src/components/task/task-analysis-section.tsx b/app-next/src/components/task/task-analysis-section.tsx
index fe923488..167198be 100644
--- a/app-next/src/components/task/task-analysis-section.tsx
+++ b/app-next/src/components/task/task-analysis-section.tsx
@@ -469,7 +469,7 @@ export function TaskAnalysisSection({
                 </AlertDescription>
               </Alert>
             ) : (
-              <div className="overflow-hidden rounded-xl border bg-white shadow-sm dark:bg-slate-950">
+              <div className="overflow-hidden rounded-xl border bg-transparent shadow-sm">
                 <Table>
                   <TableHeader>
                     <TableRow className="bg-muted/50 text-xs">
@@ -534,7 +534,7 @@ export function TaskAnalysisSection({
               <p>Every dot is a run, click for details</p>
               <p>Every y-axis label is a flow, click for details</p>
             </div>
-            <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-slate-900">
+            <div className="rounded-xl border bg-transparent p-4 shadow-sm">
               <div className="plotly-chart-container">
                 <Plot
                   data={
@@ -556,7 +556,7 @@ export function TaskAnalysisSection({
                           ),
                           size: 9,
                           opacity: 0.7,
-                          line: { width: 0.5, color: "white" },
+                          line: { width: 0.5, color: "rgba(128,128,128,0.3)" },
                         },
                         customdata: group.runs.map((r) => r.run_id),
                       };
@@ -566,20 +566,28 @@ export function TaskAnalysisSection({
                     height: Math.max(400, flowsData.length * 35),
                     margin: { l: 280, r: 40, t: 40, b: 60 },
                     showlegend: false,
+                    font: { color: "#9ca3af" },
                     xaxis: {
                       title: selectedMetric.replace(/_/g, " ").toUpperCase(),
-                      gridcolor: "#f1f5f9",
+                      gridcolor: "rgba(128,128,128,0.2)",
                       zeroline: false,
                       side: "top",
-                    } as any,
+                      tickfont: { color: "#9ca3af" },
+                      titlefont: { color: "#9ca3af" },
+                    },
                     yaxis: {
                       automargin: true,
-                      gridcolor: "#f1f5f9",
+                      gridcolor: "rgba(128,128,128,0.2)",
+                      tickfont: { color: "#9ca3af" },
                     },
                     hovermode: "closest",
+                    hoverlabel: {
+                      font: { color: "white" },
+                      bordercolor: "white",
+                    },
                     paper_bgcolor: "transparent",
                     plot_bgcolor: "transparent",
-                  }}
+                  } as any}
                   config={{
                     displayModeBar: true,
                     responsive: true,
@@ -601,7 +609,7 @@ export function TaskAnalysisSection({
           {/* Section 3: People / Evaluations Over Time */}
           <section className="space-y-4">
             <h2 className="text-xl font-bold tracking-tight">People:</h2>
-            <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-slate-900">
+            <div className="rounded-xl border bg-transparent p-4 shadow-sm">
               <div className="plotly-chart-container">
                 <Plot
                   data={Array.from(uploaderColors.keys()).map((uploader) => {
@@ -615,8 +623,12 @@ export function TaskAnalysisSection({
                       x: uploaderRuns.map((r) => r.date),
                       y: uploaderRuns.map((r) => r.value),
                       text: uploaderRuns.map(
-                        (r) =>
-                          `Run ${r.run_id}<br>Flow: ${r.flow_name}<br>Score: ${r.value.toFixed(6)}<br>Date: ${new Date(r.date).toLocaleDateString()}`,
+                        (r) => {
+                          const flowLabel = r.flow_name.length > 60
+                            ? r.flow_name.substring(0, 60) + "..."
+                            : r.flow_name;
+                          return `Run ${r.run_id}<br>Flow: ${flowLabel}<br>Score: ${r.value.toFixed(6)}<br>Date: ${new Date(r.date).toLocaleDateString()}`;
+                        },
                       ),
                       hoverinfo: "text",
                       marker: {
@@ -631,20 +643,29 @@ export function TaskAnalysisSection({
                     height: 450,
                     margin: { l: 80, r: 40, t: 40, b: 60 },
                     showlegend: false,
+                    font: { color: "#9ca3af" },
                     xaxis: {
                       title: "upload_time",
-                      gridcolor: "#f1f5f9",
-                      type: "date" as any,
+                      gridcolor: "rgba(128,128,128,0.2)",
+                      type: "date",
+                      tickfont: { color: "#9ca3af" },
+                      titlefont: { color: "#9ca3af" },
                     },
                     yaxis: {
                       title: selectedMetric,
-                      gridcolor: "#f1f5f9",
-                      autorange: (isLowerBetter ? "reversed" : true) as any,
+                      gridcolor: "rgba(128,128,128,0.2)",
+                      autorange: isLowerBetter ? "reversed" : true,
+                      tickfont: { color: "#9ca3af" },
+                      titlefont: { color: "#9ca3af" },
                     },
                     hovermode: "closest",
+                    hoverlabel: {
+                      font: { color: "white" },
+                      bordercolor: "white",
+                    },
                     paper_bgcolor: "transparent",
                     plot_bgcolor: "transparent",
-                  }}
+                  } as any}
                   config={{
                     displayModeBar: true,
                     responsive: true,
diff --git a/app-next/src/components/task/task-navigation-menu.tsx b/app-next/src/components/task/task-navigation-menu.tsx
index dd4d734a..524a2b5b 100644
--- a/app-next/src/components/task/task-navigation-menu.tsx
+++ b/app-next/src/components/task/task-navigation-menu.tsx
@@ -68,7 +68,7 @@ export function TaskNavigationMenu({ runCount }: TaskNavigationMenuProps) {
           <div className="bg-background fixed top-0 right-0 bottom-0 z-50 w-80 shadow-2xl xl:hidden">
             <div className="flex h-full flex-col overflow-y-auto p-6">
               <div className="mb-6 flex items-center justify-between">
-                <h2 className="text-lg font-semibold">Navigation</h2>
+                <h2 className="text-lg font-semibold text-[#ffa726]">Navigation</h2>
                 <Button
                   variant="ghost"
                   size="icon"
@@ -109,7 +109,7 @@ export function TaskNavigationMenu({ runCount }: TaskNavigationMenuProps) {
 
                 {/* Navigation Links */}
                 <div className="bg-card rounded-lg border p-4 shadow-sm">
-                  <h3 className="text-foreground mb-3 text-sm font-semibold">
+                  <h3 className="mb-3 text-sm font-semibold text-[#ffa726]">
                     Quick Links
                   </h3>
                   <nav className="space-y-1">
diff --git a/app-next/src/hooks/useDatasetStats.ts b/app-next/src/hooks/useDatasetStats.ts
new file mode 100644
index 00000000..9ba65efb
--- /dev/null
+++ b/app-next/src/hooks/useDatasetStats.ts
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export interface NumericDistribution {
+  type: "numeric";
+  bins: number[];
+  counts: number[];
+  mean: number | null;
+  std: number | null;
+  min: number | null;
+  max: number | null;
+  missing: number;
+}
+
+export interface NominalDistribution {
+  type: "nominal";
+  categories: string[];
+  counts: number[];
+  missing: number;
+}
+
+export type FeatureDistribution = NumericDistribution | NominalDistribution;
+
+export interface CorrelationMatrix {
+  features: string[];
+  matrix: number[][];
+}
+
+export interface DatasetPreview {
+  columns: string[];
+  rows: (string | number | null)[][];
+  total_rows: number;
+}
+
+export interface DatasetStatistics {
+  distribution: Record<string, FeatureDistribution>;
+  correlation: CorrelationMatrix | null;
+  preview: DatasetPreview;
+}
+
+export interface DatasetStatsResponse {
+  dataset_id: number;
+  computed_at: string;
+  cached: boolean;
+  statistics: DatasetStatistics;
+}
+
+export interface DatasetStatsState {
+  stats: DatasetStatistics | null;
+  isLoading: boolean;
+  error: string | null;
+  cached: boolean;
+}
+
+/**
+ * Hook to fetch precomputed dataset statistics from Flask API via Next.js proxy
+ * This replaces client-side parquet parsing for distribution/correlation charts
+ *
+ * @param datasetId - OpenML dataset ID
+ * @param maxPreviewRows - Maximum rows to include in preview (default: 100)
+ * @param enabled - Whether to fetch data (default: true)
+ */
+export function useDatasetStats(
+  datasetId: number | string | undefined,
+  maxPreviewRows: number = 100,
+  enabled: boolean = true,
+) {
+  const [state, setState] = useState<DatasetStatsState>({
+    stats: null,
+    isLoading: false,
+    error: null,
+    cached: false,
+  });
+
+  useEffect(() => {
+    if (!datasetId || !enabled) {
+      return;
+    }
+
+    let cancelled = false;
+
+    async function fetchStats() {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+      try {
+        // Use Next.js API route proxy to avoid CORS issues
+        const url = `/api/datasets/${datasetId}/stats?max_preview_rows=${maxPreviewRows}`;
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.error || `Failed to fetch stats: ${response.statusText}`,
+          );
+        }
+
+        const data: DatasetStatsResponse = await response.json();
+
+        if (cancelled) return;
+
+        setState({
+          stats: data.statistics,
+          isLoading: false,
+          error: null,
+          cached: data.cached,
+        });
+      } catch (err) {
+        console.error("Failed to fetch dataset stats:", err);
+        if (cancelled) return;
+
+        setState({
+          stats: null,
+          isLoading: false,
+          error: err instanceof Error ? err.message : "Failed to load statistics",
+          cached: false,
+        });
+      }
+    }
+
+    fetchStats();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [datasetId, maxPreviewRows, enabled]);
+
+  return state;
+}
diff --git a/app-next/src/lib/api/measure.ts b/app-next/src/lib/api/measure.ts
new file mode 100644
index 00000000..f9e42a6f
--- /dev/null
+++ b/app-next/src/lib/api/measure.ts
@@ -0,0 +1,99 @@
+import { Measure } from "@/types/measure";
+import { notFound } from "next/navigation";
+import { getElasticsearchUrl } from "@/lib/elasticsearch";
+
+const ES_INDEX = "measure";
+
+export async function fetchMeasure(id: string): Promise<Measure> {
+  try {
+    const response = await fetch(
+      getElasticsearchUrl(`${ES_INDEX}/_doc/${id}`),
+      {
+        next: {
+          revalidate: 3600,
+          tags: [`measure-${id}`],
+        },
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+
+    if (response.status === 404) {
+      notFound();
+    }
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch measure: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    if (!data.found || !data._source) {
+      notFound();
+    }
+
+    return data._source as Measure;
+  } catch (error) {
+    if (error instanceof Error && error.message === "NEXT_NOT_FOUND") {
+      throw error;
+    }
+    throw new Error("Failed to load measure");
+  }
+}
+
+interface RelatedTask {
+  task_id: number;
+  task_type: string;
+  task_type_id: number;
+  source_data?: {
+    data_id?: number;
+    name?: string;
+  };
+  runs?: number;
+}
+
+export async function fetchRelatedTasks(
+  measureName: string,
+): Promise<RelatedTask[]> {
+  try {
+    const response = await fetch(getElasticsearchUrl("task/_search"), {
+      method: "POST",
+      next: {
+        revalidate: 3600,
+        tags: [`measure-tasks-${measureName}`],
+      },
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query: {
+          term: {
+            "evaluation_measures.keyword": measureName,
+          },
+        },
+        _source: [
+          "task_id",
+          "task_type",
+          "task_type_id",
+          "source_data",
+          "runs",
+        ],
+        size: 50,
+        sort: [{ runs: { order: "desc" } }],
+      }),
+    });
+
+    if (!response.ok) {
+      return [];
+    }
+
+    const data = await response.json();
+    return (data.hits?.hits || []).map(
+      (hit: { _source: RelatedTask }) => hit._source,
+    );
+  } catch (error) {
+    console.error("Error fetching related tasks:", error);
+    return [];
+  }
+}
diff --git a/app-next/src/lib/api/study.ts b/app-next/src/lib/api/study.ts
new file mode 100644
index 00000000..285b289b
--- /dev/null
+++ b/app-next/src/lib/api/study.ts
@@ -0,0 +1,35 @@
+import { getElasticsearchUrl } from "@/lib/elasticsearch";
+
+export 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;
+}
+
+/**
+ * Fetch study metadata from Elasticsearch
+ */
+export 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;
+}
diff --git a/app-next/src/services/OpenMLSearchConnector.ts b/app-next/src/services/OpenMLSearchConnector.ts
index 7454b75d..8d86b08f 100644
--- a/app-next/src/services/OpenMLSearchConnector.ts
+++ b/app-next/src/services/OpenMLSearchConnector.ts
@@ -22,6 +22,8 @@ interface FacetConfig {
 interface ElasticsearchAggregation {
   buckets?: Array<{
     key: string;
+    from?: number;
+    to?: number;
     doc_count: number;
   }>;
 }
@@ -174,11 +176,8 @@ class OpenMLSearchConnector implements APIConnector {
               range: { [filter.field]: range },
             });
           }
-          // Predefined range bucket selected by name (e.g., "0-1000")
-          else if (
-            typeof filterValue === "string" &&
-            filterValue.includes("-")
-          ) {
+          // Predefined range bucket selected by name (e.g., "100s", "Millions")
+          else if (typeof filterValue === "string") {
             const facetConfig = queryConfig.facets?.[filter.field] as
               | FacetConfig
               | undefined;
@@ -194,7 +193,36 @@ class OpenMLSearchConnector implements APIConnector {
                 query.bool?.filter?.push({
                   range: { [filter.field]: range },
                 });
+              } else {
+                // Try parsing ES bucket key format "from-to" (e.g., "0.0-999.0")
+                const dashIdx = filterValue.indexOf("-", filterValue.startsWith("-") ? 1 : 0);
+                if (dashIdx > 0) {
+                  const fromStr = filterValue.substring(0, dashIdx);
+                  const toStr = filterValue.substring(dashIdx + 1);
+                  const fromVal = fromStr === "*" ? undefined : parseFloat(fromStr);
+                  const toVal = toStr === "*" ? undefined : parseFloat(toStr);
+                  if (fromVal !== undefined || toVal !== undefined) {
+                    const range: Record<string, number> = {};
+                    if (fromVal !== undefined && !isNaN(fromVal)) range.gte = fromVal;
+                    if (toVal !== undefined && !isNaN(toVal)) range.lte = toVal;
+                    query.bool?.filter?.push({
+                      range: { [filter.field]: range },
+                    });
+                  }
+                } else {
+                  // No matching range — treat as regular term filter
+                  if (!filtersByField.has(filter.field)) {
+                    filtersByField.set(filter.field, []);
+                  }
+                  filtersByField.get(filter.field)!.push(filterValue);
+                }
+              }
+            } else {
+              // Not a range facet — treat as regular term filter
+              if (!filtersByField.has(filter.field)) {
+                filtersByField.set(filter.field, []);
               }
+              filtersByField.get(filter.field)!.push(filterValue);
             }
           }
           // Regular value filter (term/terms)
@@ -209,7 +237,21 @@ class OpenMLSearchConnector implements APIConnector {
 
       // Add term/terms queries
       filtersByField.forEach((values, field) => {
-        if (values.length === 1) {
+        // Nested fields (e.g., tags.tag) require a nested query
+        const nestedPath = field.split(".").length > 1 ? field.split(".")[0] : null;
+        const isNested = nestedPath === "tags";
+
+        if (isNested) {
+          // Each value needs its own nested query
+          values.forEach((value) => {
+            query.bool?.filter?.push({
+              nested: {
+                path: nestedPath,
+                query: { term: { [field]: value } },
+              },
+            });
+          });
+        } else if (values.length === 1) {
           query.bool?.filter?.push({ term: { [field]: values[0] } });
         } else if (values.length > 1) {
           query.bool?.filter?.push({ terms: { [field]: values } });
@@ -309,6 +351,7 @@ class OpenMLSearchConnector implements APIConnector {
   formatResponse(
     esResponse: ElasticsearchResponse<SourceDocument>,
     requestState: RequestState,
+    queryConfig?: QueryConfig,
   ): ResponseState {
     const { hits, aggregations } = esResponse;
 
@@ -362,13 +405,35 @@ class OpenMLSearchConnector implements APIConnector {
       Object.entries(aggregations).forEach(([fieldName, agg]) => {
         const typedAgg = agg as ElasticsearchAggregation;
         if (typedAgg.buckets) {
+          // For range facets, map ES bucket keys back to configured range names
+          const facetConfig = queryConfig?.facets?.[fieldName] as
+            | FacetConfig
+            | undefined;
+          const isRange =
+            facetConfig?.type === "range" && facetConfig.ranges;
+
           facets[fieldName] = [
             {
               type: "value",
-              data: typedAgg.buckets.map((bucket) => ({
-                value: bucket.key,
-                count: bucket.doc_count,
-              })),
+              data: typedAgg.buckets
+                .filter((bucket) => bucket.doc_count > 0)
+                .map((bucket) => {
+                  let value = bucket.key;
+
+                  if (isRange && facetConfig.ranges) {
+                    // Match by from/to values from the ES bucket
+                    const matchedRange = facetConfig.ranges.find(
+                      (r) =>
+                        r.from === bucket.from &&
+                        r.to === bucket.to,
+                    );
+                    if (matchedRange) {
+                      value = matchedRange.name;
+                    }
+                  }
+
+                  return { value, count: bucket.doc_count };
+                }),
             },
           ];
         }
@@ -431,7 +496,7 @@ class OpenMLSearchConnector implements APIConnector {
         );
       }
 
-      return this.formatResponse(data, requestState);
+      return this.formatResponse(data, requestState, queryConfig);
     } catch (error) {
       console.error("[OpenMLSearchConnector] Error:", error);
       throw error;
diff --git a/app-next/src/types/measure.ts b/app-next/src/types/measure.ts
new file mode 100644
index 00000000..e7b0fbd7
--- /dev/null
+++ b/app-next/src/types/measure.ts
@@ -0,0 +1,14 @@
+export interface Measure {
+  measure_id?: number;
+  quality_id?: number;
+  proc_id?: number;
+  eval_id?: number;
+  name: string;
+  description?: string;
+  measure_type: "data_quality" | "evaluation_measure" | "estimation_procedure";
+  date?: string;
+  min?: number;
+  max?: number;
+  unit?: string;
+  higherIsBetter?: boolean;
+}