diff --git a/web/packages/studio/src/components/DataDesignerJobActionsMenu/index.tsx b/web/packages/studio/src/components/DataDesignerJobActionsMenu/index.tsx
new file mode 100644
index 0000000000..b5d23fee2a
--- /dev/null
+++ b/web/packages/studio/src/components/DataDesignerJobActionsMenu/index.tsx
@@ -0,0 +1,126 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { CJobCancellableStatuses } from '@nemo/common/src/constants/query';
+import {
+  getDataDesignerListCreateJobsQueryKey,
+  useDataDesignerCancelCreateJob,
+} from '@nemo/sdk/generated/data-designer/api';
+import type { CreateJob as DataDesignerJob } from '@nemo/sdk/generated/data-designer/schema';
+import { DeleteJobModal } from '@studio/components/dataViews/DataDesignerJobsDataView/DeleteJobModal';
+import { buildClonedJobRequest } from '@studio/components/NewDataDesignerJobForm/utils';
+import {
+  type QuickActionItem,
+  QuickActionsMenuRoot,
+} from '@studio/components/QuickActionsMenu/QuickActionsMenuRoot';
+import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
+import { getDataDesignerJobDetailsRoute, getNewDataDesignerJobRoute } from '@studio/routes/utils';
+import { useQueryClient } from '@tanstack/react-query';
+import { type FC, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface DataDesignerJobActionsMenuProps {
+  job: DataDesignerJob;
+  /** Include a "View details" entry. Used in the table row, omitted on the details page. */
+  includeViewDetails?: boolean;
+  /** Called after the job is successfully deleted, e.g. to navigate away from the details page. */
+  onDeleted?: () => void;
+  /** Surface a cancel error (or `undefined` to clear) so the caller can render it. */
+  onCancelError?: (message: string | undefined) => void;
+}
+
+/**
+ * Quick-actions menu for a single Data Designer job: View details (optional), Clone, Cancel
+ * (when cancellable), and Delete. Shared by the jobs table and the job details page so both
+ * expose the same actions. Owns its own delete modal; cancel errors are surfaced via callback.
+ */
+export const DataDesignerJobActionsMenu: FC<DataDesignerJobActionsMenuProps> = ({
+  job,
+  includeViewDetails = false,
+  onDeleted,
+  onCancelError,
+}) => {
+  const navigate = useNavigate();
+  const workspace = useWorkspaceFromPath();
+  const queryClient = useQueryClient();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const cancelJobMutation = useDataDesignerCancelCreateJob({
+    mutation: {
+      onSuccess: () => {
+        queryClient.resetQueries({
+          queryKey: getDataDesignerListCreateJobsQueryKey(workspace),
+        });
+        onCancelError?.(undefined);
+      },
+      onError: (error) => {
+        onCancelError?.(error instanceof Error ? error.message : 'Failed to cancel job');
+      },
+    },
+  });
+
+  const handleClone = useCallback(() => {
+    const cloneJobRequest = buildClonedJobRequest(job);
+    if (!cloneJobRequest) return;
+    navigate(getNewDataDesignerJobRoute(workspace), {
+      state: { cloneJobRequest },
+    });
+  }, [job, navigate, workspace]);
+
+  const handleCancel = useCallback(async () => {
+    if (!job.workspace || !job.name) return;
+    try {
+      onCancelError?.(undefined);
+      await cancelJobMutation.mutateAsync({ workspace: job.workspace, name: job.name });
+    } catch {
+      // Error is surfaced via the mutation's onError callback.
+    }
+  }, [job.workspace, job.name, cancelJobMutation, onCancelError]);
+
+  const isCancellable = job.status != null && CJobCancellableStatuses.includes(job.status);
+
+  const actions: QuickActionItem[] = [
+    ...(includeViewDetails
+      ? [
+          {
+            label: 'View details',
+            onSelect: () => {
+              if (job.name) {
+                navigate(getDataDesignerJobDetailsRoute(workspace, job.name));
+              }
+            },
+          },
+        ]
+      : []),
+    {
+      label: 'Clone',
+      onSelect: handleClone,
+    },
+    ...(isCancellable
+      ? [
+          {
+            label: 'Cancel',
+            onSelect: handleCancel,
+          },
+        ]
+      : []),
+    {
+      label: 'Delete',
+      onSelect: () => setShowDeleteModal(true),
+      danger: true,
+    },
+  ];
+
+  return (
+    <>
+      <QuickActionsMenuRoot actions={actions} />
+      {showDeleteModal && (
+        <DeleteJobModal
+          jobs={[job]}
+          onClose={() => setShowDeleteModal(false)}
+          onDeleted={onDeleted}
+        />
+      )}
+    </>
+  );
+};
diff --git a/web/packages/studio/src/components/DatasetFileManagementSidePanel/index.test.tsx b/web/packages/studio/src/components/DatasetFileManagementSidePanel/index.test.tsx
index bbabfab926..03dedfcd9a 100644
--- a/web/packages/studio/src/components/DatasetFileManagementSidePanel/index.test.tsx
+++ b/web/packages/studio/src/components/DatasetFileManagementSidePanel/index.test.tsx
@@ -113,4 +113,30 @@ describe('DatasetFileManagementSidePanel', () => {
 
     expect(await screen.findByText('No Files')).toBeInTheDocument();
   });
+
+  it('shows subfolder breadcrumb segments when navigating into a folder', async () => {
+    renderComponent({ currentFolder: 'folder1/subfolder' });
+
+    // Breadcrumb segments for each part of the current folder path are rendered
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'folder1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'subfolder' })).toBeInTheDocument();
+    });
+
+    // The explorer (search/toolbar) is always rendered
+    expect(screen.getByTestId('dataset-details-search-input')).toBeInTheDocument();
+  });
+
+  it('navigates to the fileset root when the fileset breadcrumb is clicked', async () => {
+    const user = userEvent.setup();
+    const onFolderChange = vi.fn();
+    renderComponent({
+      currentFolder: 'folder1',
+      onFolderChange,
+    });
+
+    await user.click(await screen.findByRole('button', { name: 'test-dataset' }));
+
+    expect(onFolderChange).toHaveBeenCalledWith();
+  });
 });
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/JobBasics.tsx b/web/packages/studio/src/components/NewDataDesignerJobForm/JobBasics.tsx
new file mode 100644
index 0000000000..fb89a812fb
--- /dev/null
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/JobBasics.tsx
@@ -0,0 +1,69 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ControlledTextArea } from '@nemo/common/src/components/form/ControlledTextArea';
+import { ControlledTextInput } from '@nemo/common/src/components/form/ControlledTextInput';
+import { Flex, Panel, Stack, Text } from '@nvidia/foundations-react-core';
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+
+export interface JobBasicsProps<T extends FieldValues = FieldValues> {
+  control: Control<T>;
+  nameName: Path<T>;
+  rowsName: Path<T>;
+  descriptionName: Path<T>;
+  disabled?: boolean;
+}
+
+/**
+ * "Job basics" card: name the dataset, set the full-run record count, and describe the job.
+ */
+export function JobBasics<T extends FieldValues>({
+  control,
+  nameName,
+  rowsName,
+  descriptionName,
+  disabled = false,
+}: JobBasicsProps<T>) {
+  return (
+    <Panel elevation="high" density="standard">
+      <Stack gap="density-lg">
+        <Stack gap="density-xs">
+          <Text kind="label/bold/lg">Job basics</Text>
+          <Text kind="body/regular/sm" className="text-secondary">
+            Name your fileset and set the full-run size.
+          </Text>
+        </Stack>
+
+        <Flex gap="density-md" align="start" className="w-full">
+          <Stack className="min-w-0 flex-1">
+            <ControlledTextInput
+              label="Fileset name"
+              disabled={disabled}
+              useControllerProps={{ name: nameName, control }}
+            />
+          </Stack>
+          <Stack className="w-[200px] shrink-0">
+            <ControlledTextInput
+              label="Records to generate"
+              type="number"
+              min={1}
+              step={1}
+              required
+              disabled={disabled}
+              useControllerProps={{ name: rowsName, control }}
+            />
+          </Stack>
+        </Flex>
+
+        <ControlledTextArea
+          label="Description"
+          rows={3}
+          placeholder="What this fileset is for and how it will be used…"
+          className="w-full"
+          disabled={disabled}
+          useControllerProps={{ name: descriptionName, control }}
+        />
+      </Stack>
+    </Panel>
+  );
+}
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/JobRequestGenerator.tsx b/web/packages/studio/src/components/NewDataDesignerJobForm/JobRequestGenerator.tsx
index 32c7efe53d..4ebac32948 100644
--- a/web/packages/studio/src/components/NewDataDesignerJobForm/JobRequestGenerator.tsx
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/JobRequestGenerator.tsx
@@ -23,8 +23,8 @@ import {
   sanitizeJobRequestName,
 } from '@studio/components/NewDataDesignerJobForm/utils';
 import type { ChatCompletion } from 'openai/resources/index.mjs';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { type Control, type FieldValues, type Path, useForm, useWatch } from 'react-hook-form';
