diff --git a/client/dive-common/components/DatasetPicker.vue b/client/dive-common/components/DatasetPicker.vue
new file mode 100644
index 000000000..1750a4afe
--- /dev/null
+++ b/client/dive-common/components/DatasetPicker.vue
@@ -0,0 +1,339 @@
+<script lang="ts">
+import {
+  computed, defineComponent, PropType, ref,
+} from 'vue';
+import type { DataTableHeader } from 'vuetify';
+import { clientSettings } from 'dive-common/store/settings';
+import { itemsPerPageOptions } from 'dive-common/constants';
+import {
+  DatasetPickerRow, datasetTypeOptions, filterDatasetRows, selectableIds,
+} from 'dive-common/datasetPicker';
+
+const DefaultHeaders: DataTableHeader[] = [
+  { text: 'Dataset', value: 'name', sortable: true },
+  {
+    text: 'Type', value: 'type', sortable: true, width: 160,
+  },
+];
+
+/**
+ * The one way datasets are chosen across the app: a searchable, type-filterable
+ * list of the datasets on offer, an add button per row, and select all for
+ * everything the filters list. Pages keep their own table of what they
+ * selected; this only offers. Platforms without a listing (the web) can show a
+ * browse button instead, through `pickerLabel` and the `pick` event.
+ */
+export default defineComponent({
+  name: 'DatasetPicker',
+  props: {
+    /** Datasets on offer, selected ones included (they show as taken). */
+    items: {
+      type: Array as PropType<DatasetPickerRow[]>,
+      required: true,
+    },
+    selectedIds: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    /** Columns before the add button; extra values come from the rows. */
+    headers: {
+      type: Array as PropType<DataTableHeader[]>,
+      default: () => DefaultHeaders,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    noDataText: {
+      type: String,
+      default: 'No datasets available.',
+    },
+    /** Label of a platform browse button; empty hides it. */
+    pickerLabel: {
+      type: String,
+      default: '',
+    },
+    picking: {
+      type: Boolean,
+      default: false,
+    },
+    /** Hide the paging footer for short lists. */
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    /** Null when the field's clear button is used. */
+    const search = ref<string | null>('');
+    /** Null means all types; otherwise the selected type string. */
+    const typeFilter = ref<string | null>(null);
+
+    const typeOptions = computed(() => datasetTypeOptions(props.items));
+    const showTypeFilter = computed(() => props.headers.some((h) => h.value === 'type'));
+    const listed = computed(() => filterDatasetRows(
+      props.items,
+      search.value,
+      ['name'],
+      typeFilter.value,
+    ));
+    const addable = computed(() => selectableIds(listed.value, props.selectedIds));
+    const selected = computed(() => new Set(props.selectedIds));
+    /** Listed rows that are selected: what "remove all" drops. */
+    const removable = computed(() => listed.value
+      .filter((row) => selected.value.has(row.id))
+      .map((row) => row.id));
+
+    const tableHeaders = computed<DataTableHeader[]>(() => [
+      ...props.headers,
+      {
+        text: '', value: 'picker-actions', sortable: false, width: 96, align: 'end',
+      },
+    ]);
+
+    function rowClass(item: DatasetPickerRow) {
+      return selected.value.has(item.id) ? 'picker-row-selected' : '';
+    }
+
+    function addAll() {
+      if (addable.value.length) emit('add-many', addable.value);
+    }
+
+    function removeAll() {
+      if (removable.value.length) emit('remove-many', removable.value);
+    }
+
+    function setTypeFilter(value: string | null) {
+      typeFilter.value = value;
+    }
+
+    return {
+      search,
+      typeFilter,
+      typeOptions,
+      showTypeFilter,
+      listed,
+      addable,
+      removable,
+      selected,
+      tableHeaders,
+      rowClass,
+      addAll,
+      removeAll,
+      setTypeFilter,
+      clientSettings,
+      itemsPerPageOptions,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="dataset-picker">
+    <div
+      v-if="title || hint"
+      class="mb-1"
+    >
+      <div
+        v-if="title"
+        class="text-subtitle-2"
+      >
+        {{ title }}
+      </div>
+      <div
+        v-if="hint"
+        class="text-caption grey--text"
+      >
+        {{ hint }}
+      </div>
+    </div>
+    <div class="d-flex align-center flex-wrap picker-toolbar mb-1">
+      <v-text-field
+        v-model="search"
+        append-icon="mdi-magnify"
+        label="Search datasets"
+        dense
+        outlined
+        single-line
+        hide-details
+        clearable
+        class="picker-search"
+      />
+      <v-spacer />
+      <v-btn
+        v-if="pickerLabel"
+        small
+        outlined
+        :loading="picking"
+        class="ml-2"
+        @click="$emit('pick')"
+      >
+        <v-icon
+          small
+          left
+        >
+          mdi-folder-search
+        </v-icon>
+        {{ pickerLabel }}
+      </v-btn>
+      <v-btn
+        small
+        color="success"
+        outlined
+        :disabled="addable.length === 0"
+        class="ml-2"
+        :title="`Add the ${addable.length} listed dataset${addable.length === 1 ? '' : 's'} not yet selected`"
+        @click="addAll"
+      >
+        <v-icon
+          small
+          left
+        >
+          mdi-check-all
+        </v-icon>
+        Select all{{ addable.length ? ` (${addable.length})` : '' }}
+      </v-btn>
+      <v-btn
+        small
+        color="error"
+        outlined
+        :disabled="removable.length === 0"
+        class="ml-2"
+        :title="`Remove the ${removable.length} listed dataset${removable.length === 1 ? '' : 's'} from the selection`"
+        @click="removeAll"
+      >
+        <v-icon
+          small
+          left
+        >
+          mdi-close-box-multiple-outline
+        </v-icon>
+        Remove all{{ removable.length ? ` (${removable.length})` : '' }}
+      </v-btn>
+    </div>
+    <v-data-table
+      dense
+      :headers="tableHeaders"
+      :items="listed"
+      :items-per-page.sync="clientSettings.rowsPerPage"
+      :footer-props="{ itemsPerPageOptions }"
+      :hide-default-footer="compact && listed.length <= clientSettings.rowsPerPage"
+      :no-data-text="items.length ? 'Nothing matches the filters.' : noDataText"
+      :item-class="rowClass"
+      class="picker-table"
+    >
+      <template #header.type="{ header }">
+        <v-menu
+          v-if="showTypeFilter"
+          open-on-hover
+          bottom
+          offset-y
+          open-delay="200"
+          close-delay="250"
+          :nudge-bottom="4"
+        >
+          <template #activator="{ on, attrs }">
+            <span
+              class="type-header-label"
+              v-bind="attrs"
+              v-on="on"
+            >
+              {{ header.text }}
+              <v-icon
+                x-small
+                class="ml-1"
+                :color="typeFilter ? 'primary' : undefined"
+                :class="{ 'type-filter-idle': !typeFilter }"
+              >
+                {{ typeFilter ? 'mdi-filter' : 'mdi-filter-outline' }}
+              </v-icon>
+            </span>
+          </template>
+          <v-list dense>
+            <v-list-item
+              :input-value="!typeFilter"
+              @click="setTypeFilter(null)"
+            >
+              <v-list-item-title>All</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-for="type in typeOptions"
+              :key="type"
+              :input-value="typeFilter === type"
+              @click="setTypeFilter(type)"
+            >
+              <v-list-item-title>{{ type }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <span v-else>{{ header.text }}</span>
+      </template>
+      <template #[`item.picker-actions`]="{ item }">
+        <span class="d-inline-flex align-center">
+          <slot
+            name="row-actions"
+            :item="item"
+          />
+          <v-btn
+            v-if="selected.has(item.id)"
+            :key="`${item.id}-remove`"
+            icon
+            x-small
+            color="grey"
+            title="Selected; click to remove"
+            @click="$emit('remove', item.id)"
+          >
+            <v-icon small>
+              mdi-check
+            </v-icon>
+          </v-btn>
+          <v-btn
+            v-else
+            :key="`${item.id}-add`"
+            icon
+            x-small
+            color="success"
+            title="Add"
+            @click="$emit('add', item.id)"
+          >
+            <v-icon small>
+              mdi-plus
+            </v-icon>
+          </v-btn>
+        </span>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.picker-toolbar {
+  gap: 4px 0;
+}
+
+.picker-search {
+  max-width: 360px;
+}
+
+.type-header-label {
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+}
+
+.type-filter-idle {
+  opacity: 0.45;
+}
+
+.picker-table ::v-deep td {
+  padding: 2px 8px !important;
+}
+
+.picker-table ::v-deep .picker-row-selected td {
+  color: #888;
+}
+</style>
diff --git a/client/dive-common/datasetPicker.spec.ts b/client/dive-common/datasetPicker.spec.ts
new file mode 100644
index 000000000..89c8f93c5
--- /dev/null
+++ b/client/dive-common/datasetPicker.spec.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { datasetTypeOptions, filterDatasetRows, selectableIds } from './datasetPicker';
+
+const rows = [
+  {
+    id: 'a', name: 'Amchitka East', type: 'image-sequence', fps: 5,
+  },
+  {
+    id: 'b', name: 'Bering clip', type: 'video', fps: 30,
+  },
+  { id: 'c', name: 'Caton rig', type: 'multi' },
+];
+
+describe('filterDatasetRows', () => {
+  it('matches names only by default, ignoring case and surrounding space', () => {
+    expect(filterDatasetRows(rows, '  bering ').map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, 'ri').map((r) => r.id)).toEqual(['b', 'c']);
+    expect(filterDatasetRows(rows, 'video')).toHaveLength(0);
+    expect(filterDatasetRows(rows, '')).toHaveLength(3);
+    expect(filterDatasetRows(rows, null)).toHaveLength(3);
+  });
+
+  it('keeps rows whose type equals the type filter, ignoring case and space', () => {
+    expect(filterDatasetRows(rows, '', ['name'], '  VIDEO ').map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, '', ['name'], 'image-sequence').map((r) => r.id)).toEqual(['a']);
+    expect(filterDatasetRows(rows, '', ['name'], null)).toHaveLength(3);
+  });
+
+  it('applies search and type filter together', () => {
+    expect(filterDatasetRows(rows, 'ri', ['name'], 'video').map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, 'ri', ['name'], 'multi').map((r) => r.id)).toEqual(['c']);
+    expect(filterDatasetRows(rows, 'Amchitka', ['name'], 'video')).toHaveLength(0);
+  });
+});
+
+describe('datasetTypeOptions', () => {
+  it('lists distinct types in sorted order', () => {
+    expect(datasetTypeOptions(rows)).toEqual(['image-sequence', 'multi', 'video']);
+  });
+});
+
+describe('selectableIds', () => {
+  it('leaves out what is already selected', () => {
+    expect(selectableIds(rows, ['b'])).toEqual(['a', 'c']);
+    expect(selectableIds(filterDatasetRows(rows, 'rig'), ['c'])).toEqual([]);
+  });
+});
diff --git a/client/dive-common/datasetPicker.ts b/client/dive-common/datasetPicker.ts
new file mode 100644
index 000000000..c214b4b80
--- /dev/null
+++ b/client/dive-common/datasetPicker.ts
@@ -0,0 +1,58 @@
+/**
+ * Rows and filtering behind the shared dataset picker, kept free of Vue so
+ * the search and type-filter behaviour is testable and identical on every page.
+ */
+
+/** A dataset offered for selection; any extra fields can feed extra table columns. */
+export interface DatasetPickerRow {
+  id: string;
+  name: string;
+  type?: string;
+}
+
+/**
+ * Rows matching an optional type equality filter and an optional substring
+ * search across the listed fields (both case-insensitive, whitespace-trimmed).
+ * Search defaults to the name only; type is narrowed separately via typeFilter.
+ * Empty / null filters keep everything for that criterion.
+ */
+export function filterDatasetRows<T extends DatasetPickerRow>(
+  rows: readonly T[],
+  search: string | null | undefined = '',
+  fields: readonly string[] = ['name'],
+  typeFilter: string | null | undefined = null,
+): T[] {
+  const typeNeedle = (typeFilter ?? '').trim().toLowerCase();
+  const searchNeedle = (search ?? '').trim().toLowerCase();
+  if (!typeNeedle && !searchNeedle) return [...rows];
+  return rows.filter((row) => {
+    if (typeNeedle && (row.type ?? '').toLowerCase() !== typeNeedle) {
+      return false;
+    }
+    if (!searchNeedle) return true;
+    return fields.some((field) => {
+      const value = (row as unknown as Record<string, unknown>)[field];
+      return value !== undefined && value !== null && String(value).toLowerCase().includes(searchNeedle);
+    });
+  });
+}
+
+/** Distinct type values present in the rows, sorted for a stable select list. */
+export function datasetTypeOptions<T extends DatasetPickerRow>(
+  rows: readonly T[],
+): string[] {
+  const types = new Set<string>();
+  rows.forEach((row) => {
+    if (row.type) types.add(row.type);
+  });
+  return [...types].sort((a, b) => a.localeCompare(b));
+}
+
+/** Ids of the listed rows not yet selected: what "select all" adds. */
+export function selectableIds<T extends DatasetPickerRow>(
+  rows: readonly T[],
+  selectedIds: readonly string[],
+): string[] {
+  const selected = new Set(selectedIds);
+  return rows.filter((row) => !selected.has(row.id)).map((row) => row.id);
+}
diff --git a/client/platform/desktop/frontend/components/MultiPipeline.vue b/client/platform/desktop/frontend/components/MultiPipeline.vue
index 5e7399611..7f9c7f6b4 100644
--- a/client/platform/desktop/frontend/components/MultiPipeline.vue
+++ b/client/platform/desktop/frontend/components/MultiPipeline.vue
@@ -11,7 +11,6 @@ import { useRoute, useRouter } from 'vue-router/composables';
 import { Pipe, Pipelines, useApi } from 'dive-common/apispec';
 import { parentDatasetId } from 'dive-common/compositeDatasetId';
 import {
-  itemsPerPageOptions,
   stereoPipelineMarker,
   multiCamPipelineMarkers,
   MultiType,
@@ -23,6 +22,7 @@ import {
   pipelineRequiresCalibration,
 } from 'dive-common/pipelineCalibration';
 import PipelineCalibrationWarningIcon from 'dive-common/components/PipelineCalibrationWarningIcon.vue';
+import DatasetPicker from 'dive-common/components/DatasetPicker.vue';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { clientSettings } from 'dive-common/store/settings';
 import { datasets, JsonConfigCache } from '../store/dataset';
@@ -80,14 +80,6 @@ const headersTmpl: DataTableHeader[] = [
     width: 80,
   },
 ];
-const availableDatasetHeaders = headersTmpl.concat(
-  {
-    text: 'Include',
-    value: 'include',
-    sortable: false,
-    width: 80,
-  },
-);
 const stagedDatasetHeaders: DataTableHeader[] = headersTmpl.concat([
   {
     text: 'Remove',
@@ -113,10 +105,8 @@ function computeOutputDatasetName(item: JsonConfigCache) {
   const timeStamp = (new Date()).toISOString().replace(/[:.]/g, '-');
   return `${selectedPipeline.value?.name}_${item.name}_${timeStamp}`;
 }
+/** Every dataset, narrowed to stereo ones once a measurement pipeline type is chosen. */
 function getAvailableItems(): JsonConfigCache[] {
-  if (!selectedPipelineType.value || !selectedPipeline.value) {
-    return [];
-  }
   if (selectedPipelineType.value === stereoPipelineMarker) {
     // Only allow stereo datasets to be included for bulk pipeline
     // operations if the selected pipeline type is a measurement.
@@ -126,10 +116,12 @@ function getAvailableItems(): JsonConfigCache[] {
   }
   return Object.values(datasets.value);
 }
-const availableItems: Ref<JsonConfigCache[]> = ref([]);
-const availableDatasetSearch = ref('');
+const availableItems = computed(() => getAvailableItems());
 const stagedDatasetIds: Ref<string[]> = ref([]);
 const stagedDatasets = computed(() => availableItems.value.filter((item: JsonConfigCache) => stagedDatasetIds.value.includes(item.id)));
+const stagedParentIds = computed(() => [
+  ...new Set(stagedDatasetIds.value.map((id) => parentDatasetId(id))),
+]);
 const calibrationAvailableByDatasetId = ref<Record<string, boolean>>({});
 
 async function refreshCalibrationForDatasets(datasetIds: string[]) {
@@ -146,8 +138,18 @@ async function refreshCalibrationForDatasets(datasetIds: string[]) {
   };
 }
 
+/** Drop staged ids that the current pipeline type no longer offers (e.g. non-stereo under measurement). */
 watch(availableItems, (items) => {
-  refreshCalibrationForDatasets(items.map((item) => item.id));
+  const available = new Set(items.map((item) => item.id));
+  const next = stagedDatasetIds.value.filter((id) => available.has(id));
+  if (next.length !== stagedDatasetIds.value.length) {
+    stagedDatasetIds.value = next;
+  }
+});
+
+/** Calibration status only for what is staged, not the whole library. */
+watch(stagedDatasetIds, (ids) => {
+  refreshCalibrationForDatasets(ids);
 }, { immediate: true });
 
 const runDisabled = computed(() => {
@@ -166,49 +168,30 @@ function isPipelineItemDisabledForCalibration(pipe: Pipe) {
   return pipelineDisabledForMissingCalibration(
     pipe,
     calibrationAvailableByDatasetId.value,
-    availableItems.value.map((dataset) => parentDatasetId(dataset.id)),
+    stagedParentIds.value,
   );
 }
 
-watch(selectedPipeline, () => {
-  availableItems.value = getAvailableItems();
-});
 function toggleStaged(item: JsonConfigCache) {
   if (stagedDatasetIds.value.includes(item.id)) {
     stagedDatasetIds.value = stagedDatasetIds.value.filter((id: string) => id !== item.id);
   } else {
-    stagedDatasetIds.value.push(item.id);
+    stagedDatasetIds.value = stagedDatasetIds.value.concat(item.id);
   }
 }
-function datasetMatchesSearch(item: JsonConfigCache, search: string) {
-  if (!search) {
-    return true;
-  }
-  const record = item as unknown as Record<string, unknown>;
-  return headersTmpl.some((header) => {
-    const value = String(record[header.value] ?? '').toLowerCase();
-    return value.includes(search);
-  });
+/** Stage the picked datasets that are not staged yet. */
+function stageIds(ids: string[]) {
+  const staged = new Set(stagedDatasetIds.value);
+  stagedDatasetIds.value = stagedDatasetIds.value.concat(ids.filter((id) => !staged.has(id)));
 }
-/* Mirrors the table's default search so "select all" only stages what is listed. */
-const unstagedSearchMatches = computed(() => {
-  const search = availableDatasetSearch.value.trim().toLowerCase();
-  return availableItems.value.filter((item) => (
-    !stagedDatasetIds.value.includes(item.id)
-    && datasetMatchesSearch(item, search)
-  ));
-});
-function stageAllAvailable() {
-  stagedDatasetIds.value = stagedDatasetIds.value.concat(
-    unstagedSearchMatches.value.map((item) => item.id),
-  );
+function unstageIds(ids: string[]) {
+  const dropped = new Set(ids);
+  stagedDatasetIds.value = stagedDatasetIds.value.filter((id) => !dropped.has(id));
 }
 
 async function runPipelineForDatasets() {
   const pipeline = selectedPipeline.value;
   if (pipeline !== null) {
-    // Only the staged datasets compatible with (and displayed for) the
-    // selected pipeline; staged ids can hold datasets other pipelines accept.
     const runIds = stagedDatasets.value.map((item: JsonConfigCache) => item.id);
     const results = await Promise.allSettled(
       runIds.map((datasetId: string) => {
@@ -243,7 +226,6 @@ async function runPipelineForDatasets() {
 onBeforeMount(async () => {
   stagedDatasetIds.value = preselectedDatasetIds();
   unsortedPipelines.value = await getPipelineList();
-  availableItems.value = getAvailableItems();
 });
 
 </script>
@@ -251,16 +233,18 @@ onBeforeMount(async () => {
 <template>
   <div>
     <div class="mb-4">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Run a pipeline on multiple datasets
       </v-card-title>
-      <v-card-text>Choose a pipeline to run, then select datasets.</v-card-text>
+      <v-card-text class="px-0">
+        Choose a pipeline to run, then select datasets.
+      </v-card-text>
     </div>
     <div class="mb-4">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Choose a VIAME pipeline
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         <v-row>
           <v-col cols="6">
             <v-select
@@ -321,103 +305,67 @@ onBeforeMount(async () => {
           </v-col>
         </v-row>
       </v-card-text>
-      <div v-if="selectedPipeline">
-        <v-card-title>Datasets staged for selected pipeline</v-card-title>
-        <v-data-table
-          dense
-          v-bind="{
-            headers: selectedPipeline && pipelineCreatesNewDataset(selectedPipeline)
-              ? createNewDatasetHeaders : stagedDatasetHeaders,
-            items: stagedDatasets,
-          }"
-          :items-per-page.sync="clientSettings.rowsPerPage"
-          hide-default-footer
-          :hide-default-header="stagedDatasets.length === 0"
-          no-data-text="Select datasets from the table below"
-        >
-          <template #[`item.remove`]="{ item }">
-            <v-btn
-              color="error"
-              x-small
-              @click="toggleStaged(item)"
-            >
-              <v-icon>mdi-minus</v-icon>
-            </v-btn>
-          </template>
-          <template #[`item.output`]="{ item }">
-            <b>{{ computeOutputDatasetName(item) }}</b>
-          </template>
-        </v-data-table>
-      </div>
-      <v-row class="mt-7">
-        <v-spacer />
-        <v-col cols="auto">
-          <v-btn
-            :disabled="runDisabled"
-            color="primary"
-            @click="runPipelineForDatasets"
-          >
-            Run pipeline for ({{ stagedDatasets.length }}) Datasets
-          </v-btn>
-        </v-col>
-      </v-row>
     </div>
-    <div
-      v-if="selectedPipeline"
-      class="mb-4"
-    >
-      <v-card-title class="text-h4">
+    <div class="mb-4">
+      <v-card-title class="text-h4 px-0">
         Available datasets
       </v-card-title>
-      <v-card-text>These datasets are compatible with the chosen pipeline.</v-card-text>
-      <v-row class="mb-2">
-        <v-col cols="6">
-          <v-text-field
-            v-model="availableDatasetSearch"
-            append-icon="mdi-magnify"
-            label="Search"
-            single-line
-            hide-details
-          />
-        </v-col>
-        <v-spacer />
-        <v-col
-          cols="auto"
-          class="align-self-end"
-        >
-          <v-btn
-            :disabled="unstagedSearchMatches.length === 0"
-            color="success"
-            small
-            @click="stageAllAvailable"
-          >
-            <v-icon left>
-              mdi-check-all
-            </v-icon>
-            Select all
-          </v-btn>
-        </v-col>
-      </v-row>
+      <v-card-text class="px-0">
+        Add the datasets to run the pipeline on. Measurement pipelines list stereo datasets only.
+      </v-card-text>
+      <DatasetPicker
+        :items="availableItems"
+        :selected-ids="stagedDatasetIds"
+        :headers="headersTmpl"
+        no-data-text="No datasets in the library are compatible with this pipeline."
+        @add="stageIds([$event])"
+        @add-many="stageIds"
+        @remove="unstageIds([$event])"
+        @remove-many="unstageIds"
+      />
+    </div>
+    <div class="mb-4 selected-datasets">
+      <v-card-title class="text-h4 px-0">
+        Selected datasets
+      </v-card-title>
       <v-data-table
         dense
-        v-bind="{ headers: availableDatasetHeaders, items: availableItems }"
-        :footer-props="{ itemsPerPageOptions }"
+        v-bind="{
+          headers: selectedPipeline && pipelineCreatesNewDataset(selectedPipeline)
+            ? createNewDatasetHeaders : stagedDatasetHeaders,
+          items: stagedDatasets,
+        }"
         :items-per-page.sync="clientSettings.rowsPerPage"
-        :search="availableDatasetSearch"
-        no-data-text="No compatible datasets found for the selected pipeline."
+        hide-default-footer
+        :hide-default-header="stagedDatasets.length === 0"
+        no-data-text="Add datasets from the list above."
       >
-        <template #[`item.include`]="{ item }">
+        <template #[`item.remove`]="{ item }">
           <v-btn
-            :key="item.name"
-            :disabled="stagedDatasetIds.includes(item.id)"
-            color="success"
+            color="error"
             x-small
             @click="toggleStaged(item)"
           >
-            <v-icon>mdi-plus</v-icon>
+            <v-icon>mdi-minus</v-icon>
           </v-btn>
         </template>
+        <template #[`item.output`]="{ item }">
+          <b>{{ computeOutputDatasetName(item) }}</b>
+        </template>
       </v-data-table>
+      <v-row class="mt-4">
+        <v-spacer />
+        <v-col cols="auto">
+          <v-btn
+            :disabled="runDisabled"
+            color="primary"
+            :title="selectedPipeline ? '' : 'Choose a pipeline first'"
+            @click="runPipelineForDatasets"
+          >
+            Run pipeline for ({{ stagedDatasets.length }}) Datasets
+          </v-btn>
+        </v-col>
+      </v-row>
     </div>
   </div>
 </template>
diff --git a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
index cf38b2cac..42abf18ee 100644
--- a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
+++ b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
@@ -12,11 +12,12 @@ import {
   watch,
 } from 'vue';
 import {
-  DatasetConfig, Pipelines, TrainingConfigs, useApi, Pipe,
+  Pipelines, TrainingConfigs, useApi, Pipe,
 } from 'dive-common/apispec';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { itemsPerPageOptions, simplifyTrainingName } from 'dive-common/constants';
 import { clientSettings } from 'dive-common/store/settings';
+import DatasetPicker from 'dive-common/components/DatasetPicker.vue';
 
 import { useRoute, useRouter } from 'vue-router/composables';
 import { DesktopJob, RunTraining } from 'platform/desktop/constants';
@@ -31,6 +32,7 @@ function joinPath(dir: string, filename: string) {
 }
 
 export default defineComponent({
+  components: { DatasetPicker },
   setup() {
     const {
       runTraining, getPipelineList, deleteTrainedPipeline, getTrainingConfigurations, exportTrainedPipeline,
@@ -128,7 +130,7 @@ export default defineComponent({
     ];
 
     const data = reactive({
-      stagedItems: {} as Record<string, DatasetConfig>,
+      stagedItems: {} as Record<string, JsonConfigCache>,
       trainingOutputName: '',
       selectedTrainingConfig: 'foo.whatever',
       fineTuneTraining: false,
@@ -186,7 +188,7 @@ export default defineComponent({
       return [];
     });
 
-    function toggleStaged(meta: DatasetConfig) {
+    function toggleStaged(meta: JsonConfigCache) {
       if (data.stagedItems[meta.id]) {
         del(data.stagedItems, meta.id);
       } else {
@@ -194,16 +196,24 @@ export default defineComponent({
       }
     }
     const availableItems = computed(() => Object.values(datasets.value)
-      .filter((item) => item.subType === null)
-      .map((item) => ({
-        ...item,
-        included: item.id in data.stagedItems,
-      })));
+      .filter((item) => item.subType === null));
 
     const stagedItems = computed(() => Object.values(data.stagedItems));
 
-    function getAvailableItemClass({ included }: JsonConfigCache & { included: boolean }) {
-      return included ? 'disabled-row' : '';
+    const stagedIds = computed(() => Object.keys(data.stagedItems));
+
+    /** Stage the picked datasets that are not staged yet. */
+    function stageIds(ids: string[]) {
+      ids.forEach((id) => {
+        const meta = datasets.value[id];
+        if (meta && !data.stagedItems[id]) toggleStaged(meta);
+      });
+    }
+
+    function unstageIds(ids: string[]) {
+      ids.forEach((id) => {
+        if (data.stagedItems[id]) toggleStaged(data.stagedItems[id]);
+      });
     }
 
     const isReadyToTrain = computed(() => (
@@ -343,7 +353,9 @@ export default defineComponent({
       labelFile,
       clearLabelText,
       toggleStaged,
-      getAvailableItemClass,
+      stagedIds,
+      stageIds,
+      unstageIds,
       deleteModel,
       exportModel,
       simplifyTrainingName,
@@ -375,17 +387,7 @@ export default defineComponent({
       },
       available: {
         items: availableItems,
-        headers: headersTmpl.concat({
-          text: 'View',
-          value: 'view',
-          sortable: false,
-          width: 80,
-        }, {
-          text: 'Include',
-          value: 'action',
-          sortable: false,
-          width: 80,
-        }),
+        headers: headersTmpl,
       },
       staged: {
         items: stagedItems,
@@ -404,11 +406,11 @@ export default defineComponent({
 <template>
   <div class="multitraining-menu">
     <div class="mb-4">
-      <v-card-title class="text-h4">
-        Staged for training ({{ staged.items.value.length }})
+      <v-card-title class="text-h4 px-0">
+        Training configuration
       </v-card-title>
-      <v-card-text>
-        Add datasets to the staging area and choose a training configuration.
+      <v-card-text class="px-0">
+        Name the model and choose a configuration, then add datasets below.
       </v-card-text>
       <v-row
         class="mt-4 pt-0"
@@ -483,12 +485,74 @@ export default defineComponent({
         </v-col>
         <v-spacer />
       </v-row>
+      <div class="d-flex flex-row mt-4">
+        <v-checkbox
+          v-model="data.annotatedFramesOnly"
+          label="Use annotated frames only"
+          dense
+          hint="Train only on frames with groundtruth and ignore frames without annotations"
+          persistent-hint
+          class="py-0 my-0"
+        />
+      </div>
+      <div class="d-flex flex-row mt-2">
+        <v-checkbox
+          v-model="data.fineTuneTraining"
+          label="Fine Tuning"
+          hint="Fine tune an existing model"
+        />
+        <v-spacer />
+        <v-select
+          v-if="data.fineTuneTraining"
+          v-model="data.selectedFineTune"
+          :items="modelNames"
+          label="Fine Tune Model"
+        />
+      </div>
+    </div>
+    <div>
+      <v-card-title class="text-h4 px-0">
+        Available for training
+      </v-card-title>
+      <v-card-text class="px-0">
+        These datasets meet the requirements for the chosen training configuration.
+      </v-card-text>
+      <DatasetPicker
+        :items="available.items.value"
+        :selected-ids="stagedIds"
+        :headers="available.headers"
+        no-data-text="No data meets criteria for chosen configuration"
+        @add="stageIds([$event])"
+        @add-many="stageIds"
+        @remove="unstageIds([$event])"
+        @remove-many="unstageIds"
+      >
+        <template #row-actions="{ item }">
+          <v-btn
+            icon
+            x-small
+            color="info"
+            title="Open in the viewer"
+            @click="$router.push({ name: 'viewer', params: { id: item.id } })"
+          >
+            <v-icon small>
+              mdi-eye
+            </v-icon>
+          </v-btn>
+        </template>
+      </DatasetPicker>
+    </div>
+
+    <div class="mb-4 selected-datasets">
+      <v-card-title class="text-h4 px-0">
+        Selected datasets ({{ staged.items.value.length }})
+      </v-card-title>
       <v-data-table
         v-bind="{ headers: staged.headers, items: staged.items.value }"
         hide-default-footer
         dense
         :hide-default-header="staged.items.value.length === 0"
-        no-data-text="No data chosen for training."
+        no-data-text="Add datasets from the list above."
       >
         <template #[`item.action`]="{ item }">
           <v-btn
@@ -501,15 +565,7 @@ export default defineComponent({
           </v-btn>
         </template>
       </v-data-table>
-      <div class="d-flex flex-row mt-7">
-        <v-checkbox
-          v-model="data.annotatedFramesOnly"
-          label="Use annotated frames only"
-          dense
-          hint="Train only on frames with groundtruth and ignore frames without annotations"
-          persistent-hint
-          class="py-0 my-0"
-        />
+      <div class="d-flex flex-row mt-4">
         <v-spacer />
         <v-btn
           :disabled="!isReadyToTrain"
@@ -519,26 +575,13 @@ export default defineComponent({
           Train on ({{ staged.items.value.length }}) Datasets
         </v-btn>
       </div>
-      <div class="d-flex flex-row mt-7">
-        <v-checkbox
-          v-model="data.fineTuneTraining"
-          label="Fine Tuning"
-          hint="Fine tune an existing model"
-        />
-        <v-spacer />
-        <v-select
-          v-if="data.fineTuneTraining"
-          v-model="data.selectedFineTune"
-          :items="modelNames"
-          label="Fine Tune Model"
-        />
-      </div>
     </div>
+
     <div v-if="resumable.items.value.length">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Interrupted training runs
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         These runs did not finish, but their intermediate files are still on disk.
         Resuming continues from the last saved training state.
       </v-card-text>
@@ -576,50 +619,10 @@ export default defineComponent({
     </div>
 
     <div>
-      <v-card-title class="text-h4">
-        Available for training
-      </v-card-title>
-      <v-card-text>
-        These datasets meet the requirements for the chosen training configuration.
-      </v-card-text>
-      <v-data-table
-        dense
-        v-bind="{ headers: available.headers, items: available.items.value }"
-        :footer-props="{ itemsPerPageOptions }"
-        :items-per-page.sync="clientSettings.rowsPerPage"
-        :item-class="getAvailableItemClass"
-        no-data-text="No data meets criteria for chosen configuration"
-      >
-        <template #[`item.action`]="{ item }">
-          <v-btn
-            :key="item.name"
-            :disabled="item.included"
-            color="success"
-            x-small
-            @click="toggleStaged(item)"
-          >
-            <v-icon>mdi-plus</v-icon>
-          </v-btn>
-        </template>
-        <template #[`item.view`]="{ item }">
-          <v-btn
-            :key="item.name"
-            :disabled="item.included"
-            color="info"
-            x-small
-            @click="$router.push({ name: 'viewer', params: { id: item.id } })"
-          >
-            <v-icon>mdi-eye</v-icon>
-          </v-btn>
-        </template>
-      </v-data-table>
-    </div>
-
-    <div>
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Trained models
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         Here are all your trained models
       </v-card-text>
       <v-data-table
@@ -652,11 +655,3 @@ export default defineComponent({
     </div>
   </div>
 </template>
-
-<style lang="scss">
-.multitraining-menu {
-  .disabled-row {
-    color: #444444;
-  }
-}
-</style>