diff --git a/app-next/src/app/[locale]/dashboard/page.tsx b/app-next/src/app/[locale]/dashboard/page.tsx
index 00ce855b..b5d94f25 100644
--- a/app-next/src/app/[locale]/dashboard/page.tsx
+++ b/app-next/src/app/[locale]/dashboard/page.tsx
@@ -1,4 +1,7 @@
 import { getTranslations } from "next-intl/server";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { UserDashboard } from "@/components/dashboard/user-dashboard";
 import type { Metadata } from "next";
 
@@ -23,6 +26,17 @@ export async function generateMetadata({
   };
 }
 
-export default function DashboardPage() {
+export default async function DashboardPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect(`/${locale}/auth/sign-in?callbackUrl=/${locale}/dashboard`);
+  }
+
   return <UserDashboard />;
 }
diff --git a/app-next/src/app/api/(dev)/debug-env/route.ts b/app-next/src/app/api/(dev)/debug-env/route.ts
new file mode 100644
index 00000000..2765a06f
--- /dev/null
+++ b/app-next/src/app/api/(dev)/debug-env/route.ts
@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+
+/**
+ * DEBUG ENDPOINT - Remove in production!
+ * Shows server-side environment variables
+ */
+export async function GET() {
+  // Only allow in development/testing
+  if (process.env.NODE_ENV === "production") {
+    return NextResponse.json({ error: "Not available in production" }, { status: 403 });
+  }
+
+  const serverEnv = {
+    // Database
+    MYSQL_HOST: process.env.MYSQL_HOST || "(not set)",
+    MYSQL_PORT: process.env.MYSQL_PORT || "(not set)",
+    MYSQL_DATABASE: process.env.MYSQL_DATABASE || "(not set)",
+    MYSQL_USER: process.env.MYSQL_USER || "(not set)",
+    MYSQL_PASSWORD: process.env.MYSQL_PASSWORD ? "***SET***" : "(not set)",
+
+    // GitHub
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID || "(not set)",
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET ? "***SET***" : "(not set)",
+
+    // Other secrets
+    JWT_SECRET: process.env.JWT_SECRET ? "***SET***" : "(not set)",
+
+    // Public URLs (for comparison)
+    NEXT_PUBLIC_OPENML_API_URL: process.env.NEXT_PUBLIC_OPENML_API_URL || "(not set)",
+    NEXT_PUBLIC_ELASTICSEARCH_URL: process.env.NEXT_PUBLIC_ELASTICSEARCH_URL || "(not set)",
+  };
+
+  return NextResponse.json({
+    message: "Server-side environment variables",
+    env: serverEnv,
+  });
+}
diff --git a/app-next/src/app/api/auth/[...nextauth]/route.ts b/app-next/src/app/api/auth/[...nextauth]/route.ts
index 64eaf242..4179f592 100644
--- a/app-next/src/app/api/auth/[...nextauth]/route.ts
+++ b/app-next/src/app/api/auth/[...nextauth]/route.ts
@@ -65,8 +65,6 @@ export const authOptions: NextAuthOptions = {
 
         try {
           // Direct database authentication - bypasses Flask
-          console.log("[Auth] Direct DB login for:", credentials.email);
-
           // Find user by email or username
           // Query only columns guaranteed to exist in the legacy schema
           const user = await queryOne(
@@ -75,7 +73,6 @@ export const authOptions: NextAuthOptions = {
           );
 
           if (!user) {
-            console.log("[Auth] User not found:", credentials.email);
             return null;
           }
 
@@ -83,7 +80,6 @@ export const authOptions: NextAuthOptions = {
 
           // Check if user is active
           if (!dbUser.active) {
-            console.log("[Auth] User not activated:", credentials.email);
             return null;
           }
 
@@ -94,12 +90,9 @@ export const authOptions: NextAuthOptions = {
           );
 
           if (!isValid) {
-            console.log("[Auth] Invalid password for:", credentials.email);
             return null;
           }
 
-          console.log("[Auth] Login successful for:", dbUser.username);
-
           // Try to get session_hash (API key) if column exists
           let sessionHash: string | null = null;
           try {
@@ -112,6 +105,36 @@ export const authOptions: NextAuthOptions = {
             // session_hash column may not exist in all deployments
           }
 
+          // Resolve real OpenML user ID from API key (handles local dev ID mismatch)
+          let openmlUserId: string | undefined;
+          if (sessionHash) {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 4000);
+            try {
+              const openmlApiUrl =
+                process.env.OPENML_API_URL || "https://www.openml.org";
+              // Try /user/whoami first, fall back to /user/data
+              for (const path of ["/api/v1/json/user/whoami", "/api/v1/json/user/data"]) {
+                const res = await fetch(
+                  `${openmlApiUrl}${path}?api_key=${encodeURIComponent(sessionHash)}`,
+                  { signal: controller.signal },
+                );
+                if (res.ok) {
+                  const data = await res.json();
+                  const rawId = data?.user?.id ?? data?.id;
+                  if (rawId != null) {
+                    openmlUserId = String(rawId);
+                    break;
+                  }
+                }
+              }
+            } catch {
+              // Non-critical: fall back to local DB ID for ownership checks
+            } finally {
+              clearTimeout(timeoutId);
+            }
+          }
+
           // Return user object
           return {
             id: dbUser.id.toString(),
@@ -123,6 +146,7 @@ export const authOptions: NextAuthOptions = {
               dbUser.image && dbUser.image !== "0000" ? dbUser.image : null,
             username: dbUser.username,
             session_hash: sessionHash,
+            openmlUserId,
           };
         } catch (error) {
           console.error("Login error:", error);
@@ -309,7 +333,7 @@ export const authOptions: NextAuthOptions = {
             user.session_hash = dbUser.session_hash || null;
           }
           // Mark as local user (OAuth users don't exist on openml.org)
-          (user as any).isLocalUser = true;
+          user.isLocalUser = true;
           return true;
         } catch (error) {
           console.error("SignIn Callback Error:", error);
@@ -336,7 +360,8 @@ export const authOptions: NextAuthOptions = {
         token.firstName = user.firstName;
         token.lastName = user.lastName;
         token.picture = user.image;
-        token.isLocalUser = (user as any).isLocalUser || false;
+        token.isLocalUser = user.isLocalUser || false;
+        token.openmlUserId = user.openmlUserId;
       }
 
       return token;
@@ -352,14 +377,18 @@ export const authOptions: NextAuthOptions = {
         session.user.lastName = token.lastName;
         // Add API key to session for likes/votes
         if (token.apikey) {
-          session.apikey = token.apikey as string;
+          session.apikey = token.apikey;
         }
         // Add profile image to session
         if (token.picture) {
-          session.user.image = token.picture as string;
+          session.user.image = token.picture;
         }
         // Mark if user is local-only (not from openml.org)
-        (session.user as any).isLocalUser = token.isLocalUser || false;
+        session.user.isLocalUser = token.isLocalUser || false;
+        // Real OpenML user ID (may differ from local DB ID in dev environments)
+        if (token.openmlUserId) {
+          session.user.openmlUserId = token.openmlUserId;
+        }
       }
       return session;
     },
diff --git a/app-next/src/app/api/collections/create/route.ts b/app-next/src/app/api/collections/create/route.ts
new file mode 100644
index 00000000..d9d53416
--- /dev/null
+++ b/app-next/src/app/api/collections/create/route.ts
@@ -0,0 +1,150 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { sendCreationConfirmationEmail } from "@/lib/mail";
+
+const OPENML_API =
+  process.env.OPENML_API_URL ||
+  process.env.NEXT_PUBLIC_OPENML_API_URL ||
+  "https://www.openml.org";
+
+function buildStudyXml(fields: {
+  name: string;
+  description?: string;
+  mainEntityType: "task" | "run";
+  taskIds?: number[];
+  runIds?: number[];
+}): string {
+  const esc = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+  // OpenML uses `alias` as the human-readable name; must be URL-safe
+  const alias = fields.name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+  const taskSection = fields.taskIds?.length
+    ? `  <oml:tasks>\n` +
+      fields.taskIds.map((id) => `    <oml:task_id>${id}</oml:task_id>\n`).join("") +
+      `  </oml:tasks>\n`
+    : "";
+
+  const runSection = fields.runIds?.length
+    ? `  <oml:runs>\n` +
+      fields.runIds.map((id) => `    <oml:run_id>${id}</oml:run_id>\n`).join("") +
+      `  </oml:runs>\n`
+    : "";
+
+  return (
+    `<?xml version="1.0" encoding="UTF-8"?>\n` +
+    `<oml:study xmlns:oml="http://openml.org/openml">\n` +
+    `  <oml:alias>${esc(alias)}</oml:alias>\n` +
+    `  <oml:main_entity_type>${fields.mainEntityType}</oml:main_entity_type>\n` +
+    `  <oml:name>${esc(fields.name)}</oml:name>\n` +
+    (fields.description
+      ? `  <oml:description>${esc(fields.description)}</oml:description>\n`
+      : "") +
+    taskSection +
+    runSection +
+    `</oml:study>`
+  );
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const apiKey = (session as { apikey?: string }).apikey;
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: "No API key found. Please re-sign in." },
+        { status: 401 },
+      );
+    }
+
+    const body = await request.json();
+    const { collectionname, description, taskids, runids, collectiontype } = body;
+
+    if (!collectionname || (!taskids && !runids)) {
+      return NextResponse.json(
+        { error: "collectionname and at least one task or run ID are required." },
+        { status: 400 },
+      );
+    }
+
+    const parseIds = (raw: string | undefined) =>
+      raw
+        ? String(raw).split(/[\s,]+/).map((s) => parseInt(s.trim())).filter((n) => !isNaN(n))
+        : [];
+
+    const taskIdList = parseIds(taskids);
+    const runIdList = parseIds(runids);
+
+    if (taskIdList.length === 0 && runIdList.length === 0) {
+      return NextResponse.json(
+        { error: "No valid task or run IDs provided." },
+        { status: 400 },
+      );
+    }
+
+    const xml = buildStudyXml({
+      name: collectionname,
+      description: description || undefined,
+      mainEntityType: collectiontype === "runs" ? "run" : "task",
+      taskIds: taskIdList.length ? taskIdList : undefined,
+      runIds: runIdList.length ? runIdList : undefined,
+    });
+
+    const openmlForm = new FormData();
+    openmlForm.append("api_key", apiKey);
+    openmlForm.append(
+      "description",
+      new Blob([xml], { type: "text/xml" }),
+      "description.xml",
+    );
+
+    const response = await fetch(`${OPENML_API}/api/v1/study`, {
+      method: "POST",
+      body: openmlForm,
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      console.error("OpenML study create error:", text);
+      let message = "Failed to create collection. Please try again.";
+      if (response.status === 401 || response.status === 403) {
+        message = "Your API key was rejected.";
+      } else {
+        const msgMatch = text.match(/<oml:message>([^<]+)<\/oml:message>/);
+        const infoMatch = text.match(/<oml:additional_information>([^<]+)<\/oml:additional_information>/);
+        if (msgMatch) message = msgMatch[1].trim();
+        if (infoMatch) message += ` — ${infoMatch[1].trim()}`;
+      }
+      return NextResponse.json({ error: message }, { status: response.status });
+    }
+
+    const text = await response.text();
+    const idMatch = text.match(/<oml:id>(\d+)<\/oml:id>/);
+    const studyId: string = idMatch ? idMatch[1] : "new";
+
+    if (session.user.email) {
+      sendCreationConfirmationEmail(
+        session.user.email,
+        "collection",
+        collectionname,
+        studyId,
+      ).catch((err: unknown) =>
+        console.error("Failed to send collection creation email:", err),
+      );
+    }
+
+    return NextResponse.json({ success: true, id: studyId });
+  } catch (error) {
+    console.error("Collection create error:", error);
+    return NextResponse.json(
+      { error: "Failed to create collection." },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app-next/src/app/api/count/route.ts b/app-next/src/app/api/count/route.ts
index 469b6bd4..167889ae 100644
--- a/app-next/src/app/api/count/route.ts
+++ b/app-next/src/app/api/count/route.ts
@@ -11,9 +11,6 @@ export async function GET() {
     (i) => i !== "user" && i !== "benchmark",
   );
 
-  // console.log("🔍 [Count API] Elasticsearch URL:", elasticsearchEndpoint);
-  // console.log("📦 [Count API] Indices:", indices);
-
   // Build NDJSON body for _msearch - correct format
   // For datasets (data index), only count active ones per team leader request
   let requestBody = "";
@@ -44,16 +41,11 @@ export async function GET() {
   const startTime = Date.now();
 
   try {
-    // console.log("⏳ [Count API] Sending request...");
-
     const response = await axios.post(elasticsearchEndpoint, requestBody, {
       headers: { "Content-Type": "application/x-ndjson" },
       timeout: 30000, // 30 second timeout
     });
 
-    const duration = Date.now() - startTime;
-    // console.log(`✅ [Count API] Success in ${duration}ms`);
-
     // Extract counts safely
     const allLabels = [...indices, ...extraLabels];
     const counts = response.data.responses.map((r: any, i: number) => ({
@@ -62,7 +54,6 @@ export async function GET() {
         typeof r.hits.total === "number" ? r.hits.total : r.hits.total.value,
     }));
 
-    // console.log("📊 [Count API] Counts:", counts);
     return NextResponse.json(counts);
   } catch (error) {
     const duration = Date.now() - startTime;
diff --git a/app-next/src/app/api/datasets/[id]/edit/route.ts b/app-next/src/app/api/datasets/[id]/edit/route.ts
index d73b8bb6..38b6fdb8 100644
--- a/app-next/src/app/api/datasets/[id]/edit/route.ts
+++ b/app-next/src/app/api/datasets/[id]/edit/route.ts
@@ -1,9 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { sendDatasetEditEmail } from "@/lib/mail";
+import { APP_CONFIG } from "@/lib/config";
 
 const OPENML_API =
-  process.env.FLASK_BACKEND_URL || "https://www.openml.org";
+  process.env.OPENML_API_URL ||
+  APP_CONFIG.openmlApiUrl ||
+  "https://www.openml.org";
 
 export async function POST(
   request: NextRequest,
@@ -27,11 +31,10 @@ export async function POST(
 
   const body = await request.json();
 
-  // Build form data for OpenML REST API
-  const formData = new URLSearchParams();
-  formData.append("api_key", apiKey);
+  // Build XML for OpenML edit_parameters (required by the API)
+  const xmlFields: string[] = [];
 
-  const fields = [
+  const textFields = [
     "description",
     "creator",
     "collection_date",
@@ -42,39 +45,54 @@ export async function POST(
   ];
 
   // Owner-only fields
-  if (body.isOwner) {
-    fields.push(
-      "default_target_attribute",
-      "ignore_attribute",
-      "row_id_attribute",
-    );
-  }
+  const ownerFields = body.isOwner
+    ? ["default_target_attribute", "ignore_attribute", "row_id_attribute"]
+    : [];
 
-  for (const field of fields) {
+  for (const field of [...textFields, ...ownerFields]) {
     if (body[field] !== undefined) {
-      // Send empty string as-is (the API will clear the field)
-      formData.append(field, body[field] || "");
+      const value = (body[field] || "").toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      xmlFields.push(`  <oml:${field}>${value}</oml:${field}>`);
     }
   }
 
+  const editParametersXml =
+    `<?xml version="1.0" encoding="UTF-8"?>\n` +
+    `<oml:data_set_description xmlns:oml="http://openml.org/openml">\n` +
+    xmlFields.join("\n") +
+    `\n</oml:data_set_description>`;
+
+  const formData = new URLSearchParams();
+  formData.append("api_key", apiKey);
+  formData.append("edit_parameters", editParametersXml);
+
   try {
-    const response = await fetch(
-      `${OPENML_API}/api/v1/json/data/${id}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-        body: formData.toString(),
+    const response = await fetch(`${OPENML_API}/api/v1/json/data/edit/${id}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
       },
-    );
+      body: formData.toString(),
+    });
 
     if (!response.ok) {
       const text = await response.text();
       console.error(`OpenML API error editing dataset ${id}:`, text);
-      return NextResponse.json(
-        { error: "Failed to save changes. Please try again." },
-        { status: response.status },
+      const message =
+        response.status === 401 || response.status === 403
+          ? "Your API key is not accepted by the OpenML server. If you are using a local test account, dataset editing is not supported — only real OpenML accounts can save changes."
+          : response.status === 412
+            ? "The OpenML server rejected this edit. You can only edit datasets you own."
+            : "Failed to save changes. Please try again.";
+      return NextResponse.json({ error: message }, { status: response.status });
+    }
+
+    // Send email notification upon successful edit
+    if (session.user?.email) {
+      // We don't always have the name in the body, so we use ID as fallback
+      const datasetName = body.name || `Dataset ${id}`;
+      await sendDatasetEditEmail(session.user.email, datasetName, id).catch(
+        (err) => console.error("Failed to send edit email:", err),
       );
     }
 
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..8a3d9e5f
--- /dev/null
+++ b/app-next/src/app/api/datasets/[id]/stats/route.ts
@@ -0,0 +1,87 @@
+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";
+
+  const controller = new AbortController();
+  // Flask needs time to download + process large datasets from OpenML
+  const timeoutId = setTimeout(() => controller.abort(), 120_000);
+
+  try {
+    const flaskUrl = `${FLASK_BACKEND_URL}/api/v1/datasets/${datasetId}/stats?max_preview_rows=${maxPreviewRows}&force_refresh=${forceRefresh}`;
+
+    const response = await fetch(flaskUrl, {
+      headers: {
+        "Accept": "application/json",
+      },
+      signal: controller.signal,
+    });
+
+    clearTimeout(timeoutId);
+
+    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();
+    return NextResponse.json(data);
+  } catch (error) {
+    clearTimeout(timeoutId);
+    console.error("[Stats API] Failed to fetch stats from Flask:", error);
+
+    // Timeout — dataset too large or Flask download stalled
+    if (error instanceof Error && error.name === "AbortError") {
+      return NextResponse.json(
+        { error: "Stats computation timed out. The dataset may be too large to process." },
+        { status: 504 }
+      );
+    }
+
+    // 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/datasets/[id]/tags/route.ts b/app-next/src/app/api/datasets/[id]/tags/route.ts
new file mode 100644
index 00000000..93943d8d
--- /dev/null
+++ b/app-next/src/app/api/datasets/[id]/tags/route.ts
@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { APP_CONFIG } from "@/lib/config";
+
+const OPENML_API =
+  process.env.OPENML_API_URL ||
+  APP_CONFIG.openmlApiUrl ||
+  "https://www.openml.org";
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const apiKey = (session as { apikey?: string }).apikey;
+  if (!apiKey) {
+    return NextResponse.json({ error: "No API key found." }, { status: 401 });
+  }
+
+  const { tag } = await request.json();
+  if (!tag) {
+    return NextResponse.json({ error: "tag is required" }, { status: 400 });
+  }
+
+  const form = new URLSearchParams({ api_key: apiKey, data_id: id, tag });
+  const response = await fetch(`${OPENML_API}/api/v1/json/data/tag`, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: form.toString(),
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    return NextResponse.json(
+      { error: `Failed to add tag: ${text.slice(0, 200)}` },
+      { status: response.status },
+    );
+  }
+
+  return NextResponse.json({ success: true });
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const apiKey = (session as { apikey?: string }).apikey;
+  if (!apiKey) {
+    return NextResponse.json({ error: "No API key found." }, { status: 401 });
+  }
+
+  const { tag } = await request.json();
+  if (!tag) {
+    return NextResponse.json({ error: "tag is required" }, { status: 400 });
+  }
+
+  const form = new URLSearchParams({ api_key: apiKey, data_id: id, tag });
+  const response = await fetch(`${OPENML_API}/api/v1/json/data/untag`, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: form.toString(),
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    return NextResponse.json(
+      { error: `Failed to remove tag: ${text.slice(0, 200)}` },
+      { status: response.status },
+    );
+  }
+
+  return NextResponse.json({ success: true });
+}
diff --git a/app-next/src/app/api/datasets/upload/route.ts b/app-next/src/app/api/datasets/upload/route.ts
new file mode 100644
index 00000000..0bd57820
--- /dev/null
+++ b/app-next/src/app/api/datasets/upload/route.ts
@@ -0,0 +1,134 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { sendDatasetUploadEmail, sendCreationConfirmationEmail } from "@/lib/mail";
+
+import { APP_CONFIG } from "@/lib/config";
+
+const FLASK_BACKEND_URL =
+  process.env.FLASK_BACKEND_URL || "http://localhost:5000";
+
+const OPENML_API =
+  process.env.OPENML_API_URL ||
+  APP_CONFIG.openmlApiUrl ||
+  "https://www.openml.org";
+
+export async function POST(request: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const apiKey = (session as { apikey?: string }).apikey;
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: "No API key found. Please re-sign in." },
+        { status: 401 },
+      );
+    }
+
+    const formData = await request.formData();
+    const file = formData.get("file") as File | null;
+    const name = formData.get("name")?.toString() || "";
+
+    if (!file || !name) {
+      return NextResponse.json(
+        { error: "File and name are required." },
+        { status: 400 },
+      );
+    }
+
+    // Build metadata JSON as Flask expects
+    const metadata = {
+      dataset_name: name,
+      description: formData.get("description")?.toString() || "",
+      creator: formData.get("creator")?.toString() || "",
+      contributor: formData.get("contributor")?.toString() || "",
+      collection_date: formData.get("collection_date")?.toString() || "",
+      licence: formData.get("licence")?.toString() || "",
+      language: formData.get("language")?.toString() || "",
+      def_tar_att: formData.get("default_target_attribute")?.toString() || "",
+      ignore_attribute: formData.get("ignore_attribute")?.toString() || "",
+      citation: formData.get("citation")?.toString() || "",
+    };
+
+    const flaskForm = new FormData();
+    flaskForm.append("api_key", apiKey);
+    flaskForm.append("dataset", file, file.name);
+    flaskForm.append(
+      "metadata",
+      new Blob([JSON.stringify(metadata)], { type: "application/json" }),
+      "metadata.json",
+    );
+
+    const response = await fetch(`${FLASK_BACKEND_URL}/data-upload`, {
+      method: "POST",
+      body: flaskForm,
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      console.error("Flask upload error:", text);
+      let errorMessage = "Upload failed. Please try again.";
+      try {
+        const errorJson = JSON.parse(text);
+        if (errorJson.msg) errorMessage = errorJson.msg;
+        else if (errorJson.error) errorMessage = errorJson.error;
+      } catch {
+        // text is not JSON — use as-is if it's short enough
+        if (text && text.length < 300) errorMessage = text;
+      }
+      return NextResponse.json(
+        { error: errorMessage },
+        { status: response.status },
+      );
+    }
+
+    const result = await response.json();
+    const datasetId: string = result.id ?? "new";
+
+    // Apply tags if provided and we have a real dataset ID
+    const tagsRaw = formData.get("tags")?.toString() || "";
+    if (tagsRaw && datasetId !== "new") {
+      const tagList = tagsRaw
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean);
+      for (const tag of tagList) {
+        const tagForm = new URLSearchParams({ api_key: apiKey, data_id: datasetId, tag });
+        fetch(`${OPENML_API}/api/v1/json/data/tag`, {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: tagForm.toString(),
+        }).catch((err) => console.error(`Failed to apply tag "${tag}":`, err));
+      }
+    }
+
+    if (session.user.email) {
+      sendDatasetUploadEmail(
+        session.user.name || session.user.email,
+        name,
+        datasetId,
+      ).catch((err: unknown) =>
+        console.error("Failed to send admin upload email:", err),
+      );
+      sendCreationConfirmationEmail(
+        session.user.email,
+        "dataset",
+        name,
+        datasetId,
+      ).catch((err: unknown) =>
+        console.error("Failed to send uploader confirmation email:", err),
+      );
+    }
+
+    return NextResponse.json({ success: true, id: datasetId });
+  } catch (error) {
+    console.error("Upload error:", error);
+    return NextResponse.json(
+      { error: "Failed to upload dataset." },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app-next/src/app/api/es-proxy/route.ts b/app-next/src/app/api/es-proxy/route.ts
index 329ffed3..295aa902 100644
--- a/app-next/src/app/api/es-proxy/route.ts
+++ b/app-next/src/app/api/es-proxy/route.ts
@@ -9,8 +9,6 @@ export async function POST(req: NextRequest) {
     const body = await req.json();
     const { indexName, esQuery } = body;
 
-    // console.log("🔍 [ES Proxy] Request for index:", indexName);
-
     if (!indexName || !esQuery) {
       return NextResponse.json(
         { error: "Missing indexName or esQuery" },
@@ -19,18 +17,12 @@ export async function POST(req: NextRequest) {
     }
 
     const url = getElasticsearchUrl(`${indexName}/_search`);
-    // console.log("⏳ [ES Proxy] Sending to:", url);
 
     const response = await axios.post(url, esQuery, {
       headers: { "Content-Type": "application/json" },
       timeout: 30000, // 30 second timeout
     });
 
-    const duration = Date.now() - startTime;
-    // console.log(
-    //   `✅ [ES Proxy] Success in ${duration}ms - ${response.data.hits?.total?.value || 0} results`,
-    // );
-
     return NextResponse.json(response.data);
   } catch (error: unknown) {
     const duration = Date.now() - startTime;
diff --git a/app-next/src/app/api/search/route.ts b/app-next/src/app/api/search/route.ts
index fab9e4c1..75f9ccfc 100644
--- a/app-next/src/app/api/search/route.ts
+++ b/app-next/src/app/api/search/route.ts
@@ -44,12 +44,24 @@ export async function POST(req: NextRequest) {
       const { indexName, esQuery } = body;
       const url = getElasticsearchUrl(`${indexName}/_search`);
 
-      const response = await axios.post(url, esQuery, {
+      // 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);
+      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();
+
+      return NextResponse.json(data);
     }
 
     // Case 3: Raw multi-search or other requests (fallback)
@@ -61,10 +73,20 @@ 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/app/api/tasks/create/route.ts b/app-next/src/app/api/tasks/create/route.ts
new file mode 100644
index 00000000..4e02f70a
--- /dev/null
+++ b/app-next/src/app/api/tasks/create/route.ts
@@ -0,0 +1,136 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { sendCreationConfirmationEmail } from "@/lib/mail";
+
+const OPENML_API =
+  process.env.OPENML_API_URL ||
+  process.env.NEXT_PUBLIC_OPENML_API_URL ||
+  "https://www.openml.org";
+
+const TASK_TYPE_IDS: Record<string, number> = {
+  classification: 1,
+  regression: 2,
+  learningcurve: 3,
+  clustering: 5,
+  supervised: 1,
+};
+
+function buildTaskXml(fields: {
+  taskTypeId: number;
+  datasetId: number;
+  targetName?: string;
+  estimationProcedure?: string;
+  evaluationMeasure?: string;
+}): string {
+  const esc = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+  // <oml:input> is a simpleType in OpenML's XSD — text only, no child elements
+  return (
+    `<?xml version="1.0" encoding="UTF-8"?>\n` +
+    `<oml:task_inputs xmlns:oml="http://openml.org/openml">\n` +
+    `  <oml:task_type_id>${fields.taskTypeId}</oml:task_type_id>\n` +
+    `  <oml:input name="source_data">${fields.datasetId}</oml:input>\n` +
+    (fields.targetName
+      ? `  <oml:input name="target_feature">${esc(fields.targetName)}</oml:input>\n`
+      : "") +
+    (fields.estimationProcedure
+      ? `  <oml:input name="estimation_procedure">${esc(fields.estimationProcedure)}</oml:input>\n`
+      : "") +
+    (fields.evaluationMeasure
+      ? `  <oml:input name="evaluation_measures">${esc(fields.evaluationMeasure)}</oml:input>\n`
+      : "") +
+    `</oml:task_inputs>`
+  );
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const apiKey = (session as { apikey?: string }).apikey;
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: "No API key found. Please re-sign in." },
+        { status: 401 },
+      );
+    }
+
+    const body = await request.json();
+    const { task_type, dataset_id, target_name, estimation_procedure, evaluation_measure } = body;
+
+    const isClustering = task_type === "clustering";
+    if (!task_type || !dataset_id || (!target_name && !isClustering)) {
+      return NextResponse.json(
+        { error: "task_type and dataset_id are required. target_name is required for non-clustering tasks." },
+        { status: 400 },
+      );
+    }
+
+    const taskTypeId = TASK_TYPE_IDS[task_type] ?? 1;
+    const xml = buildTaskXml({
+      taskTypeId,
+      datasetId: parseInt(dataset_id),
+      estimationProcedure: estimation_procedure || undefined,
+      targetName: target_name,
+      evaluationMeasure: evaluation_measure || undefined,
+    });
+
+    const openmlForm = new FormData();
+    openmlForm.append("api_key", apiKey);
+    openmlForm.append(
+      "description",
+      new Blob([xml], { type: "text/xml" }),
+      "description.xml",
+    );
+
+    const response = await fetch(`${OPENML_API}/api/v1/task`, {
+      method: "POST",
+      body: openmlForm,
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      console.error("OpenML task create error:", text);
+      let message = "Failed to create task. Please try again.";
+      if (response.status === 401 || response.status === 403) {
+        message = "Your API key was rejected.";
+      } else {
+        // Parse OpenML XML error: <oml:message> and <oml:additional_information>
+        const msgMatch = text.match(/<oml:message>([^<]+)<\/oml:message>/);
+        const infoMatch = text.match(/<oml:additional_information>([^<]+)<\/oml:additional_information>/);
+        if (msgMatch) message = msgMatch[1].trim();
+        if (infoMatch) message += ` — ${infoMatch[1].trim()}`;
+      }
+      return NextResponse.json({ error: message }, { status: response.status });
+    }
+
+    const text = await response.text();
+    const idMatch = text.match(/<oml:id>(\d+)<\/oml:id>/);
+    const taskId: string = idMatch ? idMatch[1] : "new";
+    const taskName = `Task for dataset ${dataset_id} (${task_type})`;
+
+    if (session.user.email) {
+      sendCreationConfirmationEmail(
+        session.user.email,
+        "task",
+        taskName,
+        taskId,
+      ).catch((err: unknown) =>
+        console.error("Failed to send task creation email:", err),
+      );
+    }
+
+    return NextResponse.json({ success: true, id: taskId });
+  } catch (error) {
+    console.error("Task create error:", error);
+    return NextResponse.json(
+      { error: "Failed to create task." },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app-next/src/app/api/user/[id]/datasets/route.ts b/app-next/src/app/api/user/[id]/datasets/route.ts
index bb1b6045..3cedc977 100644
--- a/app-next/src/app/api/user/[id]/datasets/route.ts
+++ b/app-next/src/app/api/user/[id]/datasets/route.ts
@@ -17,10 +17,15 @@ export async function GET(
     const { searchParams } = new URL(req.url);
     const page = parseInt(searchParams.get("page") || "1");
     const size = parseInt(searchParams.get("size") || "10");
+    const sort = searchParams.get("sort") || "date_desc";
 
-    // console.log(
-    //   `🔍 [User Datasets API] Fetching datasets for user ${id}, page ${page}`,
-    // );
+    const sortMap: Record<string, object[]> = {
+      date_desc: [{ date: { order: "desc" } }],
+      runs_desc: [{ runs: { order: "desc" } }],
+      likes_desc: [{ nr_of_likes: { order: "desc" } }],
+      downloads_desc: [{ nr_of_downloads: { order: "desc" } }],
+      name_asc: [{ "name.keyword": { order: "asc" } }],
+    };
 
     // Query ElasticSearch for datasets by uploader_id
     const esQuery = {
@@ -29,7 +34,7 @@ export async function GET(
           uploader_id: id,
         },
       },
-      sort: [{ date: { order: "desc" } }],
+      sort: sortMap[sort] ?? sortMap["date_desc"],
       from: (page - 1) * size,
       size: size,
     };
@@ -41,12 +46,11 @@ export async function GET(
     });
 
     const hits = (response.data.hits?.hits || []) as ElasticsearchHit[];
-    const total = response.data.hits?.total?.value || 0;
+    const totalHits = response.data.hits?.total;
+    const total =
+      typeof totalHits === "object" ? totalHits.value : totalHits || 0;
 
     const datasets = hits.map((hit) => hit._source);
-    // console.log(
-    //   `✅ [User Datasets API] Found ${datasets.length} datasets (${total} total)`,
-    // );
 
     return NextResponse.json({
       datasets,
diff --git a/app-next/src/app/api/user/[id]/flows/route.ts b/app-next/src/app/api/user/[id]/flows/route.ts
index 404a82ad..0464ab59 100644
--- a/app-next/src/app/api/user/[id]/flows/route.ts
+++ b/app-next/src/app/api/user/[id]/flows/route.ts
@@ -17,10 +17,15 @@ export async function GET(
     const { searchParams } = new URL(req.url);
     const page = parseInt(searchParams.get("page") || "1");
     const size = parseInt(searchParams.get("size") || "10");
+    const sort = searchParams.get("sort") || "date_desc";
 
-    // console.log(
-    //   `🔍 [User Flows API] Fetching flows for user ${id}, page ${page}`,
-    // );
+    const sortMap: Record<string, object[]> = {
+      date_desc: [{ date: { order: "desc" } }],
+      runs_desc: [{ runs: { order: "desc" } }],
+      likes_desc: [{ nr_of_likes: { order: "desc" } }],
+      downloads_desc: [{ nr_of_downloads: { order: "desc" } }],
+      name_asc: [{ "name.keyword": { order: "asc" } }],
+    };
 
     // Query ElasticSearch for flows by uploader_id
     const esQuery = {
@@ -29,7 +34,7 @@ export async function GET(
           uploader_id: id,
         },
       },
-      sort: [{ date: { order: "desc" } }],
+      sort: sortMap[sort] ?? sortMap["date_desc"],
       from: (page - 1) * size,
       size: size,
     };
@@ -41,14 +46,12 @@ export async function GET(
     });
 
     const hits = (response.data.hits?.hits || []) as ElasticsearchHit[];
-    const total = response.data.hits?.total?.value || 0;
+    const totalHits = response.data.hits?.total;
+    const total =
+      typeof totalHits === "object" ? totalHits.value : totalHits || 0;
 
     const flows = hits.map((hit) => hit._source);
 
-    // console.log(
-    //   `✅ [User Flows API] Found ${flows.length} flows (${total} total)`,
-    // );
-
     return NextResponse.json({
       flows,
       total,
diff --git a/app-next/src/app/api/user/[id]/route.ts b/app-next/src/app/api/user/[id]/route.ts
index 8cd82476..964f3c7d 100644
--- a/app-next/src/app/api/user/[id]/route.ts
+++ b/app-next/src/app/api/user/[id]/route.ts
@@ -10,7 +10,6 @@ export async function GET(
 ) {
   try {
     const { id } = await params;
-    // console.log("🔍 [User API] Fetching user:", id);
 
     // Query ElasticSearch for user by ID
     const esQuery = {
@@ -31,12 +30,10 @@ export async function GET(
     const hits = response.data.hits?.hits || [];
 
     if (hits.length === 0) {
-      // console.log("❌ [User API] User not found:", id);
       return NextResponse.json({ error: "User not found" }, { status: 404 });
     }
 
     const user = hits[0]._source;
-    // console.log("✅ [User API] User found:", user.username);
 
     return NextResponse.json(user);
   } catch (error) {
diff --git a/app-next/src/app/api/user/[id]/tasks/route.ts b/app-next/src/app/api/user/[id]/tasks/route.ts
index 62e48863..fafe81c6 100644
--- a/app-next/src/app/api/user/[id]/tasks/route.ts
+++ b/app-next/src/app/api/user/[id]/tasks/route.ts
@@ -17,20 +17,13 @@ export async function GET(
     const { searchParams } = new URL(req.url);
     const page = parseInt(searchParams.get("page") || "1");
     const size = parseInt(searchParams.get("size") || "10");
+    const sort = searchParams.get("sort") || "date_desc";
 
-    // Query ElasticSearch for tasks by uploader_id (or creator, usually uploader_id for tasks)
-    // Note: In OpenML ES, tasks usually have `creator` or `uploader` field.
-    // Based on datasets route using `uploader_id`, we will try `creator` first as tasks are often created by system/users.
-    // Actually, let's check what the UserProfile page implementation expects.
-    // It says "tasks_uploaded" stats.
-    // Most reliable field for ownership in OpenML ES is usually `creator`.
-    // However, I will check if `uploader_id` exists on tasks.
-    // I'll stick to `uploader_id` as it was used for datasets, but if it fails I might need to switch.
-    // Let's stick to the pattern `uploader_id` for now as it is standard across OpenML ES types usually.
-
-    // UPDATE: Task index uses `creator` often for the user ID in text, but let's check `uploader_id`.
-    // Actually, looking at previous Task types, we saw `uploader` (string) and `uploader_id` (number? or not present?).
-    // I will try `uploader_id` first.
+    const sortMap: Record<string, object[]> = {
+      date_desc: [{ date: { order: "desc" } }],
+      runs_desc: [{ runs: { order: "desc" } }],
+      name_asc: [{ "name.keyword": { order: "asc" } }],
+    };
 
     const esQuery = {
       query: {
@@ -38,7 +31,7 @@ export async function GET(
           uploader_id: id,
         },
       },
-      sort: [{ date: { order: "desc" } }],
+      sort: sortMap[sort] ?? sortMap["date_desc"],
       from: (page - 1) * size,
       size: size,
     };
@@ -50,7 +43,9 @@ export async function GET(
     });
 
     const hits = (response.data.hits?.hits || []) as ElasticsearchHit[];
-    const total = response.data.hits?.total?.value || 0;
+    const totalHits = response.data.hits?.total;
+    const total =
+      typeof totalHits === "object" ? totalHits.value : totalHits || 0;
 
     const tasks = hits.map((hit) => hit._source);
 
diff --git a/app-next/src/app/api/user/api-key/route.ts b/app-next/src/app/api/user/api-key/route.ts
index b942f8a9..7daa167e 100644
--- a/app-next/src/app/api/user/api-key/route.ts
+++ b/app-next/src/app/api/user/api-key/route.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import { APP_CONFIG } from "@/lib/config";
 
 /**
  * API Route: GET /api/user/api-key
@@ -24,7 +25,7 @@ export async function GET(request: NextRequest) {
     // Use 127.0.0.1 instead of localhost for more reliable resolution
     const localApiUrl = "http://127.0.0.1:8000";
     const prodApiUrl =
-      process.env.NEXT_PUBLIC_OPENML_URL || "https://www.openml.org";
+      APP_CONFIG.openmlApiUrl || "https://www.openml.org";
 
     // Try local first, then production
     const urlsToTry = [localApiUrl, prodApiUrl];
diff --git a/app-next/src/app/api/user/profile/route.ts b/app-next/src/app/api/user/profile/route.ts
index 07aa0720..12faac7a 100644
--- a/app-next/src/app/api/user/profile/route.ts
+++ b/app-next/src/app/api/user/profile/route.ts
@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { execute, queryOne } from "@/lib/db";
+import { sendProfileUpdateEmail } from "@/lib/mail";
 
 interface UserProfile {
   first_name: string;
@@ -87,6 +88,14 @@ export async function POST(request: NextRequest) {
       ],
     );
 
+    // Send notification email
+    const targetEmail = email || session.user.email;
+    const targetName = firstName || session.user.name || "User";
+
+    if (targetEmail) {
+      await sendProfileUpdateEmail(targetEmail, targetName);
+    }
+
     return NextResponse.json({
       success: true,
       message: "Profile updated successfully",
diff --git a/app-next/src/components/auth/profile-settings.tsx b/app-next/src/components/auth/profile-settings.tsx
index 735f0b42..321c859a 100644
--- a/app-next/src/components/auth/profile-settings.tsx
+++ b/app-next/src/components/auth/profile-settings.tsx
@@ -29,6 +29,7 @@ import {
 import { PasskeyRegistration } from "@/components/auth/passkey-registration";
 import { listPasskeys, removePasskey, Passkey } from "@/services/passkey";
 import { useToast } from "@/hooks/use-toast";
+import { APP_CONFIG } from "@/lib/config";
 
 /**
  * Profile Settings Page - Inspired by OpenML's /auth/edit-profile
@@ -175,7 +176,7 @@ export function ProfileSettings() {
       }
 
       const apiUrl =
-        process.env.NEXT_PUBLIC_OPENML_URL || "https://www.openml.org";
+        APP_CONFIG.openmlApiUrl || "https://www.openml.org";
 
       const response = await fetch(`${apiUrl}/api-key/regenerate`, {
         method: "POST",
diff --git a/app-next/src/components/auth/sign-in-form.tsx b/app-next/src/components/auth/sign-in-form.tsx
index 9e156800..cbec3ca9 100644
--- a/app-next/src/components/auth/sign-in-form.tsx
+++ b/app-next/src/components/auth/sign-in-form.tsx
@@ -8,7 +8,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Github, Eye, EyeOff } from "lucide-react";
-import { FcGoogle } from "react-icons/fc";
+import { GoogleIcon } from "@/components/icons/google-icon";
 import { PasskeySignInButton } from "./passkey-signin-button";
 import { FloatingInput } from "@/components/ui/floating-input";
 import { Badge } from "@/components/ui/badge";
@@ -56,7 +56,7 @@ export default function SignInForm() {
         router.push("/dashboard");
         router.refresh();
       }
-    } catch (err) {
+    } catch (_err) {
       setError(t("signIn.error"));
     } finally {
       setIsLoading(false);
@@ -69,7 +69,7 @@ export default function SignInForm() {
 
     try {
       await signIn(provider, { callbackUrl: "/dashboard" });
-    } catch (err) {
+    } catch (_err) {
       setError(t("signIn.oauthError"));
       setIsLoading(false);
     }
@@ -97,7 +97,7 @@ export default function SignInForm() {
             onClick={() => handleOAuthSignIn("google")}
             disabled={isLoading}
           >
-            <FcGoogle className="mr-2 h-5 w-5" />
+            <GoogleIcon className="mr-2 h-5 w-5" />
             <span className="text-sm font-medium">Google</span>
           </Button>
 
diff --git a/app-next/src/components/auth/sign-up-form.tsx b/app-next/src/components/auth/sign-up-form.tsx
index a97dbcca..447227a2 100644
--- a/app-next/src/components/auth/sign-up-form.tsx
+++ b/app-next/src/components/auth/sign-up-form.tsx
@@ -8,7 +8,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Github, Eye, EyeOff, Fingerprint } from "lucide-react";
-import { FcGoogle } from "react-icons/fc";
+import { GoogleIcon } from "@/components/icons/google-icon";
 import { startRegistration } from "@simplewebauthn/browser";
 import { FloatingInput } from "@/components/ui/floating-input";
 import { Badge } from "@/components/ui/badge";
@@ -41,8 +41,8 @@ export default function SignUpForm() {
       } else {
         setEmailError("");
       }
-    } catch (err) {
-      console.error("Error checking email:", err);
+    } catch (_err) {
+      console.error("Error checking email:", _err);
     }
   };
 
@@ -100,7 +100,7 @@ export default function SignUpForm() {
       } else {
         setError(data.message || t("signUp.registrationFailed"));
       }
-    } catch (err) {
+    } catch (_err) {
       setError(t("signUp.registrationError"));
     } finally {
       setIsLoading(false);
@@ -113,7 +113,7 @@ export default function SignUpForm() {
 
     try {
       await signIn(provider, { callbackUrl: "/dashboard" });
-    } catch (err) {
+    } catch (_err) {
       setError(t("signUp.oauthError"));
       setIsLoading(false);
     }
@@ -186,9 +186,9 @@ export default function SignUpForm() {
       } else {
         router.push("/auth/sign-in?success=account_created");
       }
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error("Passkey Sign-up error:", err);
-      setError(err.message || t("signUp.passkeyError"));
+      setError(err instanceof Error ? err.message : t("signUp.passkeyError"));
     } finally {
       setIsLoading(false);
     }
@@ -224,7 +224,7 @@ export default function SignUpForm() {
             onClick={() => handleOAuthSignIn("google")}
             disabled={isLoading}
           >
-            <FcGoogle className="mr-2 h-5 w-5" />
+            <GoogleIcon className="mr-2 h-5 w-5" />
             <span className="text-sm font-medium">Google</span>
           </Button>
 
diff --git a/app-next/src/components/collection/collection-create-form.tsx b/app-next/src/components/collection/collection-create-form.tsx
new file mode 100644
index 00000000..bb221dbe
--- /dev/null
+++ b/app-next/src/components/collection/collection-create-form.tsx
@@ -0,0 +1,293 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Loader2, PlusCircle, AlertCircle, X, ListTodo, FlaskConical, CheckCircle2 } from "lucide-react";
+
+type CollectionType = "tasks" | "runs";
+
+export function CollectionCreateForm() {
+  const { data: session } = useSession();
+  const router = useRouter();
+
+  const [collectionType, setCollectionType] = useState<CollectionType>("tasks");
+  const [collectionName, setCollectionName] = useState("");
+  const [description, setDescription] = useState("");
+  const [ids, setIds] = useState<number[]>([]);
+  const [idInput, setIdInput] = useState("");
+  const [idInputError, setIdInputError] = useState<string | null>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingStep, setLoadingStep] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const errorRef = useRef<HTMLDivElement>(null);
+
+  const LOADING_STEPS = [
+    "Submitting to OpenML...",
+    "Processing your collection...",
+    "Almost done...",
+  ];
+
+  const addId = () => {
+    const trimmed = idInput.trim().replace(/,$/, "");
+    if (!trimmed) return;
+    const num = parseInt(trimmed, 10);
+    if (isNaN(num) || num <= 0) {
+      setIdInputError("Please enter a valid positive integer ID.");
+      return;
+    }
+    if (!ids.includes(num)) {
+      setIds((prev) => [...prev, num]);
+    }
+    setIdInput("");
+    setIdInputError(null);
+  };
+
+  const removeId = (id: number) => setIds((prev) => prev.filter((n) => n !== id));
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addId();
+    }
+  };
+
+  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!collectionName) {
+      setError("Collection name is required.");
+      return;
+    }
+    if (ids.length === 0) {
+      setError(`Please add at least one ${collectionType === "tasks" ? "task" : "run"} ID.`);
+      return;
+    }
+    if (!session) {
+      setError("You must be signed in to create a collection.");
+      return;
+    }
+
+    setIsLoading(true);
+    setLoadingStep(0);
+    setError(null);
+
+    const stepInterval = setInterval(() => {
+      setLoadingStep((prev) => Math.min(prev + 1, LOADING_STEPS.length - 1));
+    }, 3000);
+
+    try {
+      const response = await fetch("/api/collections/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          collectionname: collectionName,
+          description: description || undefined,
+          collectiontype: collectionType,
+          taskids: collectionType === "tasks" ? ids.join(",") : undefined,
+          runids: collectionType === "runs" ? ids.join(",") : undefined,
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        clearInterval(stepInterval);
+        setError(data.error || "Failed to create collection. Please try again.");
+        setTimeout(() => errorRef.current?.scrollIntoView({ behavior: "smooth", block: "center" }), 50);
+        return;
+      }
+
+      clearInterval(stepInterval);
+      router.push(`/collections/${data.id}`);
+      router.refresh();
+    } catch {
+      clearInterval(stepInterval);
+      setError("Failed to create collection. Please try again.");
+      setTimeout(() => errorRef.current?.scrollIntoView({ behavior: "smooth", block: "center" }), 50);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const typeLabel = collectionType === "tasks" ? "task" : "run";
+
+  return (
+    <Card className="mx-auto w-full max-w-2xl shadow-lg relative">
+      {isLoading && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 rounded-lg bg-background/80 backdrop-blur-sm">
+          <Loader2 className="text-primary h-10 w-10 animate-spin" />
+          <div className="text-center">
+            <p className="text-sm font-medium">{LOADING_STEPS[loadingStep]}</p>
+            <p className="text-muted-foreground mt-1 text-xs">This may take a few seconds.</p>
+          </div>
+        </div>
+      )}
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-2xl font-bold">
+          <PlusCircle className="text-primary h-6 w-6" />
+          Create Collection
+        </CardTitle>
+        <CardDescription>
+          Create a new benchmark suite or study by grouping tasks or runs.
+        </CardDescription>
+      </CardHeader>
+
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-6">
+          {error && (
+            <Alert ref={errorRef} variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Step 1: Collection Type */}
+          <div className="space-y-2">
+            <Label>Collection Type</Label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => { setCollectionType("tasks"); setIds([]); }}
+                className={`flex items-start gap-3 rounded-lg border p-4 text-left transition-colors ${
+                  collectionType === "tasks"
+                    ? "border-primary bg-primary/5"
+                    : "border-border hover:border-primary/50"
+                }`}
+              >
+                <ListTodo className={`mt-0.5 h-5 w-5 shrink-0 ${collectionType === "tasks" ? "text-primary" : "text-muted-foreground"}`} />
+                <div>
+                  <p className="font-medium text-sm">Benchmark Suite</p>
+                  <p className="text-muted-foreground text-xs mt-0.5">Group tasks for comparison</p>
+                </div>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => { setCollectionType("runs"); setIds([]); }}
+                className={`flex items-start gap-3 rounded-lg border p-4 text-left transition-colors ${
+                  collectionType === "runs"
+                    ? "border-primary bg-primary/5"
+                    : "border-border hover:border-primary/50"
+                }`}
+              >
+                <FlaskConical className={`mt-0.5 h-5 w-5 shrink-0 ${collectionType === "runs" ? "text-primary" : "text-muted-foreground"}`} />
+                <div>
+                  <p className="font-medium text-sm">Study</p>
+                  <p className="text-muted-foreground text-xs mt-0.5">Group runs for analysis</p>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          {/* Step 2: Name + Description */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="collectionName">Collection Name *</Label>
+              <Input
+                id="collectionName"
+                placeholder="My Benchmark Suite"
+                value={collectionName}
+                onChange={(e) => setCollectionName(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                placeholder="Describe the purpose of this collection..."
+                className="min-h-[80px]"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {/* Step 3: Add IDs */}
+          <div className="space-y-3">
+            <Label>
+              {collectionType === "tasks" ? "Tasks" : "Runs"} *
+              {ids.length > 0 && (
+                <span className="text-muted-foreground ml-2 font-normal text-xs">
+                  {ids.length} selected
+                </span>
+              )}
+            </Label>
+
+            {/* Selected ID badges */}
+            {ids.length > 0 && (
+              <div className="flex flex-wrap gap-1.5">
+                {ids.map((id) => (
+                  <Badge key={id} variant="secondary" className="gap-1 pr-1">
+                    #{id}
+                    <button
+                      type="button"
+                      onClick={() => removeId(id)}
+                      className="hover:text-destructive ml-0.5 rounded transition-colors"
+                      aria-label={`Remove ${typeLabel} ${id}`}
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {/* ID input */}
+            <div className="flex gap-2">
+              <Input
+                placeholder={`Enter ${typeLabel} ID...`}
+                value={idInput}
+                onChange={(e) => { setIdInput(e.target.value); setIdInputError(null); }}
+                onKeyDown={handleKeyDown}
+                className={idInputError ? "border-destructive" : ""}
+                type="number"
+                min={1}
+              />
+              <Button type="button" variant="outline" onClick={addId} className="gap-1 shrink-0">
+                <X className="h-4 w-4 rotate-45" />
+                Add
+              </Button>
+            </div>
+            {idInputError ? (
+              <p className="text-destructive text-xs">{idInputError}</p>
+            ) : (
+              <p className="text-muted-foreground text-xs">
+                Press <kbd className="bg-muted rounded px-1 py-0.5 text-xs">Enter</kbd> or{" "}
+                <kbd className="bg-muted rounded px-1 py-0.5 text-xs">,</kbd> to add each ID.
+              </p>
+            )}
+          </div>
+        </CardContent>
+
+        <CardFooter className="bg-muted/20 flex justify-between border-t pt-6">
+          <Button variant="outline" type="button" onClick={() => router.back()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isLoading || ids.length === 0 || !collectionName}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              <>
+                <CheckCircle2 className="mr-2 h-4 w-4" />
+                Create Collection
+              </>
+            )}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
diff --git a/app-next/src/components/dashboard/user-dashboard.tsx b/app-next/src/components/dashboard/user-dashboard.tsx
index 4229ccf4..50a9084c 100644
--- a/app-next/src/components/dashboard/user-dashboard.tsx
+++ b/app-next/src/components/dashboard/user-dashboard.tsx
@@ -6,10 +6,6 @@ import { useRouter } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import {
-  Database,
-  Trophy,
-  Cog,
-  FlaskConical,
   Calendar,
   X,
   MessageSquare,
@@ -24,6 +20,8 @@ import {
   Loader2,
 } from "lucide-react";
 import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ENTITY_ICONS, entityColors } from "@/constants";import { faFlag } from "@fortawesome/free-solid-svg-icons";
 
 interface UserStats {
   // Contribution counts
@@ -78,6 +76,7 @@ export function UserDashboard() {
     id?: string;
   } | null>(null);
   const [showFocusCards, setShowFocusCards] = useState(true);
+  const [showStats, setShowStats] = useState(true);
   const [isLoadingStats, setIsLoadingStats] = useState(true);
   const [stats, setStats] = useState<UserStats>({
     // Contribution counts - start at 0
@@ -157,7 +156,7 @@ export function UserDashboard() {
     // Load user from NextAuth session or localStorage fallback
     if (status === "authenticated" && session?.user) {
       const userId = session.user.id;
-      const isLocalUser = (session.user as any).isLocalUser;
+      const isLocalUser = (session.user as { isLocalUser?: boolean }).isLocalUser;
 
       setUser({
         name: session.user.name || session.user.username || "User",
@@ -210,7 +209,11 @@ export function UserDashboard() {
       id: "datasets",
       title: "Datasets",
       description: "Explore and share datasets",
-      icon: <Database className="h-8 w-8" />,
+      icon: (
+        <div style={{ color: entityColors.data }}>
+          <FontAwesomeIcon icon={ENTITY_ICONS.dataset} className="h-8 w-8" />
+        </div>
+      ),
       color: "from-blue-400 via-blue-500 to-green-500",
       href: "/datasets",
     },
@@ -218,7 +221,11 @@ export function UserDashboard() {
       id: "tasks",
       title: "Tasks",
       description: "Define ML problems and benchmarks",
-      icon: <Trophy className="h-8 w-8" />,
+      icon: (
+        <div style={{ color: entityColors.task }}>
+          <FontAwesomeIcon icon={ENTITY_ICONS.task} className="h-8 w-8" />
+        </div>
+      ),
       color: "from-yellow-400 via-yellow-500 to-green-500",
       href: "/tasks",
     },
@@ -226,7 +233,11 @@ export function UserDashboard() {
       id: "flows",
       title: "Flows",
       description: "Share ML workflows and models",
-      icon: <FlaskConical className="h-8 w-8" />,
+      icon: (
+        <div style={{ color: entityColors.flow }}>
+          <FontAwesomeIcon icon={ENTITY_ICONS.flow} className="h-8 w-8" />
+        </div>
+      ),
       color: "from-yellow-400 via-green-500 to-blue-500",
       href: "/flows",
     },
@@ -272,7 +283,7 @@ export function UserDashboard() {
         </div>
 
         {/* Stats Cards Row - Reputation & Activity */}
-        <div className="mb-8 grid gap-6 md:grid-cols-3">
+        {showStats && <div className="mb-8 grid gap-6 md:grid-cols-3">
           {/* Reputation Score */}
           <Card className="border-2 border-amber-200 bg-white dark:border-amber-800 dark:bg-slate-800">
             <CardHeader className="pb-3">
@@ -385,121 +396,144 @@ export function UserDashboard() {
               </p>
             </CardContent>
           </Card>
-        </div>
+        </div>}
 
         {/* Impact & Contribution Stats */}
-        <div className="mb-8 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        {showStats && <div className="mb-8 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
           {/* Datasets with Impact */}
-          <Card className="bg-white dark:bg-slate-800">
-            <CardHeader className="pb-3">
-              <div className="flex items-center gap-2">
-                <Database className="h-5 w-5 text-green-600 dark:text-green-400" />
-                <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
-                  Datasets
-                </CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="text-3xl font-bold text-slate-900 dark:text-white">
-                {isLoadingStats ? "..." : stats.datasetsCreated}
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                created
-              </p>
-              <div className="mt-3 flex items-center gap-3 text-xs">
-                <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
-                  <Download className="h-3 w-3" />
-                  <span>
-                    {isLoadingStats
-                      ? "-"
-                      : stats.totalDownloads.toLocaleString()}
-                  </span>
+          <Link href={user.id ? `/users/${user.id}` : "#"}>
+            <Card className="bg-white transition-shadow hover:shadow-md dark:bg-slate-800">
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-2">
+                  <div style={{ color: entityColors.data }}>
+                    <FontAwesomeIcon
+                      icon={ENTITY_ICONS.dataset}
+                      className="h-5 w-5"
+                    />
+                  </div>
+                  <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
+                    Datasets
+                  </CardTitle>
                 </div>
-                <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
-                  <Eye className="h-3 w-3" />
-                  <span>
-                    {isLoadingStats ? "-" : stats.totalViews.toLocaleString()}
-                  </span>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold text-slate-900 dark:text-white">
+                  {isLoadingStats ? "..." : stats.datasetsCreated}
                 </div>
-              </div>
-            </CardContent>
-          </Card>
+                <p style={{ color: entityColors.data }} className="text-sm">
+                  created
+                </p>
+                <div className="mt-3 flex items-center gap-3 text-xs">
+                  <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
+                    <Download className="h-3 w-3" />
+                    <span>
+                      {isLoadingStats
+                        ? "-"
+                        : stats.totalDownloads.toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
+                    <Eye className="h-3 w-3" />
+                    <span>
+                      {isLoadingStats ? "-" : stats.totalViews.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
 
           {/* Flows with Reuse */}
-          <Card className="bg-white dark:bg-slate-800">
-            <CardHeader className="pb-3">
-              <div className="flex items-center gap-2">
-                <FlaskConical className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-                <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
-                  Flows
-                </CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="text-3xl font-bold text-slate-900 dark:text-white">
-                {isLoadingStats ? "..." : stats.flowsCreated}
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                created
-              </p>
-              <div className="mt-3 flex items-center gap-1 text-xs text-slate-600 dark:text-slate-400">
-                <Users className="h-3 w-3" />
-                <span>
-                  {isLoadingStats ? "-" : stats.flowReuses} reuses by others
-                </span>
-              </div>
-            </CardContent>
-          </Card>
+          <Link href={user.id ? `/users/${user.id}` : "#"}>
+            <Card className="bg-white transition-shadow hover:shadow-md dark:bg-slate-800">
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-2">
+                  <div style={{ color: entityColors.flow }}>
+                    <FontAwesomeIcon
+                      icon={ENTITY_ICONS.flow}
+                      className="h-5 w-5"
+                    />
+                  </div>
+                  <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
+                    Flows
+                  </CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold text-slate-900 dark:text-white">
+                  {isLoadingStats ? "..." : stats.flowsCreated}
+                </div>
+                <p style={{ color: entityColors.flow }} className="text-sm">
+                  created
+                </p>
+                <div className="mt-3 flex items-center gap-1 text-xs text-slate-600 dark:text-slate-400">
+                  <Users className="h-3 w-3" />
+                  <span>
+                    {isLoadingStats ? "-" : stats.flowReuses} reuses by others
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
 
           {/* Runs */}
-          <Card className="bg-white dark:bg-slate-800">
-            <CardHeader className="pb-3">
-              <div className="flex items-center gap-2">
-                <Cog className="h-5 w-5 text-purple-600 dark:text-purple-400" />
-                <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
-                  Runs
-                </CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="text-3xl font-bold text-slate-900 dark:text-white">
-                {isLoadingStats ? "..." : stats.runsCreated}
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                experiments
-              </p>
-            </CardContent>
-          </Card>
+          <Link href={user.id ? `/users/${user.id}` : "#"}>
+            <Card className="bg-white transition-shadow hover:shadow-md dark:bg-slate-800">
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-2">
+                  <div style={{ color: entityColors.run }}>
+                    <FontAwesomeIcon
+                      icon={ENTITY_ICONS.run}
+                      className="h-5 w-5"
+                    />
+                  </div>
+                  <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
+                    Runs
+                  </CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold text-slate-900 dark:text-white">
+                  {isLoadingStats ? "..." : stats.runsCreated}
+                </div>
+                <p style={{ color: entityColors.run }} className="text-sm">
+                  experiments
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
 
           {/* Citations */}
-          <Card className="bg-white dark:bg-slate-800">
-            <CardHeader className="pb-3">
-              <div className="flex items-center gap-2">
-                <FileText className="h-5 w-5 text-amber-600 dark:text-amber-400" />
-                <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
-                  Citations
-                </CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="text-3xl font-bold text-slate-900 dark:text-white">
-                {isLoadingStats ? "..." : stats.totalCitations}
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                in publications
-              </p>
-              <div className="mt-3 flex items-center gap-1 text-xs text-slate-600 dark:text-slate-400">
-                <MessageSquare className="h-3 w-3" />
-                <span>
-                  {isLoadingStats ? "-" : stats.discussionsPosted} discussions
-                </span>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
+          <Link href={user.id ? `/users/${user.id}` : "#"}>
+            <Card className="bg-white transition-shadow hover:shadow-md dark:bg-slate-800">
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-2">
+                  <FileText className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+                  <CardTitle className="text-base font-semibold text-slate-900 dark:text-white">
+                    Citations
+                  </CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold text-slate-900 dark:text-white">
+                  {isLoadingStats ? "..." : stats.totalCitations}
+                </div>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  in publications
+                </p>
+                <div className="mt-3 flex items-center gap-1 text-xs text-slate-600 dark:text-slate-400">
+                  <MessageSquare className="h-3 w-3" />
+                  <span>
+                    {isLoadingStats ? "-" : stats.discussionsPosted} discussions
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>}
 
         {/* Top Contributions */}
-        {!isLoadingStats && (stats.topDataset || stats.topFlow) && (
+        {showStats && !isLoadingStats && (stats.topDataset || stats.topFlow) && (
           <div className="mb-8">
             <h2 className="mb-4 text-2xl font-bold text-slate-900 dark:text-white">
               Your Top Contributions
@@ -511,7 +545,12 @@ export function UserDashboard() {
                     <div className="flex items-start justify-between">
                       <div className="flex items-center gap-3">
                         <div className="flex size-12 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900/30">
-                          <Database className="h-6 w-6 text-green-600 dark:text-green-400" />
+                          <div style={{ color: entityColors.data }}>
+                            <FontAwesomeIcon
+                              icon={ENTITY_ICONS.dataset}
+                              className="h-6 w-6"
+                            />
+                          </div>
                         </div>
                         <div>
                           <CardTitle className="text-lg text-slate-900 dark:text-white">
@@ -522,7 +561,12 @@ export function UserDashboard() {
                           </p>
                         </div>
                       </div>
-                      <Trophy className="h-6 w-6 text-amber-500" />
+                      <div className="h-6 w-6 text-amber-500">
+                        <FontAwesomeIcon
+                          icon={faFlag}
+                          className="h-full w-full"
+                        />
+                      </div>
                     </div>
                   </CardHeader>
                   <CardContent>
@@ -545,7 +589,12 @@ export function UserDashboard() {
                     <div className="flex items-start justify-between">
                       <div className="flex items-center gap-3">
                         <div className="flex size-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
-                          <FlaskConical className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                          <div style={{ color: entityColors.flow }}>
+                            <FontAwesomeIcon
+                              icon={ENTITY_ICONS.flow}
+                              className="h-6 w-6"
+                            />
+                          </div>
                         </div>
                         <div>
                           <CardTitle className="text-lg text-slate-900 dark:text-white">
@@ -625,10 +674,15 @@ export function UserDashboard() {
           </div>
         )}
 
-        {/* Hide Stats Link */}
+        {/* Toggle Stats */}
         <div className="text-right">
-          <Button variant="ghost" size="sm" className="text-sm">
-            Hide stats
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-sm"
+            onClick={() => setShowStats((v) => !v)}
+          >
+            {showStats ? "Hide stats" : "Show stats"}
           </Button>
         </div>
       </div>
diff --git a/app-next/src/components/dataset/dataset-edit-form.tsx b/app-next/src/components/dataset/dataset-edit-form.tsx
index 4a4270e5..9c57ffef 100644
--- a/app-next/src/components/dataset/dataset-edit-form.tsx
+++ b/app-next/src/components/dataset/dataset-edit-form.tsx
@@ -2,18 +2,24 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useLocale } from "next-intl";
 import Link from "next/link";
-import { ArrowLeft, Save, Loader2, AlertTriangle } from "lucide-react";
+import { ArrowLeft, Save, Loader2, AlertTriangle, X, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
 
 interface DatasetEditFormProps {
   datasetId: number;
   datasetName: string;
   isOwner: boolean;
+  hasApiKey: boolean;
+  isLocalUser: boolean;
+  initialTags: string[];
   initialValues: {
     description: string;
     creator: string;
@@ -33,38 +39,53 @@ export function DatasetEditForm({
   datasetId,
   datasetName,
   isOwner,
+  hasApiKey,
+  isLocalUser,
+  initialTags,
   initialValues,
   features,
 }: DatasetEditFormProps) {
   const router = useRouter();
+  const locale = useLocale();
+  const { toast } = useToast();
   const [values, setValues] = useState(initialValues);
+  const [tags, setTags] = useState<string[]>(initialTags);
+  const [tagInput, setTagInput] = useState("");
+  const [tagInputError, setTagInputError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
+
+  const TAG_PATTERN = /^[a-zA-Z0-9_.-]+$/;
 
   const handleChange = (
     field: keyof typeof values,
     value: string,
   ) => {
     setValues((prev) => ({ ...prev, [field]: value }));
-    setError(null);
-    setSuccess(false);
+  };
+
+  const addTag = () => {
+    const trimmed = tagInput.trim();
+    if (!trimmed) return;
+    if (!TAG_PATTERN.test(trimmed)) {
+      setTagInputError("Only letters, numbers, underscores, hyphens, and dots are allowed.");
+      return;
+    }
+    if (!tags.includes(trimmed)) {
+      setTags((prev) => [...prev, trimmed]);
+    }
+    setTagInput("");
+    setTagInputError(null);
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSaving(true);
-    setError(null);
-    setSuccess(false);
 
     try {
       const res = await fetch(`/api/datasets/${datasetId}/edit`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          ...values,
-          isOwner,
-        }),
+        body: JSON.stringify({ ...values, isOwner }),
       });
 
       if (!res.ok) {
@@ -72,14 +93,42 @@ export function DatasetEditForm({
         throw new Error(data.error || `Failed to save (${res.status})`);
       }
 
-      setSuccess(true);
-      // Redirect back to dataset page after short delay
+      // Apply tag changes — diff against initialTags
+      const toAdd = tags.filter((t) => !initialTags.includes(t));
+      const toRemove = initialTags.filter((t) => !tags.includes(t));
+
+      await Promise.all([
+        ...toAdd.map((tag) =>
+          fetch(`/api/datasets/${datasetId}/tags`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ tag }),
+          }),
+        ),
+        ...toRemove.map((tag) =>
+          fetch(`/api/datasets/${datasetId}/tags`, {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ tag }),
+          }),
+        ),
+      ]);
+
+      toast({
+        title: "Changes saved",
+        description: "Redirecting back to dataset...",
+      });
+
       setTimeout(() => {
-        router.push(`/datasets/${datasetId}`);
+        router.push(`/${locale}/datasets/${datasetId}`);
         router.refresh();
       }, 1500);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to save changes");
+      toast({
+        title: "Failed to save",
+        description: err instanceof Error ? err.message : "Failed to save changes",
+        variant: "destructive",
+      });
     } finally {
       setSaving(false);
     }
@@ -90,7 +139,7 @@ export function DatasetEditForm({
       {/* Header */}
       <div className="mb-8">
         <Link
-          href={`/datasets/${datasetId}`}
+          href={`/${locale}/datasets/${datasetId}`}
           className="text-muted-foreground hover:text-foreground mb-4 inline-flex items-center gap-1.5 text-sm transition-colors"
         >
           <ArrowLeft className="h-4 w-4" />
@@ -103,16 +152,18 @@ export function DatasetEditForm({
         </p>
       </div>
 
-      {/* Status messages */}
-      {error && (
-        <div className="mb-6 flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400">
-          <AlertTriangle className="h-4 w-4 shrink-0" />
-          {error}
-        </div>
-      )}
-      {success && (
-        <div className="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700 dark:border-green-900/50 dark:bg-green-950/30 dark:text-green-400">
-          Changes saved successfully! Redirecting...
+      {/* Warning: user has no valid OpenML API key (e.g. local dev account) */}
+      {(!hasApiKey || isLocalUser) && (
+        <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-amber-800 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-300">
+          <AlertTriangle className="mt-0.5 size-5 shrink-0" />
+          <div className="space-y-1">
+            <p className="text-sm font-medium">Saving is unavailable in this environment</p>
+            <p className="text-xs">
+              {isLocalUser
+                ? "This account was created locally and does not have a valid OpenML API key. Dataset edits cannot be saved to the OpenML backend in a local development environment."
+                : "Your session does not include an OpenML API key. Saving changes requires signing in with a valid OpenML account."}
+            </p>
+          </div>
         </div>
       )}
 
@@ -282,14 +333,69 @@ export function DatasetEditForm({
         </Card>
       )}
 
+      {/* Tags */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Tags</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="gap-1 pr-1">
+                {tag}
+                <button
+                  type="button"
+                  onClick={() => setTags((prev) => prev.filter((t) => t !== tag))}
+                  className="hover:text-destructive ml-0.5 rounded transition-colors"
+                  aria-label={`Remove tag ${tag}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            ))}
+            {tags.length === 0 && (
+              <p className="text-muted-foreground text-sm">No tags yet.</p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Input
+              placeholder="Add a tag..."
+              value={tagInput}
+              onChange={(e) => {
+                setTagInput(e.target.value);
+                setTagInputError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  addTag();
+                }
+              }}
+              className={tagInputError ? "border-destructive" : ""}
+            />
+            <Button type="button" variant="outline" onClick={addTag} className="gap-1 shrink-0">
+              <Plus className="h-4 w-4" />
+              Add
+            </Button>
+          </div>
+          {tagInputError ? (
+            <p className="text-destructive text-xs">{tagInputError}</p>
+          ) : (
+            <p className="text-muted-foreground text-xs">
+              Tags are applied when you save. Only letters, numbers, <code>_</code> <code>-</code> <code>.</code> allowed.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
       {/* Actions */}
       <div className="flex items-center justify-between">
-        <Link href={`/datasets/${datasetId}`}>
+        <Link href={`/${locale}/datasets/${datasetId}`}>
           <Button type="button" variant="outline">
             Cancel
           </Button>
         </Link>
-        <Button type="submit" disabled={saving} className="gap-2">
+        <Button type="submit" disabled={saving || !hasApiKey || isLocalUser} className="gap-2" title={(!hasApiKey || isLocalUser) ? "Saving is not available in this environment" : undefined}>
           {saving ? (
             <>
               <Loader2 className="h-4 w-4 animate-spin" />
diff --git a/app-next/src/components/dataset/dataset-upload-form.tsx b/app-next/src/components/dataset/dataset-upload-form.tsx
new file mode 100644
index 00000000..8ab5b65e
--- /dev/null
+++ b/app-next/src/components/dataset/dataset-upload-form.tsx
@@ -0,0 +1,526 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { format as formatDate } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Loader2, UploadCloud, FileText, AlertCircle } from "lucide-react";
+
+const MAX_FILE_SIZE_MB = 100;
+const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+const ALLOWED_EXTENSIONS = [
+  ".arff",
+  ".xrff",
+  ".csv",
+  ".json",
+  ".parquet",
+  ".feather",
+];
+
+export function DatasetUploadForm() {
+  const { data: _session } = useSession();
+  const router = useRouter();
+
+  const [file, setFile] = useState<File | null>(null);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  // Additional Metadata
+  const [creator, setCreator] = useState("");
+  const [contributor, setContributor] = useState("");
+  const [collectionDate, setCollectionDate] = useState<Date | undefined>();
+  const [language, setLanguage] = useState("");
+  const [licence, setLicence] = useState("Publicly available");
+  const [defaultTargetAttribute, setDefaultTargetAttribute] = useState("");
+  const [ignoreAttribute, setIgnoreAttribute] = useState("");
+  const [citation, setCitation] = useState("");
+  const [tags, setTags] = useState("");
+  const [tagsError, setTagsError] = useState<string | null>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const errorRef = useRef<HTMLDivElement>(null);
+
+  const TAG_PATTERN = /^[a-zA-Z0-9_.-]+$/;
+
+  const validateTags = (value: string): string | null => {
+    if (!value.trim()) return null;
+    const invalid = value
+      .split(",")
+      .map((t) => t.trim())
+      .filter((t) => t && !TAG_PATTERN.test(t));
+    return invalid.length > 0
+      ? `Invalid tag(s): ${invalid.join(", ")} — only letters, numbers, underscores, hyphens, and dots are allowed.`
+      : null;
+  };
+
+  const validateAndSetFile = (selected: File) => {
+    setFileError(null);
+    const ext = "." + (selected.name.split(".").pop()?.toLowerCase() ?? "");
+    if (!ALLOWED_EXTENSIONS.includes(ext)) {
+      setFileError(
+        `Unsupported file type "${ext}". Please upload an ARFF file (.arff or .xrff).`,
+      );
+      setFile(null);
+      return;
+    }
+    if (selected.size > MAX_FILE_SIZE_BYTES) {
+      setFileError(
+        `File is too large (${(selected.size / 1024 / 1024).toFixed(1)} MB). Maximum file size is ${MAX_FILE_SIZE_MB} MB.`,
+      );
+      setFile(null);
+      return;
+    }
+    setFile(selected);
+    if (!name) {
+      const fileName = selected.name;
+      setName(fileName.substring(0, fileName.lastIndexOf(".")) || fileName);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.[0]) validateAndSetFile(e.target.files[0]);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files?.[0]) validateAndSetFile(e.dataTransfer.files[0]);
+  };
+
+  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!file || !name || !description.trim()) {
+      setError("Please provide a file, a dataset name, and a description.");
+      return;
+    }
+    const tagValidationError = validateTags(tags);
+    if (tagValidationError) {
+      setTagsError(tagValidationError);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("name", name);
+      formData.append("description", description);
+      formData.append("format", "arff");
+      formData.append("creator", creator);
+      formData.append("contributor", contributor);
+      formData.append(
+        "collection_date",
+        collectionDate ? formatDate(collectionDate, "yyyy-MM-dd") : "",
+      );
+      formData.append("language", language);
+      formData.append("licence", licence);
+      formData.append("default_target_attribute", defaultTargetAttribute);
+      formData.append("ignore_attribute", ignoreAttribute);
+      formData.append("citation", citation);
+      formData.append("tags", tags);
+
+      const response = await fetch("/api/datasets/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      const result = await response.json();
+      if (!response.ok) {
+        setError(result.error || "Upload failed. Please try again.");
+        setTimeout(
+          () =>
+            errorRef.current?.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            }),
+          50,
+        );
+        return;
+      }
+
+      const id = result.id && result.id !== "new" ? result.id : null;
+      router.push(id ? `/datasets/${id}` : "/datasets");
+      router.refresh();
+    } catch (err) {
+      setError("Failed to upload dataset. Please try again.");
+      setTimeout(
+        () =>
+          errorRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          }),
+        50,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="mx-auto w-full max-w-2xl shadow-lg">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-2xl font-bold">
+          <UploadCloud className="text-primary h-6 w-6" />
+          Upload Dataset
+        </CardTitle>
+        <CardDescription>
+          Share your data with the OpenML community. Supported formats: ARFF,
+          CSV, JSON, Parquet, Feather.
+        </CardDescription>
+      </CardHeader>
+
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-6 pb-4">
+          {error && (
+            <Alert ref={errorRef} variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* File Upload Zone */}
+          <div className="space-y-2">
+            <Label htmlFor="file-upload">Dataset File *</Label>
+            <div
+              className={cn(
+                "relative cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors",
+                isDragging
+                  ? "border-primary bg-primary/5"
+                  : fileError
+                    ? "border-destructive bg-destructive/5"
+                    : "hover:bg-muted/50",
+              )}
+              onDragOver={(e) => {
+                e.preventDefault();
+                setIsDragging(true);
+              }}
+              onDragEnter={(e) => {
+                e.preventDefault();
+                setIsDragging(true);
+              }}
+              onDragLeave={() => setIsDragging(false)}
+              onDrop={handleDrop}
+            >
+              <input
+                id="file-upload"
+                type="file"
+                className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                onChange={handleFileChange}
+                accept=".arff,.xrff,.csv,.json,.parquet,.feather"
+              />
+              <div className="pointer-events-none flex flex-col items-center justify-center gap-2">
+                {file ? (
+                  <>
+                    <FileText className="text-primary h-10 w-10" />
+                    <span className="text-lg font-medium">{file.name}</span>
+                    <span className="text-muted-foreground text-sm">
+                      {(file.size / 1024 / 1024).toFixed(2)} MB
+                    </span>
+                  </>
+                ) : isDragging ? (
+                  <>
+                    <UploadCloud className="text-primary h-10 w-10" />
+                    <span className="text-primary font-medium">
+                      Drop to upload
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <UploadCloud className="text-muted-foreground h-10 w-10" />
+                    <span className="font-medium">
+                      Click to upload or drag and drop
+                    </span>
+                    <span className="text-muted-foreground text-sm">
+                      ARFF, CSV, JSON, Parquet, Feather · Max {MAX_FILE_SIZE_MB}{" "}
+                      MB
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+            {fileError && (
+              <p className="text-destructive flex items-center gap-1.5 text-sm">
+                <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+                {fileError}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Basic Information</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="name">Dataset Name *</Label>
+                <Input
+                  id="name"
+                  placeholder="My_Awesome_Dataset"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+                {name.includes(" ") && (
+                  <p className="text-muted-foreground text-xs">
+                    Spaces will be saved as underscores:{" "}
+                    <span className="font-medium">
+                      {name.replace(/ /g, "_")}
+                    </span>
+                  </p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label>Format</Label>
+                <div className="border-input bg-muted/50 text-muted-foreground flex h-10 w-full items-center rounded-md border px-3 text-sm">
+                  ARFF, CSV, JSON, Parquet, Feather
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">
+                Description *{" "}
+                <span className="text-muted-foreground font-normal">
+                  (Markdown supported)
+                </span>
+              </Label>
+              <Textarea
+                id="description"
+                placeholder="Describe your dataset, its origin, and any preprocessing..."
+                className="min-h-40"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="tags">Tags</Label>
+              <Input
+                id="tags"
+                placeholder="e.g. study_14, classification, tabular"
+                value={tags}
+                onChange={(e) => {
+                  setTags(e.target.value);
+                  setTagsError(validateTags(e.target.value));
+                }}
+                className={tagsError ? "border-destructive" : ""}
+              />
+              {tagsError ? (
+                <p className="text-destructive flex items-center gap-1.5 text-xs">
+                  <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+                  {tagsError}
+                </p>
+              ) : (
+                <p className="text-muted-foreground -mt-0.5 text-xs">
+                  Comma-separated. Only letters, numbers, <code>_</code>{" "}
+                  <code>-</code> <code>.</code> allowed.
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Metadata</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="creator">Creator</Label>
+                <Input
+                  id="creator"
+                  placeholder="Original creator of the dataset"
+                  value={creator}
+                  onChange={(e) => setCreator(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="contributor">Contributor(s)</Label>
+                <Input
+                  id="contributor"
+                  placeholder="People who contributed to the dataset"
+                  value={contributor}
+                  onChange={(e) => setContributor(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Collection Date</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        "w-full justify-start text-left font-normal",
+                        !collectionDate && "text-muted-foreground",
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {collectionDate
+                        ? formatDate(collectionDate, "PPP")
+                        : "Pick a date"}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={collectionDate}
+                      onSelect={setCollectionDate}
+                      captionLayout="dropdown"
+                      startMonth={new Date(1800, 0)}
+                      endMonth={new Date()}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="language">Language</Label>
+                <Input
+                  id="language"
+                  placeholder="English, French, etc."
+                  value={language}
+                  onChange={(e) => setLanguage(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Licence & Citation</h3>
+            <div className="space-y-2">
+              <Label htmlFor="licence">Licence Type</Label>
+              <Select value={licence} onValueChange={setLicence}>
+                <SelectTrigger id="licence">
+                  <SelectValue placeholder="Select Licence" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Public Domain (CCO)">
+                    Public Domain (CCO)
+                  </SelectItem>
+                  <SelectItem value="Publicly available">
+                    Publicly available
+                  </SelectItem>
+                  <SelectItem value="Attribution (CC BY)">
+                    Attribution (CC BY)
+                  </SelectItem>
+                  <SelectItem value="Attribution-ShareAlike (CC BY-SA)">
+                    Attribution-ShareAlike (CC BY-SA)
+                  </SelectItem>
+                  <SelectItem value="Attribution-NoDerivs (CC BY-ND)">
+                    Attribution-NoDerivs (CC BY-ND)
+                  </SelectItem>
+                  <SelectItem value="Attribution-NonCommercial (CC BY-NC)">
+                    Attribution-NonCommercial (CC BY-NC)
+                  </SelectItem>
+                  <SelectItem value="Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)">
+                    Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)
+                  </SelectItem>
+                  <SelectItem value="Attribution-NonCommercial-NoDerivs (CC BY-NC-ND)">
+                    Attribution-NonCommercial-NoDerivs (CC BY-NC-ND)
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="citation">Citation</Label>
+              <Textarea
+                id="citation"
+                placeholder="How to cite this dataset..."
+                className="min-h-[80px]"
+                value={citation}
+                onChange={(e) => setCitation(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Technical Details</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="defaultTargetAttribute">
+                  Default Target Attribute
+                </Label>
+                <Input
+                  id="defaultTargetAttribute"
+                  placeholder="Class label column name"
+                  value={defaultTargetAttribute}
+                  onChange={(e) => setDefaultTargetAttribute(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="ignoreAttribute">Ignore Attribute</Label>
+                <Input
+                  id="ignoreAttribute"
+                  placeholder="Columns to ignore (comma separated)"
+                  value={ignoreAttribute}
+                  onChange={(e) => setIgnoreAttribute(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+
+        <CardFooter className="bg-muted/20 flex flex-col gap-3 border-t pt-6">
+          {error && (
+            <p className="text-destructive flex w-full items-start gap-1.5 text-sm">
+              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+              {error}
+            </p>
+          )}
+          <div className="flex w-full justify-between">
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() => router.back()}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={isLoading || !file || !name || !description.trim()}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Uploading...
+                </>
+              ) : (
+                "Upload Dataset"
+              )}
+            </Button>
+          </div>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
diff --git a/app-next/src/components/task/task-create-form.tsx b/app-next/src/components/task/task-create-form.tsx
new file mode 100644
index 00000000..9f54d0b4
--- /dev/null
+++ b/app-next/src/components/task/task-create-form.tsx
@@ -0,0 +1,400 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Loader2, PlusCircle, AlertCircle, Clock, Info } from "lucide-react";
+import { APP_CONFIG } from "@/lib/config";
+
+const ESTIMATION_PROCEDURES: Record<string, { id: string; label: string }[]> = {
+  classification: [
+    { id: "1", label: "10-fold Crossvalidation" },
+    { id: "2", label: "5 times 2-fold Crossvalidation" },
+    { id: "3", label: "10 times 10-fold Crossvalidation" },
+    { id: "4", label: "Leave-One-Out" },
+    { id: "16", label: "Holdout (66% train / 34% test)" },
+    { id: "6", label: "10-fold Learning Curve" },
+  ],
+  regression: [
+    { id: "1", label: "10-fold Crossvalidation" },
+    { id: "2", label: "5 times 2-fold Crossvalidation" },
+    { id: "3", label: "10 times 10-fold Crossvalidation" },
+    { id: "16", label: "Holdout (66% train / 34% test)" },
+  ],
+  learningcurve: [
+    { id: "13", label: "10-fold Learning Curve" },
+    { id: "14", label: "10 times 10-fold Learning Curve" },
+  ],
+  supervised: [{ id: "1", label: "10-fold Crossvalidation" }],
+  clustering: [],
+};
+
+const EVALUATION_MEASURES: Record<string, string[]> = {
+  classification: [
+    "predictive_accuracy",
+    "area_under_roc_curve",
+    "f_measure",
+    "kappa",
+    "precision",
+    "recall",
+    "matthews_correlation_coefficient",
+    "mean_absolute_error",
+  ],
+  regression: [
+    "mean_absolute_error",
+    "root_mean_squared_error",
+    "mean_squared_error",
+    "relative_absolute_error",
+    "root_relative_squared_error",
+  ],
+  learningcurve: ["predictive_accuracy", "area_under_roc_curve"],
+  supervised: ["predictive_accuracy"],
+  clustering: [],
+};
+
+export function TaskCreateForm() {
+  const { data: session } = useSession();
+  const router = useRouter();
+
+  const [taskType, setTaskType] = useState("classification");
+  const [datasetId, setDatasetId] = useState("");
+  const [targetName, setTargetName] = useState("");
+  const [evaluationMeasure, setEvaluationMeasure] = useState("");
+  const [estimationProcedure, setEstimationProcedure] = useState("1");
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [existingTaskId, setExistingTaskId] = useState<string | null>(null);
+  const [datasetStatus, setDatasetStatus] = useState<string | null>(null);
+  const [datasetFeatures, setDatasetFeatures] = useState<
+    { name: string; dataType: string }[]
+  >([]);
+  const [isFetchingDataset, setIsFetchingDataset] = useState(false);
+
+  useEffect(() => {
+    if (!datasetId || isNaN(Number(datasetId))) {
+      setDatasetStatus(null);
+      setDatasetFeatures([]);
+      setIsFetchingDataset(false);
+      return;
+    }
+    setIsFetchingDataset(true);
+    const timer = setTimeout(async () => {
+      try {
+        const base = APP_CONFIG.openmlApiUrl || "https://www.openml.org";
+        const [infoRes, featRes] = await Promise.all([
+          fetch(`${base}/api/v1/json/data/${datasetId}`),
+          fetch(`${base}/api/v1/json/data/features/${datasetId}`),
+        ]);
+        if (infoRes.ok) {
+          const json = await infoRes.json();
+          setDatasetStatus(json?.["data_set_description"]?.status ?? null);
+        } else {
+          setDatasetStatus(null);
+        }
+        if (featRes.ok) {
+          const json = await featRes.json();
+          const features: { name: string; dataType: string }[] = (
+            json?.["data_features"]?.["feature"] ?? []
+          )
+            .filter(
+              (f: { is_ignore: string; is_row_identifier: string }) =>
+                f.is_ignore !== "true" && f.is_row_identifier !== "true",
+            )
+            .map((f: { name: string; data_type: string }) => ({
+              name: f.name,
+              dataType: f.data_type,
+            }));
+          setDatasetFeatures(features);
+        } else {
+          setDatasetFeatures([]);
+        }
+      } catch {
+        setDatasetStatus(null);
+        setDatasetFeatures([]);
+      } finally {
+        setIsFetchingDataset(false);
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [datasetId]);
+
+  const validTargetFeatures = useMemo(() => {
+    if (datasetFeatures.length === 0) return [];
+    if (taskType === "regression") {
+      const numeric = datasetFeatures.filter((f) => f.dataType === "numeric");
+      return numeric.length > 0 ? numeric : datasetFeatures;
+    }
+    // classification, learningcurve, supervised: nominal/string features only
+    const nominal = datasetFeatures.filter((f) => f.dataType !== "numeric");
+    return nominal.length > 0 ? nominal : datasetFeatures;
+  }, [datasetFeatures, taskType]);
+
+  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const isClustering = taskType === "clustering";
+    if (!datasetId || !taskType || (!targetName && !isClustering)) {
+      setError("Please fill in all required fields.");
+      return;
+    }
+
+    if (!session) {
+      setError("You must be signed in to create a task.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setExistingTaskId(null);
+
+    try {
+      const response = await fetch("/api/tasks/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          task_type: taskType,
+          dataset_id: parseInt(datasetId),
+          target_name: targetName || undefined,
+          estimation_procedure: estimationProcedure || undefined,
+          evaluation_measure: evaluationMeasure || undefined,
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        const idMatch = data.error?.match(/matched id\(s\): \[(\d+)\]/);
+        if (idMatch) {
+          setExistingTaskId(idMatch[1]);
+        } else {
+          setError(data.error || "Failed to create task. Please try again.");
+        }
+        return;
+      }
+
+      router.push(`/tasks/${data.id}`);
+      router.refresh();
+    } catch (_err) {
+      setError("Failed to create task. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="mx-auto w-full max-w-2xl shadow-lg">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-2xl font-bold">
+          <PlusCircle className="text-primary h-6 w-6" />
+          Define Task
+        </CardTitle>
+        <CardDescription>
+          Create a new machine learning task for an existing dataset.
+        </CardDescription>
+      </CardHeader>
+
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-6">
+          {existingTaskId && (
+            <Alert className="border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100">
+              <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+              <AlertTitle>Task already exists</AlertTitle>
+              <AlertDescription>
+                This exact task configuration already exists.{" "}
+                <a
+                  href={`/tasks/${existingTaskId}`}
+                  className="font-medium underline underline-offset-2"
+                >
+                  View task {existingTaskId} →
+                </a>
+              </AlertDescription>
+            </Alert>
+          )}
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="space-y-4 pb-6">
+            <div className="space-y-2">
+              <Label htmlFor="taskType">Task Type *</Label>
+              <Select
+                value={taskType}
+                onValueChange={(v) => {
+                  setTaskType(v);
+                  setTargetName("");
+                  setEvaluationMeasure("");
+                  setEstimationProcedure("1");
+                }}
+              >
+                <SelectTrigger id="taskType">
+                  <SelectValue placeholder="Select task type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="classification">Supervised Classification</SelectItem>
+                  <SelectItem value="regression">Supervised Regression</SelectItem>
+                  <SelectItem value="learningcurve">Learning Curve</SelectItem>
+                  <SelectItem value="clustering">Clustering</SelectItem>
+                  <SelectItem value="supervised">Supervised</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="datasetId">Dataset ID *</Label>
+              <Input
+                id="datasetId"
+                type="number"
+                placeholder="e.g. 128"
+                value={datasetId}
+                onChange={(e) => setDatasetId(e.target.value)}
+                required
+              />
+              {datasetStatus === "in_preparation" ? (
+                <p className="flex items-center gap-1.5 text-sm text-amber-600">
+                  <Clock className="h-3.5 w-3.5 shrink-0" />
+                  This dataset is still being processed by OpenML. Tasks can
+                  only be created once the dataset is <strong>active</strong>.
+                  Please try again in a few minutes.
+                </p>
+              ) : datasetStatus === "active" ? (
+                <p className="text-muted-foreground text-sm">
+                  Dataset is active and ready for tasks.
+                </p>
+              ) : (
+                <p className="text-muted-foreground text-sm">
+                  The ID of the dataset to use for this task.
+                </p>
+              )}
+            </div>
+
+            {taskType !== "clustering" && (
+              <div className="space-y-2">
+                <Label htmlFor="targetName">Target Feature *</Label>
+                {validTargetFeatures.length > 0 ? (
+                  <select
+                    id="targetName"
+                    value={targetName}
+                    onChange={(e) => setTargetName(e.target.value)}
+                    required
+                    className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                  >
+                    <option value="">Select a column...</option>
+                    {validTargetFeatures.map((f) => (
+                      <option key={f.name} value={f.name}>
+                        {f.name}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <Input
+                    id="targetName"
+                    placeholder="e.g. class"
+                    value={targetName}
+                    onChange={(e) => setTargetName(e.target.value)}
+                    required
+                  />
+                )}
+                <p className="text-muted-foreground text-sm">
+                  {validTargetFeatures.length > 0
+                    ? `${validTargetFeatures.length} valid target column${validTargetFeatures.length === 1 ? "" : "s"} available (${taskType === "regression" ? "numeric" : "nominal"}).`
+                    : "The name of the target attribute (column) to predict."}
+                </p>
+              </div>
+            )}
+
+            {(ESTIMATION_PROCEDURES[taskType]?.length ?? 0) > 0 && (
+              <div className="space-y-2">
+                <Label htmlFor="estimationProcedure">
+                  Estimation Procedure *
+                </Label>
+                <select
+                  id="estimationProcedure"
+                  value={estimationProcedure}
+                  onChange={(e) => setEstimationProcedure(e.target.value)}
+                  required
+                  className="border-input bg-background ring-offset-background focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                >
+                  {ESTIMATION_PROCEDURES[taskType].map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.label}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-muted-foreground text-sm">
+                  How to split the data for evaluation.
+                </p>
+              </div>
+            )}
+
+            {(EVALUATION_MEASURES[taskType]?.length ?? 0) > 0 && (
+              <div className="space-y-2">
+                <Label htmlFor="evaluationMeasure">Evaluation Measure</Label>
+                <select
+                  id="evaluationMeasure"
+                  value={evaluationMeasure}
+                  onChange={(e) => setEvaluationMeasure(e.target.value)}
+                  className="border-input bg-background ring-offset-background focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                >
+                  <option value="">None (optional)</option>
+                  {EVALUATION_MEASURES[taskType].map((m) => (
+                    <option key={m} value={m}>
+                      {m}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-muted-foreground text-sm">
+                  Optional. Evaluation metric for this task.
+                </p>
+              </div>
+            )}
+          </div>
+        </CardContent>
+
+        <CardFooter className="bg-muted/20 flex justify-between border-t pt-6">
+          <Button variant="outline" type="button" onClick={() => router.back()}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={
+              isLoading ||
+              isFetchingDataset ||
+              datasetStatus === "in_preparation"
+            }
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              "Create Task"
+            )}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
diff --git a/app-next/src/hooks/use-op-speed.ts b/app-next/src/hooks/use-op-speed.ts
new file mode 100644
index 00000000..27269bc3
--- /dev/null
+++ b/app-next/src/hooks/use-op-speed.ts
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+/**
+ * A hook to measure operation speed and rendering performance.
+ *
+ * @param operationName - The name of the operation being monitored.
+ * @param dependencies - An array of dependencies to trigger the measurement (like useEffect/useMemo).
+ */
+export function useOpSpeed(operationName: string) {
+  const renderCount = useRef(0);
+
+  // Use layout effect to capture "start" of rendering phases for updates
+  // Note: This isn't perfect "render start" but close enough for React dev tools equivalent
+  // without breaking purity rules.
+  // Ideally, we'd use the Profiler API, but that's for heavy instrumentation.
+  useEffect(() => {
+    // This runs after the render is committed.
+    const now =
+      typeof performance !== "undefined" ? performance.now() : Date.now();
+
+    // We can't easily measure "render start" safely inside the render function
+    // because it must be pure.
+    // Instead, we just mark that a render completed.
+
+    // If you need precise "render logic" timing, you should wrap the expensive logic
+    // in the measure() function returned below.
+
+    renderCount.current += 1;
+
+    if (process.env.NODE_ENV === "development") {
+      // We log that a commit happened
+      console.log(
+        `[OpSpeed] ${operationName} committed update #${renderCount.current} at ${now.toFixed(2)}ms`,
+      );
+    }
+  });
+
+  // Return a function to manually measure specific code blocks
+  return {
+    measure: <T>(fn: () => T, label?: string): T => {
+      // It IS safe to call performance.now() inside an event handler or effect-triggered function,
+      // just not during the render phase itself.
+      // If this is called during render (e.g. in useMemo), it will still trigger the warning if inspected by strict tooling,
+      // but is generally the only way to measure synchronous code blocks.
+      const start =
+        typeof performance !== "undefined" ? performance.now() : Date.now();
+      const result = fn();
+      const end =
+        typeof performance !== "undefined" ? performance.now() : Date.now();
+      if (process.env.NODE_ENV === "development") {
+        console.log(
+          `[OpSpeed] ${operationName}${label ? `:${label}` : ""} execution time: ${(
+            end - start
+          ).toFixed(2)}ms`,
+        );
+      }
+      return result;
+    },
+  };
+}
diff --git a/app-next/src/hooks/useDatasetStats.ts b/app-next/src/hooks/useDatasetStats.ts
new file mode 100644
index 00000000..f1756a07
--- /dev/null
+++ b/app-next/src/hooks/useDatasetStats.ts
@@ -0,0 +1,131 @@
+"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(() => ({}));
+          const msg = errorData.error || `Failed to fetch stats: ${response.statusText}`;
+          console.warn("Dataset stats unavailable:", msg);
+          if (cancelled) return;
+          setState({ stats: null, isLoading: false, error: msg, cached: false });
+          return;
+        }
+
+        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/hooks/useParquetData.ts b/app-next/src/hooks/useParquetData.ts
index 0a6145e9..5f8cb342 100644
--- a/app-next/src/hooks/useParquetData.ts
+++ b/app-next/src/hooks/useParquetData.ts
@@ -192,7 +192,16 @@ export function useParquetData(
           return;
         }
         if (!arffResponse.ok) {
-          throw new Error(`Failed to fetch ARFF: ${arffResponse.statusText}`);
+          // File not available (server error, not processed yet, etc.) — fail silently
+          setState({
+            data: null,
+            columns: [],
+            rowCount: 0,
+            isLoading: false,
+            error: null,
+            isTooLarge: false,
+          });
+          return;
         }
 
         const arffText = await arffResponse.text();
@@ -310,15 +319,31 @@ export function useParquetData(
           // Initialize parquet-wasm (uses cached module if already loaded)
           const parquetModule = await initParquetWasm();
 
-          // Read parquet using parquet-wasm
+          // Read parquet using parquet-wasm.
+          // Some parquet files use encodings unsupported by parquet-wasm
+          // (e.g. boolean dictionary packing). Catch wasm errors here and
+          // fall back to ARFF silently instead of surfacing the error.
           const parquetBytes = new Uint8Array(arrayBuffer);
-
-          // readParquet returns a parquet-wasm Table, convert to Arrow IPC stream
-          const wasmTable = parquetModule.readParquet(parquetBytes);
-          const ipcStream = wasmTable.intoIPCStream();
-
-          // Parse the Arrow IPC stream into an apache-arrow Table
-          const table: Table = tableFromIPC(ipcStream);
+          let table: Table;
+          try {
+            const wasmTable = parquetModule.readParquet(parquetBytes);
+            const ipcStream = wasmTable.intoIPCStream();
+            table = tableFromIPC(ipcStream);
+          } catch (_wasmErr) {
+            if (arffUrl && !cancelled) {
+              await tryArff(arffUrl);
+            } else if (!cancelled) {
+              setState({
+                data: null,
+                columns: [],
+                rowCount: 0,
+                isLoading: false,
+                error: null,
+                isTooLarge: false,
+              });
+            }
+            return;
+          }
 
           // Extract column names
           const columns = table.schema.fields.map((f) => f.name);
diff --git a/app-next/src/hooks/usePlotlyTheme.ts b/app-next/src/hooks/usePlotlyTheme.ts
new file mode 100644
index 00000000..bf10bcf7
--- /dev/null
+++ b/app-next/src/hooks/usePlotlyTheme.ts
@@ -0,0 +1,28 @@
+"use client";
+
+import { useTheme } from "next-themes";
+
+/**
+ * Shared Plotly layout theme values — keeps all charts visually consistent
+ * across dark and light mode.
+ */
+export function usePlotlyTheme() {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+
+  return {
+    isDark,
+    font: {
+      color: isDark ? "rgba(250,250,250,0.7)" : "rgba(0,0,0,0.7)",
+    },
+    gridcolor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)",
+    zerolinecolor: isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)",
+    paper_bgcolor: "transparent" as const,
+    plot_bgcolor: isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)",
+    // Hover tooltip: always white text and border so it's readable on any marker colour
+    hoverlabel: {
+      font: { color: "white" },
+      bordercolor: "white",
+    },
+  };
+}
diff --git a/app-next/src/lib/api/dataset.ts b/app-next/src/lib/api/dataset.ts
index 6cf28d77..520d199c 100644
--- a/app-next/src/lib/api/dataset.ts
+++ b/app-next/src/lib/api/dataset.ts
@@ -37,14 +37,12 @@ export async function fetchDataset(id: string): Promise<Dataset> {
 
     return data._source as Dataset;
   } catch (error) {
-    // Log error for debugging (server-side only)
-    console.error(`Error fetching dataset ${id}:`, error);
-
-    // Re-throw notFound() errors
-    if (error instanceof Error && error.message === "NEXT_NOT_FOUND") {
+    // Re-throw notFound() — Next.js uses digest, not message
+    if ((error as { digest?: string })?.digest === "NEXT_NOT_FOUND") {
       throw error;
     }
 
+    console.error(`Error fetching dataset ${id}:`, error);
     throw new Error("Failed to load dataset");
   }
 }
diff --git a/app-next/src/lib/api/flow.ts b/app-next/src/lib/api/flow.ts
index 3f57c873..a5679fc1 100644
--- a/app-next/src/lib/api/flow.ts
+++ b/app-next/src/lib/api/flow.ts
@@ -84,7 +84,7 @@ export async function fetchFlowVersions(name: string): Promise<Flow[]> {
     }
 
     const data = await response.json();
-    return data.hits.hits.map((hit: any) => hit._source as Flow);
+    return data.hits.hits.map((hit: { _source: Flow }) => hit._source);
   } catch (error) {
     console.error("Error fetching flow versions:", error);
     return [];
diff --git a/app-next/src/lib/api/measure.ts b/app-next/src/lib/api/measure.ts
new file mode 100644
index 00000000..68a4b60c
--- /dev/null
+++ b/app-next/src/lib/api/measure.ts
@@ -0,0 +1,100 @@
+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 as { digest?: string })?.digest === "NEXT_NOT_FOUND") {
+      throw error;
+    }
+    console.error(`Error fetching measure ${id}:`, 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/run.ts b/app-next/src/lib/api/run.ts
new file mode 100644
index 00000000..290ac6a6
--- /dev/null
+++ b/app-next/src/lib/api/run.ts
@@ -0,0 +1,175 @@
+import { APP_CONFIG } from "@/lib/config";
+
+/** Ensure a value that may be a single item or undefined becomes an array. */
+function normalizeArray<T>(value: T[] | T | undefined | null): T[] {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Run data as returned by the OpenML REST API (/api/v1/json/run/{id}).
+ * This differs from the Elasticsearch-indexed shape in src/types/run.ts.
+ */
+export interface RunDetail {
+  run_id: number;
+  uploader?: string;
+  uploader_id?: number;
+  upload_time?: string;
+  flow_id?: number;
+  flow_name?: string;
+  task_id?: number;
+  task?: {
+    task_id?: number;
+    task_type?: string;
+    source_data?: {
+      data_id?: number;
+      name?: string;
+    };
+  };
+  visibility?: string;
+  error_message?: string | null;
+  tag?: string[];
+  parameter_setting?: Array<{
+    name: string;
+    value: string | number | boolean | null;
+  }>;
+  output_data?: {
+    evaluation?: Array<{
+      name: string;
+      value: string | number;
+      stdev?: string | number;
+      array_data?: Record<string, string | number>;
+      per_fold?: Array<number | number[]>;
+    }>;
+  };
+  nr_of_likes?: number;
+  nr_of_downloads?: number;
+  nr_of_issues?: number;
+  nr_of_downvotes?: number;
+  setup_string?: string;
+}
+
+interface RunApiResponse {
+  run?: RunDetail;
+  error?: { code: string; message: string };
+}
+
+/**
+ * Fetch a single run by ID from the OpenML REST API.
+ * Returns `{ run, error }` — never throws.
+ */
+export async function getRun(
+  runId: number,
+): Promise<{ run: RunDetail | null; error: string | null }> {
+  try {
+    const apiUrl = APP_CONFIG.urlApi || "https://www.openml.org/api/v1";
+    const response = await fetch(`${apiUrl}/json/run/${runId}`, {
+      next: { revalidate: 3600 },
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        return { run: null, error: `Run #${runId} not found` };
+      }
+      return {
+        run: null,
+        error: `Failed to fetch run: HTTP ${response.status}`,
+      };
+    }
+
+    const contentType = response.headers.get("content-type");
+    if (!contentType || !contentType.includes("application/json")) {
+      return { run: null, error: "Invalid response format from API" };
+    }
+
+    const data: RunApiResponse = await response.json();
+
+    if (data.error) {
+      return { run: null, error: data.error.message || "Unknown API error" };
+    }
+
+    // The OpenML XML→JSON API collapses single-element arrays to plain
+    // values.  Normalize array fields so callers can rely on .length.
+    if (data.run) {
+      data.run.tag = normalizeArray(data.run.tag);
+      data.run.parameter_setting = normalizeArray(data.run.parameter_setting);
+      if (data.run.output_data) {
+        data.run.output_data.evaluation = normalizeArray(
+          data.run.output_data.evaluation,
+        );
+
+        // The API returns both summary rows (no repeat/fold) and per-fold
+        // rows (with repeat + fold) under the same name. Merge per-fold
+        // values into each summary entry's `per_fold` array and discard
+        // the individual fold rows so every name is unique.
+        const rawEvals = data.run.output_data.evaluation as Array<
+          Record<string, unknown>
+        >;
+        const summaryMap = new Map<
+          string,
+          (typeof data.run.output_data.evaluation)[number]
+        >();
+        const foldValues = new Map<string, number[]>();
+
+        for (const ev of rawEvals) {
+          const name = ev.name as string;
+          if (ev.repeat != null || ev.fold != null) {
+            // Per-fold row — collect the value
+            const arr = foldValues.get(name) ?? [];
+            arr.push(
+              typeof ev.value === "number"
+                ? ev.value
+                : parseFloat(String(ev.value)),
+            );
+            foldValues.set(name, arr);
+          } else {
+            // Summary row — keep as the canonical entry
+            summaryMap.set(
+              name,
+              ev as (typeof data.run.output_data.evaluation)[number],
+            );
+          }
+        }
+
+        // Attach per-fold arrays to their summary entries
+        for (const [name, folds] of foldValues) {
+          const summary = summaryMap.get(name);
+          if (summary) {
+            summary.per_fold = folds;
+          }
+        }
+
+        // Parse array_data JSON strings into objects
+        for (const ev of summaryMap.values()) {
+          if (typeof ev.array_data === "string") {
+            try {
+              const parsed = JSON.parse(ev.array_data as string);
+              if (Array.isArray(parsed)) {
+                // Convert array [0.5, 0.8] into { "class_0": 0.5, "class_1": 0.8 }
+                const obj: Record<string, number> = {};
+                parsed.forEach((v: number, i: number) => {
+                  obj[`class_${i}`] = v;
+                });
+                ev.array_data = obj;
+              } else if (typeof parsed === "object" && parsed !== null) {
+                ev.array_data = parsed;
+              }
+            } catch {
+              // Leave as-is if not valid JSON
+            }
+          }
+        }
+
+        data.run.output_data.evaluation = Array.from(summaryMap.values());
+      }
+    }
+
+    return { run: data.run || null, error: null };
+  } catch (error) {
+    console.error("Failed to fetch run:", error);
+    return { run: null, error: "Failed to connect to OpenML API" };
+  }
+}
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/lib/api/task.ts b/app-next/src/lib/api/task.ts
index 6e554fee..10ecd5c1 100644
--- a/app-next/src/lib/api/task.ts
+++ b/app-next/src/lib/api/task.ts
@@ -39,12 +39,11 @@ export async function fetchTask(id: string): Promise<Task> {
 
     return data._source as Task;
   } catch (error) {
-    console.error(`Error fetching task ${id}:`, error);
-
-    if (error instanceof Error && error.message === "NEXT_NOT_FOUND") {
+    if ((error as { digest?: string })?.digest === "NEXT_NOT_FOUND") {
       throw error;
     }
 
+    console.error(`Error fetching task ${id}:`, error);
     throw new Error("Failed to load task");
   }
 }
diff --git a/app-next/src/lib/api/user.ts b/app-next/src/lib/api/user.ts
new file mode 100644
index 00000000..61bcae0e
--- /dev/null
+++ b/app-next/src/lib/api/user.ts
@@ -0,0 +1,39 @@
+import { APP_CONFIG } from "@/lib/config";
+
+/**
+ * Basic user info returned by the OpenML REST API (/api/v1/json/user/{id}).
+ */
+export interface UserInfo {
+  id: string | number;
+  username?: string;
+  first_name?: string;
+  last_name?: string;
+  image?: string;
+  bio?: string;
+  date_registered?: string;
+}
+
+/**
+ * Fetch basic user info by ID from the OpenML REST API.
+ * Returns `null` on any error (never throws).
+ */
+export async function getUser(userId: string): Promise<UserInfo | null> {
+  try {
+    const apiUrl = APP_CONFIG.urlApi || "https://www.openml.org/api/v1";
+    const response = await fetch(`${apiUrl}/json/user/${userId}`, {
+      next: { revalidate: 3600 },
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const data = await response.json();
+    return (data.user as UserInfo) || null;
+  } catch {
+    return null;
+  }
+}
diff --git a/app-next/src/types/measure.ts b/app-next/src/types/measure.ts
new file mode 100644
index 00000000..5d79fc04
--- /dev/null
+++ b/app-next/src/types/measure.ts
@@ -0,0 +1,15 @@
+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;
+  stratified_sampling?: string;
+}
diff --git a/app-next/src/types/next-auth.d.ts b/app-next/src/types/next-auth.d.ts
index 4568c81f..03807daf 100644
--- a/app-next/src/types/next-auth.d.ts
+++ b/app-next/src/types/next-auth.d.ts
@@ -2,35 +2,44 @@ import { DefaultSession, DefaultUser } from "next-auth";
 import { DefaultJWT } from "next-auth/jwt";
 
 declare module "next-auth" {
-  interface Session {
+  interface User extends DefaultUser {
+    id: string;
+    username: string;
+    firstName?: string;
+    lastName?: string;
+    image?: string | null;
+    session_hash?: string | null;
+    apikey?: string;
+    accessToken?: string;
+    isLocalUser?: boolean;
+    openmlUserId?: string;
+  }
+
+  interface Session extends DefaultSession {
     user: {
       id: string;
       username: string;
       firstName?: string;
       lastName?: string;
+      image?: string | null;
+      isLocalUser?: boolean;
+      openmlUserId?: string;
     } & DefaultSession["user"];
-    accessToken?: string;
     apikey?: string;
-  }
-
-  interface User extends DefaultUser {
-    id: string;
-    username?: string;
     accessToken?: string;
-    session_hash?: string | null;
-    firstName?: string;
-    lastName?: string;
-    apikey?: string;
   }
 }
 
 declare module "next-auth/jwt" {
   interface JWT extends DefaultJWT {
-    accessToken?: string;
     userId?: string;
     username?: string;
-    apikey?: string;
     firstName?: string;
     lastName?: string;
+    picture?: string | null;
+    apikey?: string;
+    accessToken?: string;
+    isLocalUser?: boolean;
+    openmlUserId?: string;
   }
 }
diff --git a/app-next/src/types/task.ts b/app-next/src/types/task.ts
index efc5628b..533a31f2 100644
--- a/app-next/src/types/task.ts
+++ b/app-next/src/types/task.ts
@@ -1,5 +1,4 @@
-/**
- * OpenML Task Entity
+/** OpenML Task Entity
  * Represents a machine learning task in the OpenML platform
  */
 export interface Task {
@@ -20,7 +19,7 @@ export interface Task {
     data_id: number;
     name: string;
   };
-  source_data_name?: string; // For backward compatibility
+  source_data_name?: string; // backward compatibility
 
   // Task configuration
   target_feature?: string;
@@ -65,7 +64,6 @@ export interface Task {
   // Quality metrics
   quality?: Record<string, string>;
 
-  // Dates
   // Dates
   upload_date?: string;
   date?: string;
diff --git a/server/data/views.py b/server/data/views.py
index a37a4413..cf81cfc8 100644
--- a/server/data/views.py
+++ b/server/data/views.py
@@ -1,6 +1,7 @@
 import json
 import os
 import tempfile
+from datetime import datetime
 from pathlib import Path
 from urllib.parse import parse_qs, urlparse
 
@@ -13,6 +14,12 @@
 from werkzeug.utils import secure_filename
 
 from server.setup import setup_openml_config
+from server.src.dashboard.caching import (
+    CACHE_DIR_DASHBOARD,
+    load_cached_stats,
+    save_stats_cache,
+)
+from server.src.dashboard.helpers import compute_dataset_stats
 from server.utils import current_user
 
 data_blueprint = Blueprint(
@@ -121,7 +128,7 @@ def data_edit():
                 citation=citation,
                 language=language,
                 original_data_url=original_data_url,
-                paper_url=paper_url
+                paper_url=paper_url,
             )
         elif owner == "true":
             default_target_attribute = j_obj["default_target_attribute"]
@@ -144,33 +151,54 @@ def data_edit():
                 ignore_attribute=ignore_attribute,
                 row_id_attribute=row_id_attribute,
                 original_data_url=original_data_url,
-                paper_url=paper_url
+                paper_url=paper_url,
             )
 
         return str("data edit successful")
 
 
 @data_blueprint.route("/data-upload", methods=["POST"])
-@jwt_required()
 def data_upload():
     """
     Function to upload dataset
     """
 
-    user = current_user()
-    user_api_key = user.session_hash
+    user_api_key = request.form.get("api_key") or (
+        request.files.get("metadata")
+        and json.loads(request.files["metadata"].read()).get("api_key")
+    )
+    if not user_api_key:
+        return jsonify({"msg": "api_key required"}), 401
+
+    # Set server URL explicitly — avoids double /api/api/ from URL_API env var
+    openml.config.server = os.getenv(
+        "OPENML_SERVER_URL", "https://www.openml.org/api/v1/xml"
+    )
+    openml.config.apikey = user_api_key
 
     data_file = request.files["dataset"]
     metadata = request.files["metadata"]
 
     with tempfile.TemporaryDirectory() as tmpdirname:
-        path = Path(tmpdirname) / f"{user_api_key}?{secure_filename(data_file.filename)}"
+        path = (
+            Path(tmpdirname) / f"{user_api_key}?{secure_filename(data_file.filename)}"
+        )
         data_file.save(path)
 
         metadata = metadata.read()
         metadata = json.loads(metadata)
-        dataset_name = metadata["dataset_name"]
-        description = metadata["description"]
+        def _sanitize(text):
+            """Replace Unicode smart quotes and dashes with ASCII equivalents."""
+            if not text:
+                return text
+            return (
+                text.replace("\u2018", "'").replace("\u2019", "'")  # ' '
+                    .replace("\u201c", '"').replace("\u201d", '"')  # " "
+                    .replace("\u2013", "-").replace("\u2014", "-")  # – —
+            )
+
+        dataset_name = _sanitize(metadata["dataset_name"]).replace(" ", "_")
+        description = _sanitize(metadata["description"])
         creator = metadata["creator"] or None
         contributor = metadata["contributor"] or None
         collection_date = metadata["collection_date"] or None
@@ -185,57 +213,58 @@ def data_upload():
         supported_extensions = [".csv", ".parquet", ".json", ".feather", ".arff"]
 
         if file_extension not in supported_extensions:
-            return jsonify({"msg": "format not supported"})
-
-        elif file_extension == ".arff":
-            with open(path, "r") as arff_file:
-                arff_dict = arff.load(arff_file)
-            attribute_names, dtypes = zip(*arff_dict["attributes"])
-            data = pd.DataFrame(arff_dict["data"], columns=attribute_names)
-            for attribute_name, dtype in arff_dict["attributes"]:
-                # 'real' and 'numeric' are probably interpreted correctly.
-                # Date support needs to be added.
-                if isinstance(dtype, list):
-                    data[attribute_name] = data[attribute_name].astype("category")
-            df = data
-
-        elif file_extension == ".csv":
-            df = pd.read_csv(path)
-
-        elif file_extension == ".json":
-            df = pd.read_json(path)
-
-        elif file_extension == ".parquet":
-            df = pd.read_parquet(path)
-
-        elif file_extension == ".feather":
-            df = pd.read_feather(path)
-
-        oml_dataset = openml.datasets.create_dataset(
-            name=dataset_name,
-            description=description,
-            data=df,
-            creator=creator,
-            contributor=contributor,
-            collection_date=collection_date,
-            licence=licence,
-            language=language,
-            attributes="auto",
-            default_target_attribute=def_tar_att,
-            ignore_attribute=ignore_attribute,
-            citation=citation,
-        )
-        oml_dataset.publish()
+            return jsonify({"msg": f"Unsupported file format '{file_extension}'. Supported formats: CSV, JSON, Parquet, Feather, ARFF."}), 422
 
-    # TODO Add error for bad dataset
-    return jsonify({"msg": "dataset uploaded"}), 200
+        try:
+            if file_extension == ".arff":
+                with open(path, "r") as arff_file:
+                    arff_dict = arff.load(arff_file)
+                attribute_names, dtypes = zip(*arff_dict["attributes"])
+                data = pd.DataFrame(arff_dict["data"], columns=attribute_names)
+                for attribute_name, dtype in arff_dict["attributes"]:
+                    if isinstance(dtype, list):
+                        data[attribute_name] = data[attribute_name].astype("category")
+                df = data
+            elif file_extension == ".csv":
+                df = pd.read_csv(path)
+            elif file_extension == ".json":
+                df = pd.read_json(path)
+            elif file_extension == ".parquet":
+                df = pd.read_parquet(path)
+            elif file_extension == ".feather":
+                df = pd.read_feather(path)
+        except Exception as e:
+            return jsonify({"msg": f"Could not read file: {e}"}), 422
+
+        try:
+            oml_dataset = openml.datasets.create_dataset(
+                name=dataset_name,
+                description=description,
+                data=df,
+                creator=creator,
+                contributor=contributor,
+                collection_date=collection_date,
+                licence=licence,
+                language=language,
+                attributes="auto",
+                default_target_attribute=def_tar_att,
+                ignore_attribute=ignore_attribute,
+                citation=citation,
+            )
+            oml_dataset.publish()
+        except ValueError as e:
+            return jsonify({"msg": str(e)}), 422
+        except Exception as e:
+            return jsonify({"msg": f"Upload failed: {e}"}), 500
+
+    return jsonify({"msg": "dataset uploaded", "id": str(oml_dataset.dataset_id)}), 200
 
 
 @data_blueprint.route("/data-tag", methods=["POST"])
 @jwt_required()
 def data_tag():
     j_obj = request.get_json()
-    tag = j_obj['tag']
+    tag = j_obj["tag"]
     url = request.args.get("url")
     parsed = urlparse(url)
     dataset_id = parse_qs(parsed.query)["id"]
@@ -244,3 +273,79 @@ def data_tag():
     dataset = openml.datasets.get_dataset(dataset_id)
     dataset.push_tag(tag)
 
+
+@data_blueprint.route("/api/v1/datasets/<int:dataset_id>/stats", methods=["GET"])
+def get_dataset_stats(dataset_id):
+    """
+    Returns JSON statistics for a dataset.
+
+    Query params:
+    - max_preview_rows (int, default=100): Max rows in preview
+    - force_refresh (bool, default=False): Skip cache, recompute
+
+    Returns:
+    {
+      "dataset_id": int,
+      "computed_at": str (ISO timestamp),
+      "cached": bool,
+      "statistics": {
+        "distribution": {...},
+        "correlation": {...},
+        "preview": {...}
+      }
+    }
+    """
+    try:
+        max_preview = request.args.get("max_preview_rows", 100, type=int)
+        force_refresh = request.args.get("force_refresh", False, type=bool)
+
+        # Try loading from JSON cache first
+        if not force_refresh:
+            cached_stats = load_cached_stats(dataset_id)
+            if cached_stats is not None:
+                # Validate cache has expected max_preview_rows
+                current_preview_rows = len(
+                    cached_stats.get("preview", {}).get("rows", [])
+                )
+                if current_preview_rows >= max_preview:
+                    # Cache is valid, return it
+                    return (
+                        jsonify(
+                            {
+                                "dataset_id": dataset_id,
+                                "computed_at": datetime.utcnow().isoformat() + "Z",
+                                "cached": True,
+                                "statistics": cached_stats,
+                            }
+                        ),
+                        200,
+                    )
+
+        # Cache miss or force refresh - compute stats
+        stats = compute_dataset_stats(dataset_id, max_preview_rows=max_preview)
+
+        # Save to JSON cache
+        save_stats_cache(dataset_id, stats)
+
+        return (
+            jsonify(
+                {
+                    "dataset_id": dataset_id,
+                    "computed_at": datetime.utcnow().isoformat() + "Z",
+                    "cached": False,
+                    "statistics": stats,
+                }
+            ),
+            200,
+        )
+
+    except Exception as e:
+        # Log the error for debugging
+        import logging
+
+        logger = logging.getLogger("data")
+        logger.error(
+            f"Error computing stats for dataset {dataset_id}: {str(e)}", exc_info=True
+        )
+
+        return jsonify({"error": str(e)}), 500