+import { useCallback, useMemo, useState } from 'react';
+import { type Control, type FieldValues, type Path, useWatch } from 'react-hook-form';
 
 const ERROR_NO_TOOL_CALL =
   'Model did not return a tool call. Try again or choose a different model.';
@@ -55,13 +55,11 @@ function getJobRequestFromChatResponse(
   return { jobRequest: sanitizeJobRequestName(applied) };
 }
 
-interface JobRequestGeneratorFormFields {
-  jsonContent: string;
-}
-
 export interface JobRequestGeneratorProps<T extends FieldValues = FieldValues> {
   control: Control<T>;
   descriptionName: Path<T>;
+  /** Form field holding the (editable) job request JSON. Owned by the parent form. */
+  jsonContentName: Path<T>;
   descriptionRules?: object;
   descriptionFormFieldProps?: { slotInfo?: string };
   /** Current workspace (used when modelRef is just a model name with no slash). */
@@ -69,45 +67,36 @@ export interface JobRequestGeneratorProps<T extends FieldValues = FieldValues> {
   modelRef: string;
   provider: string;
   servedModelName: string;
-  onJobRequestChange: (jobRequest: DataDesignerJobRequest | null) => void;
+  /** Write generated JSON back into the parent's jsonContent field. */
+  setJsonContent: (value: string) => void;
   disabled?: boolean;
 }
 
 /**
  * Generates a Data Designer job request JSON via LLM tool use. Renders the description
  * textarea with Generate button below it, and the JSON editor next to it (side by side).
- * Reports the current (parsed) job request to the parent via onJobRequestChange.
+ * The JSON lives in the parent form's `jsonContentName` field — read here via `useWatch` and
+ * written back through `setJsonContent` — so the parent form stays the single source of truth.
  */
 export function JobRequestGenerator<T extends FieldValues>({
-  control: parentControl,
+  control,
   descriptionName,
+  jsonContentName,
   descriptionRules,
   descriptionFormFieldProps,
   workspace,
   modelRef,
   provider,
   servedModelName,
-  onJobRequestChange,
+  setJsonContent,
   disabled = false,
 }: JobRequestGeneratorProps<T>) {
-  const description = useWatch({ control: parentControl, name: descriptionName }) as string;
+  const description = useWatch({ control, name: descriptionName }) as string;
+  const jsonContent = (useWatch({ control, name: jsonContentName }) as string) ?? '';
   const chatCompletion = useChatCompletion();
   const [generationError, setGenerationError] = useState<string | null>(null);
-  const [parseError, setParseError] = useState<string | null>(null);
 
-  const { control, watch, setValue } = useForm<JobRequestGeneratorFormFields>({
-    defaultValues: { jsonContent: '' },
-  });
-  const jsonContent = watch('jsonContent') ?? '';
-  const onJobRequestChangeRef = useRef(onJobRequestChange);
-  onJobRequestChangeRef.current = onJobRequestChange;
-
-  // Sync parsed job request to parent when JSON or model context changes
-  useEffect(() => {
-    const result = parseJsonContentToJobRequest(jsonContent);
-    setParseError(result.error ?? null);
-    onJobRequestChangeRef.current(result.jobRequest);
-  }, [jsonContent]);
+  const parseError = useMemo(() => parseJsonContentToJobRequest(jsonContent).error, [jsonContent]);
 
   const runGeneration = useCallback(async () => {
     setGenerationError(null);
@@ -133,13 +122,11 @@ export function JobRequestGenerator<T extends FieldValues>({
         return;
       }
 
-      setValue('jsonContent', JSON.stringify(result.jobRequest, null, 2));
-      onJobRequestChangeRef.current(result.jobRequest);
+      setJsonContent(JSON.stringify(result.jobRequest, null, 2));
     } catch (err) {
       setGenerationError(getErrorMessage(err, 'Generation failed.'));
-      onJobRequestChangeRef.current(null);
     }
-  }, [modelRef, provider, servedModelName, workspace, description, chatCompletion, setValue]);
+  }, [modelRef, provider, servedModelName, workspace, description, chatCompletion, setJsonContent]);
 
   const hasContent = !!jsonContent.trim();
   const isGenerating = chatCompletion.isPending;
