diff --git a/src/components/DataImport/ArtefactUploadView.jsx b/src/components/DataImport/ArtefactUploadView.jsx
new file mode 100644
index 0000000..e41d223
--- /dev/null
+++ b/src/components/DataImport/ArtefactUploadView.jsx
@@ -0,0 +1,224 @@
+import { Button, Flex, Box, Text } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { HiUpload } from "react-icons/hi";
+import server from "../../networking";
+import ToastWizard from "../toastWizard";
+import FileItem from "./FileItem";
+import { IoArrowBackCircleSharp } from "react-icons/io5";
+import PendingBatchCard from "./PendingBatchCard";
+import hp1 from "../../assets/hp1.png";
+
+function ArtefactUploadView({ batch, setBatchID, onClose, fetchBatches, onBackToPending }) {
+    const batchID = batch?.id;
+    const fileInputRef = useRef(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [fileStatuses, setFileStatuses] = useState({});
+
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (event) => {
+        const files = Array.from(event.target.files);
+        if (files.length > 0) {
+            setSelectedFiles((prev) => [...prev, ...files]);
+            // Clear statuses for newly added files
+            const newStatuses = { ...fileStatuses };
+            files.forEach((file) => {
+                delete newStatuses[file.name];
+            });
+            setFileStatuses(newStatuses);
+        }
+    };
+
+    const removeFile = (fileToRemove) => {
+        setSelectedFiles((prev) => prev.filter((file) => file !== fileToRemove));
+        setFileStatuses((prev) => {
+            const updated = { ...prev };
+            delete updated[fileToRemove.name];
+            return updated;
+        });
+    };
+
+    const clearAll = () => {
+        setSelectedFiles([]);
+        setFileStatuses({});
+    };
+
+    const hasPreviousStatus = selectedFiles.some(file => fileStatuses[file.name]);
+
+    const isDisabled =
+        selectedFiles.length === 0 ||
+        isSubmitting ||
+        hasPreviousStatus;
+
+    const handleUpload = async () => {
+        if (selectedFiles.length === 0 || isSubmitting) {
+            ToastWizard.standard("warning", "No Files Selected", "Please choose at least one file before uploading.");
+            return;
+        }
+
+        const formData = new FormData();
+        selectedFiles.forEach((file) => {
+            formData.append("file", file);
+        });
+
+        if (batchID) {
+            formData.append("batchID", batchID);
+        }
+
+        setIsSubmitting(true);
+
+        try {
+            const res = await server.post("/dataImport/upload", formData, {
+                headers: { "Content-Type": "multipart/form-data" },
+                transformRequest: formData => formData
+            });
+
+            const data = res.data;
+            const updates = data.raw?.updates || {};
+            const returnedBatchID = data.raw?.batchID;
+
+            if (returnedBatchID) {
+                setBatchID(returnedBatchID);
+            }
+            setFileStatuses(updates);
+            fetchBatches();
+
+            ToastWizard.standard(
+                "success",
+                "Upload Complete",
+                `Uploaded files to Batch ${returnedBatchID || '<Unknown ID>'}. Ready for processing.`
+            );
+        } catch (err) {
+            console.log(`Non-success response in file upload to batch ${batchID || 'New Batch'}`, err)
+            const updates = err?.response?.data?.raw?.updates;
+            if (updates) {
+                setFileStatuses(updates);
+            } else {
+                // If no detailed errors, mark all files as failed
+                const fallbackStatus = {};
+                selectedFiles.forEach((file) => {
+                    fallbackStatus[file.name] = "ERROR: Failed to upload.";
+                });
+                setFileStatuses(fallbackStatus);
+            }
+
+            ToastWizard.standard("error", "Upload Failed", "Some or all files failed to upload.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    useEffect(() => {
+        return () => {
+            clearAll();
+        }
+    }, []);
+
+    return (
+        <>
+            <Flex mb={{ base: 4, md: 6 }}>
+                <Box>
+                    <Button
+                        variant="ghost"
+                        size={{ base: "sm", md: "md" }}
+                        onClick={() => {
+                            clearAll();
+                            setBatchID(null);
+                            onBackToPending();
+                        }}
+                    >
+                        <IoArrowBackCircleSharp />
+                    </Button>
+
+                </Box>
+                <Box ml={{ base: 5, md: 4 }}>
+                    <PendingBatchCard
+                        batchName={batch?.name || "New Batch"}
+                        artefactCount={batch?.artefactCount || 0}
+                        timestamp={batch?.created || new Date().toLocaleString()}
+                        thumbnail={batch?.thumbnail || hp1}
+                    />
+                </Box>
+            </Flex >
+            <input
+                type="file"
+                accept=".png,.jpg,jpeg"
+                multiple
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                style={{ display: "none" }}
+            />
+
+            <Button
+                leftIcon={<HiUpload />}
+                variant="outline"
+                width={{ base: "400px", md: "full" }}
+                justifyContent="start"
+                mb={4}
+                onClick={handleButtonClick}
+            >
+                Choose Files
+            </Button>
+
+            {
+                selectedFiles.length > 0 && (
+                    <Box mb={4}>
+                        <Flex justify="space-between" align="center" mb={2}>
+                            <Text fontSize="sm" fontWeight="medium">
+                                {selectedFiles.length} file(s) selected
+                            </Text>
+                            <Button size="xs" variant="ghost" colorScheme="red" onClick={clearAll}>
+                                Remove All
+                            </Button>
+                        </Flex>
+
+                        <Box
+                            borderWidth="1px"
+                            borderRadius="md"
+                            p={2}
+                            maxHeight="200px"
+                            overflowY="auto"
+                            bg="gray.50"
+                        >
+                            {selectedFiles.map((file, index) => (
+                                <FileItem
+                                    key={index}
+                                    file={file}
+                                    statusMsg={fileStatuses[file.name]}
+                                    onRemove={removeFile}
+                                />
+                            ))}
+                        </Box>
+                    </Box>
+                )
+            }
+
+            {
+                hasPreviousStatus && (
+                    <Text fontSize="sm" color="orange.500" mt={2}>
+                        Click "Remove All" to upload new files.
+                    </Text>
+                )
+            }
+
+            <Flex direction="row" justify="flex-end" gap={3} mt={4}>
+                <Box pl={{ base: 0, md: 4 }} pr={{ base: 0, md: 4 }} display="flex" gap={2} flexWrap="wrap">
+                    <Button
+                        variant="ArchPrimary"
+                        disabled={isDisabled}
+                        onClick={handleUpload}
+                        loading={isSubmitting}
+                        loadingText={batchID ? `Uploading ${selectedFiles.length} file(s)...` : `Creating batch...`}
+                    >
+                        {batchID ? 'Upload to Existing Batch' : 'Create New Batch and Upload'} ({selectedFiles.length})
+                    </Button>
+                </Box>
+            </Flex >
+        </>
+    );
+}
+
+export default ArtefactUploadView;
\ No newline at end of file
diff --git a/src/components/DataImport/DialogUpload.jsx b/src/components/DataImport/DialogUpload.jsx
deleted file mode 100644
index ff7c556..0000000
--- a/src/components/DataImport/DialogUpload.jsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import { Button, FileUpload, VStack, Text, Box, CloseButton, Dialog, Portal, Badge } from "@chakra-ui/react";
-import { HiUpload } from "react-icons/hi";
-import { useState, useRef } from "react";
-import server from "../../networking";
-import ToastWizard from "../../components/toastWizard";
-import { FaPlus } from "react-icons/fa";
-
-function DialogUpload() {
-    const [files, setFiles] = useState([]);
-    const [fileStatuses, setFileStatuses] = useState({});
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [batchID, setBatchID] = useState(null);
-    const [isConfirmed, setIsConfirmed] = useState(false);
-    const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
-    const inputRef = useRef();
-    const isUploading = useRef(false);
-
-    // Handle file upload
-    const handleFileChange = async (e) => {
-        if (isUploading.current) return;
-        isUploading.current = true;
-
-        const selected = Array.from(e.target.files);
-        setFiles(selected);
-        setFileStatuses({});
-        if (selected.length === 0) return;
-
-        const formData = new FormData();
-        selected.forEach((file) => formData.append("file", file));
-
-        setIsSubmitting(true);
-        try {
-            const res = await server.post("/dataImport/upload", formData, {
-                headers: { "Content-Type": "multipart/form-data" },
-            });
-
-            const data = res.data;
-            const updates = data.raw?.updates || {};
-            const newBatchID = data.raw?.batchID;
-
-            setFileStatuses(updates);
-            setBatchID(newBatchID);
-            setIsConfirmed(false);
-
-            ToastWizard.standard("success", "Upload Complete", `Batch ID: ${newBatchID}. Ready for confirmation.`);
-        } catch (err) {
-            const updates = err?.response?.data?.raw?.updates;
-            if (updates) {
-                setFileStatuses(updates);
-            }
-            ToastWizard.standard("error", "Upload Failed", "Failed to upload files.");
-        } finally {
-            setIsSubmitting(false);
-            isUploading.current = false;
-        }
-    };
-
-    const handleConfirmBatch = async () => {
-        if (!batchID) return;
-
-        setIsSubmitting(true);
-        try {
-            const res = await server.post("/dataImport/confirm", { batchID });
-
-            if (res.status === 200 || res.data.raw.success !== false) {
-                setIsConfirmed(true);
-                ToastWizard.standard("success", "Processing Started", `Batch ${batchID} is now being processed.`);
-                setIsConfirmDialogOpen(false);
-
-            } else {
-                ToastWizard.standard("error", "Failed to Confirm", res.data.message || "Unknown error.");
-            }
-        } catch (err) {
-            const errorMsg = err?.response?.data?.message || "Failed to confirm batch.";
-            ToastWizard.standard("error", "Confirm Error", errorMsg);
-
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    return (
-        <Dialog.Root size="sm" scrollBehavior="inside">
-            <Dialog.Trigger asChild>
-                <Button variant="ArchPrimary" size={{ base: 'sm', md: 'lg' }}>
-                    <FaPlus />
-                </Button>
-            </Dialog.Trigger>
-
-            <Portal>
-                <Dialog.Backdrop />
-                <Dialog.Positioner>
-                    <Dialog.Content>
-                        <Dialog.Header>
-                            Upload Files
-                            <Dialog.CloseTrigger asChild>
-                                <CloseButton size="sm" />
-                            </Dialog.CloseTrigger>
-                        </Dialog.Header>
-
-                        <Dialog.Body>
-                            <FileUpload.Root maxFiles={300}>
-                                <FileUpload.HiddenInput ref={inputRef} onChange={handleFileChange} />
-                                <FileUpload.Trigger asChild>
-                                    <Button
-                                        variant="solid"
-                                        size="sm"
-                                        leftIcon={<HiUpload />}
-                                        isLoading={isSubmitting}
-                                    >
-                                        Upload
-                                    </Button>
-                                </FileUpload.Trigger>
-
-                                {/* Custom file list with status and remove button */}
-                                {files.length > 0 && (
-                                    <VStack mt={4} spacing={3} align="stretch">
-                                        {files.map((file) => {
-                                            const status = fileStatuses[file.name];
-                                            return (
-                                                <Box
-                                                    key={file.name}
-                                                    p={2}
-                                                    borderWidth="1px"
-                                                    borderRadius="md"
-                                                    bg={status?.startsWith("ERROR") ? "red.50" : "gray.50"}
-                                                    display="flex"
-                                                    flexDirection="column"
-                                                >
-                                                    <Box
-                                                        display="flex"
-                                                        justifyContent="space-between"
-                                                        alignItems="center"
-                                                    >
-                                                        <Text fontWeight="medium" fontSize="sm">
-                                                            {file.name}
-                                                        </Text>
-                                                        <Text fontSize="xs" color="gray.500">
-                                                            {(file.size / 1024).toFixed(1)} KB
-                                                        </Text>
-                                                    </Box>
-
-                                                    {status && (
-                                                        <Box
-                                                            mt={1}
-                                                            display="flex"
-                                                            alignItems="center"
-                                                            gap={2}
-                                                        >
-                                                            {status.startsWith("ERROR") && (
-                                                                <Badge
-                                                                    colorScheme="red"
-                                                                    variant="subtle"
-                                                                    fontSize="0.65em"
-                                                                >
-                                                                    Error
-                                                                </Badge>
-                                                            )}
-                                                            <Text
-                                                                fontSize="sm"
-                                                                color={
-                                                                    status.startsWith("ERROR")
-                                                                        ? "red.500"
-                                                                        : "green.600"
-                                                                }
-                                                            >
-                                                                {status}
-                                                            </Text>
-                                                            <Box flex="1" />
-                                                            <CloseButton
-                                                                size="sm"
-                                                                onClick={() => {
-                                                                    setFiles((prev) =>
-                                                                        prev.filter((f) => f.name !== file.name)
-                                                                    );
-                                                                    setFileStatuses((prev) => {
-                                                                        const updated = { ...prev };
-                                                                        delete updated[file.name];
-                                                                        return updated;
-                                                                    });
-                                                                }}
-                                                            />
-                                                        </Box>
-                                                    )}
-                                                </Box>
-                                            );
-                                        })}
-                                    </VStack>
-                                )}
-                            </FileUpload.Root>
-                        </Dialog.Body>
-
-                        <Dialog.Footer>
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setFiles([])}
-                                isDisabled={isSubmitting}
-                            >
-                                Clear
-                            </Button>
-
-                            {/* Only show Confirm button after upload */}
-                            {batchID && !isConfirmed && (
-                                <Button
-                                    colorScheme="green"
-                                    size="sm"
-                                    onClick={() => setIsConfirmDialogOpen(true)}
-                                    isDisabled={isSubmitting}
-                                >
-                                    Confirm & Process
-                                </Button>
-                            )}
-
-                            {isConfirmed && (
-                                <Text fontSize="sm" color="green.600">
-                                    Processing started for Batch {batchID}
-                                </Text>
-                            )}
-                        </Dialog.Footer>
-                    </Dialog.Content>
-                </Dialog.Positioner>
-            </Portal>
-
-            <Dialog.Root open={isConfirmDialogOpen} onOpenChange={({ open }) => setIsConfirmDialogOpen(open)}>
-                <Portal>
-                    <Dialog.Backdrop />
-                    <Dialog.Positioner>
-                        <Dialog.Content>
-                            <Dialog.Header>Confirm Processing</Dialog.Header>
-                            <Dialog.Body>
-                                <Text>
-                                    Are you sure you want to process batch{" "}
-                                    <Text as="span" fontWeight="bold">
-                                        {batchID}
-                                    </Text>
-                                    ? This will start processing the artefacts in the batch.
-                                </Text>
-                            </Dialog.Body>
-                            <Dialog.Footer>
-                                <Button variant="outline" onClick={() => setIsConfirmDialogOpen(false)}>
-                                    Cancel
-                                </Button>
-                                <Button colorScheme="green" onClick={handleConfirmBatch} isLoading={isSubmitting}>
-                                    Confirm
-                                </Button>
-                            </Dialog.Footer>
-                        </Dialog.Content>
-                    </Dialog.Positioner>
-                </Portal>
-            </Dialog.Root>
-        </Dialog.Root>
-    );
-}
-
-export default DialogUpload;
\ No newline at end of file
diff --git a/src/components/DataImport/FileItem.jsx b/src/components/DataImport/FileItem.jsx
new file mode 100644
index 0000000..1946c35
--- /dev/null
+++ b/src/components/DataImport/FileItem.jsx
@@ -0,0 +1,45 @@
+import { Flex, Box, Text, CloseButton } from "@chakra-ui/react";
+
+function FileItem({ file, statusMsg, onRemove }) {
+    const isError = statusMsg && statusMsg.startsWith("ERROR");
+    const isSuccess = statusMsg && statusMsg.startsWith("SUCCESS");
+
+    return (
+        <Flex
+            direction="column"
+            fontSize="sm"
+            py={1}
+            px={2}
+            borderRadius="md"
+            bg={isError ? "red.50" : isSuccess ? "green.50" : undefined}
+            _hover={{ bg: isError ? "red.100" : isSuccess ? "green.100" : "gray.100" }}
+            mb={2}
+        >
+            <Flex justify="space-between" align="center">
+                <Box>
+                    <Text fontWeight="medium">{file.name}</Text>
+                    <Text color="gray.500" fontSize="xs">
+                        {(file.size / 1024).toFixed(1)} KB
+                    </Text>
+                </Box>
+                <CloseButton
+                    size="sm"
+                    onClick={() => onRemove(file)}
+                    aria-label={`Remove ${file.name}`}
+                />
+            </Flex>
+            {statusMsg && (
+                <Text
+                    mt={1}
+                    fontSize="xs"
+                    color={isError ? "red.600" : "green.600"}
+                    whiteSpace="pre-wrap"
+                >
+                    {statusMsg.replace(/^(SUCCESS|ERROR):\s*/, "")}
+                </Text>
+            )}
+        </Flex>
+    );
+}
+
+export default FileItem;
\ No newline at end of file
diff --git a/src/components/DataImport/ImportMenuDialog.jsx b/src/components/DataImport/ImportMenuDialog.jsx
new file mode 100644
index 0000000..65be9a4
--- /dev/null
+++ b/src/components/DataImport/ImportMenuDialog.jsx
@@ -0,0 +1,99 @@
+import { Button, Dialog, Portal, Flex, Box, Text, VStack, CloseButton } from "@chakra-ui/react";
+import ArtefactUploadView from "./ArtefactUploadView";
+import hp1 from "../../assets/hp1.png";
+import PendingBatchCard from "./PendingBatchCard";
+import { useState } from "react";
+
+function ImportMenuDialog({ pendingBatches, fetchBatches }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [view, setView] = useState('pendingList');
+    const [targetBatchID, setTargetBatchID] = useState(null);
+
+    const handleClose = () => {
+        setIsOpen(false);
+        setTimeout(() => {
+            setView('pendingList');
+            setTargetBatchID(null);
+        }, 0);
+    }
+
+    return (
+        <Dialog.Root
+            placement="center"
+            size={view === "uploadExisting" ? { base: "sm", md: "md" } : { base: "sm", md: "xl" }}
+            closeOnInteractOutside={false}
+            closeOnEscape={false}
+            open={isOpen}
+            onOpenChange={(e) => setIsOpen(e.open)}
+            unmountOnExit
+        >
+            <Dialog.Trigger asChild>
+                <Button variant="ArchPrimary" size={{ base: 'md', md: 'lg' }}>
+                    Upload Artefacts</Button>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title fontSize={{ base: "lg", md: "xl" }}>Upload Artefacts</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            {view === 'uploadExisting' &&
+                                <ArtefactUploadView
+                                    batch={pendingBatches.find(b => b.id === targetBatchID) || null}
+                                    setBatchID={(id) => setTargetBatchID(id)}
+                                    onClose={handleClose}
+                                    fetchBatches={fetchBatches}
+                                    onBackToPending={() => setView("pendingList")} />}
+
+                            {view === "pendingList" && (
+                                <Flex height="400px" align="center" px={4} overflowY="auto">
+                                    <Box flex="1" display="flex" justifyContent="center" alignItems="center">
+                                        <Button variant="ArchPrimary" onClick={() => setView("uploadExisting")} size={{ base: 'sm', md: 'lg' }}>New Batch</Button>
+                                    </Box>
+
+                                    <Box width="1px" height="80%" bg="gray.300" />
+
+                                    <Box flex="1" maxHeight="300px" overflowY="auto" px={{ base: 10, md: 20 }}>
+                                        <Text fontSize={{ base: "sm", md: "lg" }} mb={{ base: 2, md: 4 }} display="flex" justifyContent="center" alignItems="center">
+                                            Pending Batches
+                                        </Text>
+                                        {pendingBatches.length === 0 ? (
+                                            <Text color="gray.500" fontSize={{ base: "sm", md: "lg" }}>
+                                                No pending batches.
+                                            </Text>
+                                        ) : (
+                                            <VStack>
+                                                {pendingBatches.map((batch) => (
+                                                    <PendingBatchCard
+                                                        key={batch.id}
+                                                        batchName={`Batch Name`}
+                                                        artefactCount={batch.artefactCount}
+                                                        timestamp={batch.created}
+                                                        thumbnail={hp1}
+                                                        onClick={() => {
+                                                            setTargetBatchID(batch.id);
+                                                            setView("uploadExisting");
+                                                        }}
+                                                    />
+                                                ))}
+                                            </VStack>
+                                        )}
+                                    </Box>
+                                </Flex>
+                            )}
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.CloseTrigger asChild>
+                                <CloseButton size={'sm'} onClick={handleClose} />
+                            </Dialog.CloseTrigger>
+                        </Dialog.Footer>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root >
+    )
+}
+
+export default ImportMenuDialog;
\ No newline at end of file
diff --git a/src/components/DataImport/PendingBatchCard.jsx b/src/components/DataImport/PendingBatchCard.jsx
new file mode 100644
index 0000000..52a2e24
--- /dev/null
+++ b/src/components/DataImport/PendingBatchCard.jsx
@@ -0,0 +1,43 @@
+import { Box, Flex, Image, Text } from "@chakra-ui/react";
+
+const PendingBatchCard = ({ batchName, artefactCount, timestamp, thumbnail, onClick }) => {
+    return (
+        <Box
+            borderWidth="1px"
+            borderRadius={{ base: "sm", md: "md" }}
+            overflow="hidden"
+            bg="white"
+            shadow="sm"
+            _hover={{ shadow: "md", cursor: "pointer" }}
+            width={{ base: "210px", md: "350px" }}
+            height={{ base: "60px", md: "80px" }}
+            onClick={onClick}
+        >
+            <Flex align="center" p={{ base: "1", md: "2" }}>
+                <Image
+                    src={thumbnail || "/placeholder.jpg"}
+                    alt={batchName}
+                    height={{ base: "50px", md: "60px" }}
+                    width={{ base: "50px", md: "80px" }}
+                    borderRadius={{ base: "xs", md: "md" }}
+                    mr={{ base: "2", md: "4" }}
+                />
+                <Box flex="1" lineHeight="normal" display="flex" flexDirection="column">
+                    <Text fontWeight="bold" fontSize={{ base: "xs", md: "sm" }} isTruncated>
+                        {batchName}
+                    </Text>
+                    <Text fontSize={{ base: "xs", md: "sm" }} color="gray.500" noOfLines={1}>
+                        {artefactCount != null
+                            ? `${artefactCount} Artefact${artefactCount === 1 ? '' : 's'}`
+                            : "No artefacts"}
+                    </Text>
+                    <Text fontSize={{ base: "xs", md: "sm" }} color="gray.400" noOfLines={1}>
+                        {timestamp}
+                    </Text>
+                </Box>
+            </Flex>
+        </Box>
+    );
+};
+
+export default PendingBatchCard;
\ No newline at end of file
diff --git a/src/pages/DataImport.jsx b/src/pages/DataImport.jsx
index 8cfca43..93b0c7f 100644
--- a/src/pages/DataImport.jsx
+++ b/src/pages/DataImport.jsx
@@ -6,7 +6,7 @@ import { useSelector } from "react-redux";
 import ToastWizard from '../components/toastWizard'
 import server, { JSONResponse } from "../networking";
 import BatchCard from "../components/DataImport/BatchCard";
-import DialogUpload from "../components/DataImport/DialogUpload";
+import ImportMenuDialog from "../components/DataImport/ImportMenuDialog.jsx";
 import CentredSpinner from "../components/centredSpinner.jsx";
 
 const stageCollection = createListCollection({
@@ -59,6 +59,9 @@ function DataImport() {
     const [loading, setLoading] = useState(true);
     const [selectedStages, setSelectedStages] = useState([]);
     const [isRefreshing, setIsRefreshing] = useState(false);
+    const [batchNumberMap, setBatchNumberMap] = useState({});
+    const [pendingBatches, setPendingBatches] = useState([]);
+
 
     const { loaded } = useSelector(state => state.auth);
 
@@ -113,7 +116,23 @@ function DataImport() {
                     };
                 });
 
-                setBatches(batchList);
+                const sorted = batchList.sort((a, b) => new Date(a.created) - new Date(b.created));
+                const batchNumberMap = {};
+                sorted.forEach((batch, i) => {
+                    batchNumberMap[batch.id] = i + 1;
+                });
+
+                const pendingBatches = sorted
+                    .filter(b => b.stage === "upload_pending")
+                    .map(b => ({
+                        ...b,
+                        created: formatTimestamp(b.created),
+                        artefactCount: b.artefactSummary?.total ?? 0,
+                    }));
+
+                setBatches(sorted);
+                setBatchNumberMap(batchNumberMap);
+                setPendingBatches(pendingBatches);
 
             } else {
                 throw new Error("Unexpected response format");
@@ -145,11 +164,12 @@ function DataImport() {
     const stageGroups = useMemo(() => {
         return stages
             .filter(stage => selectedStages.length === 0 || selectedStages.includes(stage))
-            .map(stage => {
-                const filtered = batches.filter(batch => batch.stage === stage);
-                return { stage, label: stageLabels[stage], batches: filtered };
-            });
-    }, [batches, selectedStages]);
+            .map(stage => ({
+                stage,
+                label: stageLabels[stage],
+                batches: batches.filter(batch => batch.stage === stage),
+            }));
+    }, [batches, selectedStages, stageLabels, stages]);
 
     if (loading) {
         return <CentredSpinner />;
@@ -188,7 +208,10 @@ function DataImport() {
                     <Spacer />
 
                     {/* Upload Button */}
-                    <DialogUpload />
+                    <ImportMenuDialog
+                        pendingBatches={pendingBatches}
+                        fetchBatches={fetchBatches}
+                    />
                 </Flex>
 
                 {/* Second Row: Stage Filter + Upload Button */}
@@ -249,7 +272,7 @@ function DataImport() {
                             filtered.map((batch, idx) => (
                                 <Box key={batch.id ?? `batch-${idx}`} w="full" mb={4}>
                                     <BatchCard
-                                        batchName={`Batch ${idx + 1}`}
+                                        batchName={`Batch ${batchNumberMap[batch.id]}`}
                                         displayMessage={`${batch.artefactSummary.processed}/${batch.artefactSummary.total} Artefacts Processed`}
                                         timestamp={formatTimestamp(batch.created)}
                                         progress={Math.round(