@@ -155,7 +142,7 @@ export function JobRequestGenerator<T extends FieldValues>({
           className="w-full"
           useControllerProps={{
             name: descriptionName,
-            control: parentControl,
+            control,
             rules: descriptionRules,
           }}
           formFieldProps={descriptionFormFieldProps}
@@ -182,7 +169,7 @@ export function JobRequestGenerator<T extends FieldValues>({
           rows={16}
           className="w-full font-mono text-sm"
           useControllerProps={{
-            name: 'jsonContent',
+            name: jsonContentName,
             control,
           }}
           formFieldProps={{
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/index.test.tsx b/web/packages/studio/src/components/NewDataDesignerJobForm/index.test.tsx
index 693192f608..b63b97fa02 100644
--- a/web/packages/studio/src/components/NewDataDesignerJobForm/index.test.tsx
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/index.test.tsx
@@ -24,11 +24,11 @@ vi.mock('@studio/components/NewDataDesignerJobForm/JobRequestGenerator', async (
   const { Controller } = await import('react-hook-form');
   return {
     JobRequestGenerator: ({
-      onJobRequestChange,
+      setJsonContent,
       control,
       descriptionName,
     }: {
-      onJobRequestChange: (req: DataDesignerJobRequest | null) => void;
+      setJsonContent: (value: string) => void;
       control: Parameters<typeof Controller>[0]['control'];
       descriptionName: string;
       [key: string]: unknown;
@@ -42,13 +42,15 @@ vi.mock('@studio/components/NewDataDesignerJobForm/JobRequestGenerator', async (
         <button
           type="button"
           onClick={() =>
-            onJobRequestChange({
-              name: 'generated-job',
-              spec: {
-                num_records: 50,
-                config: { columns: [], model_configs: [] },
-              },
-            } as DataDesignerJobRequest)
+            setJsonContent(
+              JSON.stringify({
+                name: 'generated-job',
+                spec: {
+                  num_records: 50,
+                  config: { columns: [], model_configs: [] },
+                },
+              } satisfies DataDesignerJobRequest)
+            )
           }
         >
           Simulate Generate
@@ -130,7 +132,9 @@ describe('NewDataDesignerJobForm', () => {
 
       // Generated config set num_records=50, which also synced rows field to 50.
       // User overrides rows to 25.
-      const rowsInput = screen.getByRole('spinbutton', { name: /rows/i });
+      const rowsInput = screen.getByRole('spinbutton', {
+        name: /records to generate/i,
+      });
       fireEvent.change(rowsInput, { target: { value: '25' } });
 
       await user.click(screen.getByRole('button', { name: 'Create Job' }));
@@ -151,7 +155,7 @@ describe('NewDataDesignerJobForm', () => {
 
       // Generated config set num_records=50 and synced rows field to 50.
       // User does not change rows.
-      expect(screen.getByRole('spinbutton', { name: /rows/i })).toHaveValue(50);
+      expect(screen.getByRole('spinbutton', { name: /records to generate/i })).toHaveValue(50);
 
       await user.click(screen.getByRole('button', { name: 'Create Job' }));
 
@@ -170,7 +174,7 @@ describe('NewDataDesignerJobForm', () => {
 
       render(<NewDataDesignerJobForm />);
       await screen.findByRole('button', { name: 'Create Job' });
-      await user.type(screen.getByRole('textbox', { name: /^name/i }), 'my-custom-name');
+      await user.type(screen.getByRole('textbox', { name: /fileset name/i }), 'my-custom-name');
       await user.type(screen.getByLabelText('Data description'), 'At least ten characters');
       await user.click(screen.getByRole('button', { name: 'Simulate Generate' }));
 
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/index.tsx b/web/packages/studio/src/components/NewDataDesignerJobForm/index.tsx
index 91789f3a77..ad9d68101f 100644
--- a/web/packages/studio/src/components/NewDataDesignerJobForm/index.tsx
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/index.tsx
@@ -3,27 +3,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ErrorMessage } from '@nemo/common/src/components/ErrorMessage';
-import { ControlledTextInput } from '@nemo/common/src/components/form/ControlledTextInput';
 import { LoadingButton } from '@nemo/common/src/components/LoadingButton';
 import { useDataDesignerCreateJob } from '@nemo/sdk/generated/data-designer/api';
 import type { CreateJobRequest as DataDesignerJobRequest } from '@nemo/sdk/generated/data-designer/schema';
 import { useModelsListProviders } from '@nemo/sdk/generated/platform/api';
-import {
-  Button,
-  CodeSnippet,
-  Divider,
-  Flex,
-  Grid,
-  Panel,
-  Stack,
-  Text,
-} from '@nvidia/foundations-react-core';
+import { Button, CodeSnippet, Flex, Panel, Stack, Text } from '@nvidia/foundations-react-core';
+import { JobBasics } from '@studio/components/NewDataDesignerJobForm/JobBasics';
 import { JobRequestGenerator } from '@studio/components/NewDataDesignerJobForm/JobRequestGenerator';
 import { formatPreviewLogsForDisplay } from '@studio/components/NewDataDesignerJobForm/previewApi';
 import { usePreview } from '@studio/components/NewDataDesignerJobForm/usePreview';
 import {
   type DataDesignerModelOption,
+  getCloneJobRequestFromState,
   modelsFromProviders,
+  parseJsonContentToJobRequest,
   sanitizeJobRequestName,
 } from '@studio/components/NewDataDesignerJobForm/utils';
 import { DEFAULT_BUILD_MODEL_NAME, DEFAULT_LARGE_PAGE_SIZE } from '@studio/constants/constants';
@@ -33,15 +26,15 @@ import {
   getDataDesignerJobListRoute,
   getWorkspaceInferenceProvidersRoute,
 } from '@studio/routes/utils';
-import { type FC, useCallback, useMemo, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { type FC, useCallback, useEffect, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { useAuth } from 'react-oidc-context';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
 export type { DataDesignerModelOption };
 
-const newDataDesignerJobFormSchema = z.object({
+const sharedFields = {
   name: z
     .string()
     .refine(
@@ -49,6 +42,20 @@ const newDataDesignerJobFormSchema = z.object({
       'Name must not contain spaces. Use hyphens or underscores (e.g. my-data-job).'
     ),
   jobDescription: z.string(),
+  modelRef: z.string().min(1, 'Please select a model'),
+  rows: z.number({ required_error: 'Rows is required' }).min(1, 'Must be at least 1'),
+  inferenceSecret: z.string().optional(),
+  // Editable job request JSON. Must contain a valid config before submit.
+  jsonContent: z
+    .string()
+    .refine(
+      (value) => !!parseJsonContentToJobRequest(value).jobRequest?.spec?.config,
+      'Generate or provide valid job JSON before creating.'
+    ),
+};
+
+const newDataDesignerJobFormSchema = z.object({
+  ...sharedFields,
   description: z
     .string()
     .min(1, 'Description is required')
@@ -56,9 +63,13 @@ const newDataDesignerJobFormSchema = z.object({
       10,
       'Please provide at least a short description (e.g. "100 rows of product reviews with sentiment")'
     ),
-  modelRef: z.string().min(1, 'Please select a model'),
-  rows: z.number({ required_error: 'Rows is required' }).min(1, 'Must be at least 1'),
-  inferenceSecret: z.string().optional(),
+});
+
+// When cloning, the JSON config is pre-filled, so the natural-language description used for
+// generation is optional — the user can submit the cloned config without describing it again.
+const cloneDataDesignerJobFormSchema = z.object({
+  ...sharedFields,
+  description: z.string(),
 });
 
 export type NewDataDesignerJobFormFields = z.infer<typeof newDataDesignerJobFormSchema>;
@@ -66,18 +77,33 @@ export type NewDataDesignerJobFormFields = z.infer<typeof newDataDesignerJobForm
 export const NewDataDesignerJobForm: FC = () => {
   const workspace = useWorkspaceFromPath();
   const navigate = useNavigate();
+  const { state } = useLocation();
   const { user } = useAuth();
 
   const modelRef = `${workspace}/${DEFAULT_BUILD_MODEL_NAME}`;
 
-  const { control, handleSubmit, setValue } = useForm<NewDataDesignerJobFormFields>({
-    resolver: zodResolver(newDataDesignerJobFormSchema),
+  const clonedJobRequest = useMemo(() => getCloneJobRequestFromState(state), [state]);
+  const isClone = clonedJobRequest != null;
+  const initialJsonContent = useMemo(
+    () => (clonedJobRequest ? JSON.stringify(clonedJobRequest, null, 2) : ''),
+    [clonedJobRequest]
+  );
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = useForm<NewDataDesignerJobFormFields>({
+    resolver: zodResolver(isClone ? cloneDataDesignerJobFormSchema : newDataDesignerJobFormSchema),
     defaultValues: {
-      name: '',
-      jobDescription: '',
+      name: clonedJobRequest?.name ?? '',
+      jobDescription: clonedJobRequest?.description ?? '',
       description: '',
       modelRef,
-      rows: 100,
+      rows: clonedJobRequest?.spec?.num_records ?? 100,
+      jsonContent: initialJsonContent,
     },
   });
 
@@ -93,22 +119,24 @@ export const NewDataDesignerJobForm: FC = () => {
   const selectedModel = models?.find((m) => m.id === modelRef);
   const modelNotFound = !isLoadingModels && !selectedModel;
 
-  const [jobRequest, setJobRequest] = useState<DataDesignerJobRequest | null>(null);
-  const jobRequestRef = useRef<DataDesignerJobRequest | null>(null);
-  jobRequestRef.current = jobRequest; // keep ref in sync so usePreview's getCurrentConfig() sees latest
-
-  const handleJobRequestChange = useCallback(
-    (next: DataDesignerJobRequest | null) => {
-      jobRequestRef.current = next;
-      setJobRequest(next);
-      if (next?.spec?.num_records != null) {
-        setValue('rows', next.spec.num_records);
-      }
-    },
+  const setJsonContent = useCallback(
+    (value: string) => setValue('jsonContent', value, { shouldDirty: true }),
     [setValue]
   );
 
-  const getCurrentConfig = useCallback(() => jobRequestRef.current?.spec?.config, []);
+  const watchedJsonContent = useWatch({ control, name: 'jsonContent' });
+  useEffect(() => {
+    const numRecords = parseJsonContentToJobRequest(watchedJsonContent ?? '').jobRequest?.spec
+      ?.num_records;
+    if (numRecords != null) {
+      setValue('rows', numRecords);
+    }
+  }, [watchedJsonContent, setValue]);
+
+  const getCurrentConfig = useCallback(
+    () => parseJsonContentToJobRequest(getValues('jsonContent')).jobRequest?.spec?.config,
+    [getValues]
+  );
   const { previewLogs, isPreviewing, runPreview } = usePreview({
     workspace,
     accessToken: user?.access_token ?? undefined,
@@ -121,7 +149,7 @@ export const NewDataDesignerJobForm: FC = () => {
 
   const onSubmit = useCallback(
     async (fields: NewDataDesignerJobFormFields) => {
-      const current = jobRequestRef.current;
+      const current = parseJsonContentToJobRequest(fields.jsonContent).jobRequest;
       if (!current?.spec?.config) return;
 
       const fromSpec = current.spec.num_records;
@@ -185,6 +213,14 @@ export const NewDataDesignerJobForm: FC = () => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Stack gap="density-2xl">
+        <JobBasics
+          control={control}
+          nameName="name"
+          rowsName="rows"
+          descriptionName="jobDescription"
+          disabled={isPreviewing || isSubmitting}
+        />
+
         <Panel
           elevation="high"
           density="standard"
@@ -214,87 +250,35 @@ export const NewDataDesignerJobForm: FC = () => {
             </Flex>
           }
         >
-          <Stack gap="density-2xl">
-            {/* Job Details */}
-            <Flex gap="density-2xl" align="start">
-              <Stack className="w-2/5 shrink-0" gap="density-xs">
-                <Text kind="label/bold/lg">Job Details</Text>
-                <Text kind="body/regular/sm">
-                  Give this job a name and description to identify it later.
-                </Text>
-              </Stack>
-              <Stack className="flex-1" gap="density-md">
-                <Grid cols={2} gap="density-md">
-                  <ControlledTextInput
-                    label="Name (optional)"
-                    formFieldProps={{
-                      slotHelp:
-                        'No spaces — use hyphens or underscores. Overrides the name from the generated config.',
-                    }}
-                    useControllerProps={{ name: 'name', control }}
-                  />
-                  <ControlledTextInput
-                    label="Description (optional)"
-                    useControllerProps={{
-                      name: 'jobDescription',
-                      control,
-                    }}
-                  />
-                </Grid>
-              </Stack>
-            </Flex>
-
-            <Divider />
-
-            {/* Configuration */}
-            <Flex gap="density-2xl" align="start">
-              <Stack className="w-2/5 shrink-0" gap="density-xs">
-                <Text kind="label/bold/lg">Configuration</Text>
-                <Text kind="body/regular/sm">Set the number of records to produce.</Text>
-              </Stack>
-              <Stack className="flex-1" gap="density-md">
-                <ControlledTextInput
-                  label="Rows"
-                  type="number"
-                  min={1}
-                  step={1}
-                  required
-                  formFieldProps={{
-                    slotHelp: 'Number of records to generate.',
-                  }}
-                  useControllerProps={{
-                    name: 'rows',
-                    control,
-                  }}
-                />
-              </Stack>
-            </Flex>
-
-            <Divider />
-
-            {/* Data Specification */}
-            <Stack gap="density-lg">
-              <Stack gap="density-xs">
-                <Text kind="label/bold/lg">Data Specification</Text>
-                <Text kind="body/regular/sm">
-                  Describe the type of data you want to generate. The selected model will convert
-                  this into a job specification, which you can review and edit before submitting.
-                </Text>
-              </Stack>
-              <JobRequestGenerator
-                workspace={workspace}
-                modelRef={modelRef}
-                provider={selectedModel?.model_providers?.[0] ?? ''}
-                servedModelName={selectedModel?.served_model_name ?? ''}
-                control={control}
-                descriptionName="description"
-                onJobRequestChange={handleJobRequestChange}
-                disabled={isPreviewing || isSubmitting}
-              />
+          {/* Data Specification */}
+          <Stack gap="density-lg">
+            <Stack gap="density-xs">
+              <Text kind="label/bold/lg">Data Specification</Text>
+              <Text kind="body/regular/sm">
+                Describe the type of data you want to generate. The selected model will convert this
+                into a job specification, which you can review and edit before submitting.
+              </Text>
             </Stack>
+            <JobRequestGenerator
+              workspace={workspace}
+              modelRef={modelRef}
+              provider={selectedModel?.model_providers?.[0] ?? ''}
+              servedModelName={selectedModel?.served_model_name ?? ''}
+              control={control}
+              descriptionName="description"
+              jsonContentName="jsonContent"
+              setJsonContent={setJsonContent}
+              disabled={isPreviewing || isSubmitting}
+            />
           </Stack>
         </Panel>
 
+        {errors.jsonContent && (
+          <Text kind="body/regular/sm" className="text-danger">
+            {errors.jsonContent.message}
+          </Text>
+        )}
+
         {submitError && (
           <Text kind="body/regular/sm" className="text-danger">
             {submitError}
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/utils.test.ts b/web/packages/studio/src/components/NewDataDesignerJobForm/utils.test.ts
index 6ee0a27391..604721ce6b 100644
--- a/web/packages/studio/src/components/NewDataDesignerJobForm/utils.test.ts
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/utils.test.ts
@@ -1,9 +1,15 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { CreateJobRequest as DataDesignerJobRequest } from '@nemo/sdk/generated/data-designer/schema';
+import type {
+  CreateJob as DataDesignerJob,
+  CreateJobRequest as DataDesignerJobRequest,
+} from '@nemo/sdk/generated/data-designer/schema';
 import {
   applyFormModelToJobRequest,
+  buildClonedJobRequest,
+  CLONE_NAME_SUFFIX,
+  getCloneJobRequestFromState,
   getErrorMessage,
   getWorkspaceAndModel,
   modelsFromProviders,
@@ -203,3 +209,66 @@ describe('applyFormModelToJobRequest', () => {
     expect(result.spec?.config?.columns[1]).not.toHaveProperty('model_alias');
   });
 });
+
+describe('buildClonedJobRequest', () => {
+  const makeJob = (overrides: Partial<DataDesignerJob> = {}): DataDesignerJob =>
+    ({
+      name: 'reviews',
+      description: 'Synthetic product reviews',
+      spec: {
+        job_config: {
+          num_records: 250,
+          config: { columns: [{ name: 'col1' }], model_configs: [] },
+        },
+        model_providers: [],
+        model_configs: [],
+      },
+      ...overrides,
+    }) as DataDesignerJob;
+
+  it('copies the job config into a request with a -copy name', () => {
+    const result = buildClonedJobRequest(makeJob());
+    expect(result).toEqual({
+      name: `reviews${CLONE_NAME_SUFFIX}`,
+      description: 'Synthetic product reviews',
+      spec: {
+        num_records: 250,
+        config: { columns: [{ name: 'col1' }], model_configs: [] },
+      },
+    });
+  });
+
+  it('returns null when the job has no usable config', () => {
+    expect(buildClonedJobRequest(makeJob({ spec: undefined }))).toBeNull();
+    expect(
+      buildClonedJobRequest(
+        makeJob({
+          spec: {
+            job_config: { num_records: 1 },
+            model_providers: [],
+            model_configs: [],
+          },
+        } as unknown as Partial<DataDesignerJob>)
+      )
+    ).toBeNull();
+  });
+});
+
+describe('getCloneJobRequestFromState', () => {
+  const cloneJobRequest: DataDesignerJobRequest = {
+    name: 'reviews-copy',
+    spec: { num_records: 10, config: { columns: [], model_configs: [] } },
+  };
+
+  it('returns the cloned job request from valid state', () => {
+    expect(getCloneJobRequestFromState({ cloneJobRequest })).toBe(cloneJobRequest);
+  });
+
+  it('returns null for absent or malformed state', () => {
+    expect(getCloneJobRequestFromState(null)).toBeNull();
+    expect(getCloneJobRequestFromState(undefined)).toBeNull();
+    expect(getCloneJobRequestFromState({})).toBeNull();
+    expect(getCloneJobRequestFromState('nope')).toBeNull();
+    expect(getCloneJobRequestFromState({ cloneJobRequest: { name: 'no-spec' } })).toBeNull();
+  });
+});
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/utils.ts b/web/packages/studio/src/components/NewDataDesignerJobForm/utils.ts
index c2fa179749..1be5693a42 100644
--- a/web/packages/studio/src/components/NewDataDesignerJobForm/utils.ts
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/utils.ts
@@ -2,7 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { getPartsFromReference } from '@nemo/common/src/namedEntity';
-import type { CreateJobRequest as DataDesignerJobRequest } from '@nemo/sdk/generated/data-designer/schema';
+import type {
+  CreateJob as DataDesignerJob,
+  CreateJobRequest as DataDesignerJobRequest,
+} from '@nemo/sdk/generated/data-designer/schema';
 import type { ModelEntity, ModelProvider } from '@nemo/sdk/generated/platform/schema';
 
 /** Model option for the form: entity plus display name used in job requests */
@@ -127,6 +130,41 @@ export function parseJsonContentToJobRequest(content: string): ParseJsonContentR
   return { jobRequest: sanitizeJobRequestName(parsed), error: null };
 }
 
+/** Suffix appended to a cloned job's name to distinguish it from the original. */
+export const CLONE_NAME_SUFFIX = '-copy';
+
+/**
+ * Build a create-job request from an existing job so it can pre-fill the new-job form.
+ * A job's `spec.job_config` is already the `DataDesignerJobConfig` shape a request expects,
+ * so cloning is a direct copy of the config plus a "-copy" name. Returns null when the job
+ * has no usable config (e.g. a partially-loaded list row).
+ */
+export function buildClonedJobRequest(job: DataDesignerJob): DataDesignerJobRequest | null {
+  const jobConfig = job.spec?.job_config;
+  if (!jobConfig?.config) return null;
+  return {
+    name: job.name ? `${job.name}${CLONE_NAME_SUFFIX}` : undefined,
+    description: job.description,
+    spec: jobConfig,
+  };
+}
+
+/** Navigation state passed to the new-job route to pre-fill the form from an existing job. */
+export interface DataDesignerCloneState {
+  cloneJobRequest: DataDesignerJobRequest;
+}
+
+/**
+ * Narrow an unknown router location state to the cloned job request, if present.
+ * Returns null when the state is absent or not shaped like a clone payload.
+ */
+export function getCloneJobRequestFromState(state: unknown): DataDesignerJobRequest | null {
+  if (!state || typeof state !== 'object' || !('cloneJobRequest' in state)) return null;
+  const request = (state as { cloneJobRequest: unknown }).cloneJobRequest;
+  if (!request || typeof request !== 'object' || !('spec' in request)) return null;
+  return request as DataDesignerJobRequest;
+}
+
 /**
  * Apply the form's selected model (and provider from ModelEntity.model_providers)
  * to the job request: set model_configs and column model_alias.
diff --git a/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/DeleteJobModal.tsx b/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/DeleteJobModal.tsx
index 40246dcd39..110d1480ba 100644
--- a/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/DeleteJobModal.tsx
+++ b/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/DeleteJobModal.tsx
@@ -14,9 +14,10 @@ import { FC, useState } from 'react';
 interface DeleteJobModalProps {
   jobs: DataDesignerJob[];
   onClose: () => void;
+  onDeleted?: () => void;
 }
 
-export const DeleteJobModal: FC<DeleteJobModalProps> = ({ jobs, onClose }) => {
+export const DeleteJobModal: FC<DeleteJobModalProps> = ({ jobs, onClose, onDeleted }) => {
   const queryClient = useQueryClient();
   const workspace = useWorkspaceFromPath();
   const [deleteError, setDeleteError] = useState<string | undefined>(undefined);
@@ -52,6 +53,7 @@ export const DeleteJobModal: FC<DeleteJobModalProps> = ({ jobs, onClose }) => {
 
       await Promise.all(deletePromises);
       onClose();
+      onDeleted?.();
       return true;
     } catch (error) {
       setDeleteError(
diff --git a/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/index.tsx b/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/index.tsx
index 5bd60223ce..0ce65ac48c 100644
--- a/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/index.tsx
+++ b/web/packages/studio/src/components/dataViews/DataDesignerJobsDataView/index.tsx
@@ -11,26 +11,21 @@ import { RelativeTime } from '@nemo/common/src/components/RelativeTime';
 import { StatusBadge } from '@nemo/common/src/components/StatusBadge';
 import { TableEmptyState } from '@nemo/common/src/components/TableEmptyState';
 import { JOB_POLLING_INTERVAL_MS } from '@nemo/common/src/constants';
-import { CJobCancellableStatuses } from '@nemo/common/src/constants/query';
 import { useStudioDataViewState } from '@nemo/common/src/hooks/useStudioDataViewState';
 import { getSortParam } from '@nemo/common/src/utils/query';
-import {
-  getDataDesignerListCreateJobsQueryKey,
-  useDataDesignerCancelCreateJob,
-  useDataDesignerListCreateJobs,
-} from '@nemo/sdk/generated/data-designer/api';
+import { useDataDesignerListCreateJobs } from '@nemo/sdk/generated/data-designer/api';
 import type {
   CreateJob as DataDesignerJob,
   CreateJobsListFilter as DataDesignerJobsListFilter,
   CreateJobsSortField as DataDesignerJobsSortField,
 } from '@nemo/sdk/generated/data-designer/schema';
 import { Banner, Button, Text } from '@nvidia/foundations-react-core';
+import { DataDesignerJobActionsMenu } from '@studio/components/DataDesignerJobActionsMenu';
 import { DeleteJobModal } from '@studio/components/dataViews/DataDesignerJobsDataView/DeleteJobModal';
-import { QuickActionsMenuRoot } from '@studio/components/QuickActionsMenu/QuickActionsMenuRoot';
 import { STATUS_FILTER_OPTIONS } from '@studio/constants/platformJobs';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import { getDataDesignerJobDetailsRoute, getNewDataDesignerJobRoute } from '@studio/routes/utils';
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
+import { keepPreviousData } from '@tanstack/react-query';
 import { Trash } from 'lucide-react';
 import { ComponentProps, FC, useCallback, useMemo, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
@@ -40,7 +35,6 @@ type DataDesignerJobWithId = DataDesignerJob & { id: string };
 export const DataDesignerJobsDataView: FC = () => {
   const navigate = useNavigate();
   const workspace = useWorkspaceFromPath();
-  const queryClient = useQueryClient();
 
   const dataViewState = useStudioDataViewState({
     defaultSort: { id: 'created_at', desc: true },
@@ -50,34 +44,6 @@ export const DataDesignerJobsDataView: FC = () => {
   const [deleteJobs, setDeleteJobs] = useState<DataDesignerJob[]>([]);
   const [cancelError, setCancelError] = useState<string | undefined>(undefined);
 
-  const cancelJobMutation = useDataDesignerCancelCreateJob({
-    mutation: {
-      onSuccess: () => {
-        queryClient.resetQueries({
-          queryKey: getDataDesignerListCreateJobsQueryKey(workspace),
-        });
-        setCancelError(undefined);
-      },
-      onError: (error) => {
-        setCancelError(error instanceof Error ? error.message : 'Failed to cancel job');
-      },
-    },
-  });
-
-  const handleCancelJob = useCallback(
-    async (job: DataDesignerJob) => {
-      if (job.workspace && job.name) {
-        try {
-          setCancelError(undefined);
-          await cancelJobMutation.mutateAsync({ workspace: job.workspace, name: job.name });
-        } catch {
-          // Error is handled by onError callback
-        }
-      }
-    },
-    [cancelJobMutation]
-  );
-
   const { data: dataDesignerResponse, isLoading } = useDataDesignerListCreateJobs(
     workspace,
     {
@@ -173,29 +139,10 @@ export const DataDesignerJobsDataView: FC = () => {
       size: 70,
       enableResizing: false,
       cell: ({ row }) => (
-        <QuickActionsMenuRoot
-          actions={[
-            {
-              label: 'View details',
-              onSelect: () => {
-                if (row.original.name) {
-                  navigate(getDataDesignerJobDetailsRoute(workspace, row.original.name));
-                }
-              },
-            },
-            {
-              label: 'Delete',
-              onSelect: () => setDeleteJobs([row.original]),
-            },
-            ...(row.original.status && CJobCancellableStatuses.includes(row.original.status)
-              ? [
-                  {
-                    label: 'Cancel',
-                    onSelect: () => handleCancelJob(row.original),
-                  },
-                ]
-              : []),
-          ]}
+        <DataDesignerJobActionsMenu
+          job={row.original}
+          includeViewDetails
+          onCancelError={setCancelError}
         />
       ),
     }),
diff --git a/web/packages/studio/src/routes/DataDesignerJobDetailsRoute/index.tsx b/web/packages/studio/src/routes/DataDesignerJobDetailsRoute/index.tsx
index 669feb9b8f..18434ee92d 100644
--- a/web/packages/studio/src/routes/DataDesignerJobDetailsRoute/index.tsx
+++ b/web/packages/studio/src/routes/DataDesignerJobDetailsRoute/index.tsx
@@ -4,6 +4,7 @@
 import { ErrorMessage } from '@nemo/common/src/components/ErrorMessage';
 import { StatusBadge } from '@nemo/common/src/components/StatusBadge';
 import {
+  Banner,
   Button,
   Flex,
   Stack,
@@ -14,6 +15,7 @@ import {
   Text,
 } from '@nvidia/foundations-react-core';
 import { AccessibleTitle } from '@studio/components/AccessibleTitle';
+import { DataDesignerJobActionsMenu } from '@studio/components/DataDesignerJobActionsMenu';
 import { Loading } from '@studio/components/Layouts/Loading';
 import { useBreadcrumbs } from '@studio/providers/breadcrumbs/useBreadcrumbs';
 import { DataDesignerConfigPanel } from '@studio/routes/DataDesignerJobDetailsRoute/DataDesignerConfigPanel';
@@ -23,7 +25,7 @@ import { useDataDesignerJobFromRoute } from '@studio/routes/DataDesignerJobDetai
 import { getDataDesignerJobListRoute } from '@studio/routes/utils';
 import { ArrowLeft, FileJson } from 'lucide-react';
 import { useState, type FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 export const DataDesignerJobDetailsRoute: FC = () => {
   const {
@@ -35,7 +37,9 @@ export const DataDesignerJobDetailsRoute: FC = () => {
     refetch,
   } = useDataDesignerJobFromRoute();
 
+  const navigate = useNavigate();
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
+  const [cancelError, setCancelError] = useState<string | undefined>(undefined);
 
   useBreadcrumbs({
     items: [
@@ -85,10 +89,22 @@ export const DataDesignerJobDetailsRoute: FC = () => {
               <Text kind="body/bold/2xl">{job.name}</Text>
               {job.status ? <StatusBadge status={job.status} /> : null}
             </Flex>
-            <Button type="button" kind="secondary" onClick={() => setIsConfigPanelOpen(true)}>
-              <FileJson /> View config
-            </Button>
+            <Flex gap="density-md" align="center">
+              <Button type="button" kind="secondary" onClick={() => setIsConfigPanelOpen(true)}>
+                <FileJson /> View config
+              </Button>
+              <DataDesignerJobActionsMenu
+                job={job}
+                onDeleted={() => navigate(getDataDesignerJobListRoute(workspace))}
+                onCancelError={setCancelError}
+              />
+            </Flex>
           </Flex>
+          {cancelError && (
+            <Banner kind="inline" status="error">
+              {cancelError}
+            </Banner>
+          )}
           {job.description && (
             <Text kind="body/regular/md" className="text-muted">
               {job.description}