diff --git a/apps/web/src/references/components/CreateReference.tsx b/apps/web/src/references/components/CreateReference.tsx
index bb821f733..cc23341ae 100644
--- a/apps/web/src/references/components/CreateReference.tsx
+++ b/apps/web/src/references/components/CreateReference.tsx
@@ -1,52 +1,54 @@
 import { Dialog, DialogContent, DialogTitle } from "@base/Dialog";
-import NavTab from "@base/NavTab";
-import NavTabs from "@base/NavTabs";
-import EmptyReference from "./EmptyReference";
-import ImportReference from "./ImportReference";
+import { SelectBox, SelectBoxItem } from "@base/SelectBox";
+import { useState } from "react";
+import { CreateReferenceForm } from "./CreateReferenceForm";
 
 type CreateReferenceProps = {
-	createReferenceType?: string;
-	setCreateReferenceType: (type?: string) => void;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
 };
 
 /**
  * The create reference view with options to create an empty reference or import a reference
  */
-export function CreateReference({
-	createReferenceType,
-	setCreateReferenceType,
-}: CreateReferenceProps) {
+export function CreateReference({ open, onOpenChange }: CreateReferenceProps) {
+	const [mode, setMode] = useState<"empty" | "import">("empty");
+
+	function handleOpenChange(open: boolean) {
+		onOpenChange(open);
+		if (!open) {
+			setMode("empty");
+		}
+	}
+
+	function handleSuccess() {
+		onOpenChange(false);
+		setMode("empty");
+	}
+
 	return (
-		<Dialog
-			open={Boolean(createReferenceType)}
-			onOpenChange={() => {
-				setCreateReferenceType(undefined);
-			}}
-		>
+		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent size="lg">
 				<DialogTitle>Create Reference</DialogTitle>
-				<NavTabs>
-					<NavTab
-						to="."
-						search={{ createReferenceType: "empty" }}
-						isActive={createReferenceType === "empty"}
-					>
-						Empty
-					</NavTab>
-					<NavTab
-						to="."
-						search={{ createReferenceType: "import" }}
-						isActive={createReferenceType === "import"}
-					>
-						Import
-					</NavTab>
-				</NavTabs>
-
-				{createReferenceType === "import" ? (
-					<ImportReference />
-				) : (
-					<EmptyReference />
-				)}
+				<SelectBox
+					className="grid-cols-2"
+					label="Method"
+					onValueChange={(value) => setMode(value as "empty" | "import")}
+					value={mode}
+				>
+					<SelectBoxItem value="empty">
+						<div>Empty</div>
+						<span>Start from a blank reference.</span>
+					</SelectBoxItem>
+					<SelectBoxItem value="import">
+						<div>Import</div>
+						<span>
+							Create a reference from a file previously exported from another
+							Virtool reference.
+						</span>
+					</SelectBoxItem>
+				</SelectBox>
+				<CreateReferenceForm mode={mode} onSuccess={handleSuccess} />
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/apps/web/src/references/components/CreateReferenceForm.tsx b/apps/web/src/references/components/CreateReferenceForm.tsx
new file mode 100644
index 000000000..01fb5dce4
--- /dev/null
+++ b/apps/web/src/references/components/CreateReferenceForm.tsx
@@ -0,0 +1,173 @@
+import { DialogFooter } from "@base/Dialog";
+import InputError from "@base/InputError";
+import InputGroup from "@base/InputGroup";
+import InputLabel from "@base/InputLabel";
+import InputSimple from "@base/InputSimple";
+import ProgressBarAffixed from "@base/ProgressBarAffixed";
+import SaveButton from "@base/SaveButton";
+import TextArea from "@base/TextArea";
+import { useNavigate } from "@tanstack/react-router";
+import { useId } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { UploadBar } from "@/uploads/components/UploadBar";
+import {
+	useCreateReference,
+	useImportReference,
+	useUploadReference,
+} from "../queries";
+
+type FormValues = {
+	name: string;
+	description: string;
+	organism: string;
+	upload: string;
+};
+
+type CreateReferenceFormProps = {
+	mode: "empty" | "import";
+	onSuccess: () => void;
+};
+
+/**
+ * A form for creating a reference from scratch or by importing a file, sharing
+ * name and description between the two modes
+ */
+export function CreateReferenceForm({
+	mode,
+	onSuccess,
+}: CreateReferenceFormProps) {
+	const navigate = useNavigate();
+	const createMutation = useCreateReference();
+	const importMutation = useImportReference();
+	const { uploadMutation, fileName, uploadId, progress } = useUploadReference();
+
+	const nameId = useId();
+	const organismId = useId();
+	const descriptionId = useId();
+
+	const {
+		control,
+		formState: { errors },
+		handleSubmit,
+		register,
+		setError,
+	} = useForm<FormValues>({
+		defaultValues: {
+			name: "",
+			description: "",
+			organism: "",
+			upload: "",
+		},
+	});
+
+	function handleDrop(acceptedFiles: File[]) {
+		const file = acceptedFiles[0];
+		if (file === undefined) {
+			return;
+		}
+
+		uploadMutation.mutate(file);
+	}
+
+	function onSubmit(values: FormValues) {
+		if (mode === "import") {
+			if (uploadId === null) {
+				setError("upload", {
+					message: "Please wait for the upload to finish",
+				});
+				return;
+			}
+
+			importMutation.mutate(
+				{
+					name: values.name,
+					description: values.description,
+					importFrom: uploadId,
+				},
+				{
+					onSuccess: () => {
+						navigate({ to: "/refs", replace: true });
+						onSuccess();
+					},
+				},
+			);
+
+			return;
+		}
+
+		createMutation.mutate(
+			{
+				name: values.name,
+				description: values.description,
+				organism: values.organism,
+			},
+			{
+				onSuccess: () => {
+					navigate({ to: "/refs" });
+					onSuccess();
+				},
+			},
+		);
+	}
+
+	const uploadBarMessage =
+		fileName || (progress === 0 ? "Drag file here to upload" : "Uploading...");
+
+	return (
+		<form onSubmit={handleSubmit(onSubmit)}>
+			{mode === "import" && (
+				<Controller
+					control={control}
+					name="upload"
+					rules={{ required: "A reference file must be uploaded" }}
+					render={({ field: { onChange } }) => (
+						<div className="mb-4">
+							<ProgressBarAffixed color="green" now={progress} />
+							<UploadBar
+								message={uploadBarMessage}
+								onDrop={(acceptedFiles) => {
+									handleDrop(acceptedFiles);
+									const file = acceptedFiles[0];
+									if (file) {
+										onChange(file.name);
+									}
+								}}
+								multiple={false}
+							/>
+
+							<InputError>{errors.upload?.message}</InputError>
+						</div>
+					)}
+				/>
+			)}
+
+			<InputGroup className="pb-0">
+				<InputLabel htmlFor={nameId}>Name</InputLabel>
+				<InputSimple
+					id={nameId}
+					{...register("name", { required: "Required Field" })}
+				/>
+				<InputError>{errors.name?.message}</InputError>
+			</InputGroup>
+
+			{mode === "empty" && (
+				<InputGroup>
+					<InputLabel htmlFor={organismId}>Organism</InputLabel>
+					<InputSimple id={organismId} {...register("organism")} />
+				</InputGroup>
+			)}
+
+			<InputGroup>
+				<InputLabel htmlFor={descriptionId}>Description</InputLabel>
+				<TextArea id={descriptionId} {...register("description")} />
+			</InputGroup>
+
+			<DialogFooter>
+				<SaveButton
+					altText="Create"
+					disabled={mode === "import" && progress > 0 && uploadId === null}
+				/>
+			</DialogFooter>
+		</form>
+	);
+}
diff --git a/apps/web/src/references/components/EmptyReference.tsx b/apps/web/src/references/components/EmptyReference.tsx
deleted file mode 100644
index 3dbded2b2..000000000
--- a/apps/web/src/references/components/EmptyReference.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Button from "@base/Button";
-import { DialogFooter } from "@base/Dialog";
-import { useNavigate } from "@tanstack/react-router";
-import { useForm } from "react-hook-form";
-import { useCreateReference } from "../queries";
-import { ReferenceForm } from "./ReferenceForm";
-
-type FormValues = {
-	name: string;
-	description: string;
-	organism: string;
-};
-
-/**
- * A form for creating an empty reference
- */
-export default function EmptyReference() {
-	const navigate = useNavigate();
-
-	const mutation = useCreateReference();
-
-	const {
-		formState: { errors },
-		handleSubmit,
-		register,
-	} = useForm<FormValues>({
-		defaultValues: {
-			name: "",
-			description: "",
-			organism: "",
-		},
-	});
-
-	return (
-		<form
-			onSubmit={handleSubmit((values) =>
-				mutation.mutate(values, {
-					onSuccess: () => {
-						navigate({ to: "/refs" });
-					},
-				}),
-			)}
-		>
-			<ReferenceForm errors={errors} mode="empty" register={register} />
-			<DialogFooter>
-				<Button type="submit" color="blue">
-					Save
-				</Button>
-			</DialogFooter>
-		</form>
-	);
-}
diff --git a/apps/web/src/references/components/ImportReference.tsx b/apps/web/src/references/components/ImportReference.tsx
deleted file mode 100644
index 527f428d2..000000000
--- a/apps/web/src/references/components/ImportReference.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Alert from "@base/Alert";
-import { DialogFooter } from "@base/Dialog";
-import InputError from "@base/InputError";
-import InputGroup from "@base/InputGroup";
-import InputLabel from "@base/InputLabel";
-import InputSimple from "@base/InputSimple";
-import ProgressBarAffixed from "@base/ProgressBarAffixed";
-import SaveButton from "@base/SaveButton";
-import { useNavigate } from "@tanstack/react-router";
-import { Controller, useForm } from "react-hook-form";
-import { UploadBar } from "@/uploads/components/UploadBar";
-import { useImportReference, useUploadReference } from "../queries";
-
-export default function ImportReference() {
-	const navigate = useNavigate();
-
-	const importMutation = useImportReference();
-	const { uploadMutation, fileName, uploadId, progress } = useUploadReference();
-
-	const {
-		control,
-		formState: { errors },
-		handleSubmit,
-		register,
-	} = useForm({
-		defaultValues: {
-			name: "",
-			description: "",
-			upload: "",
-		},
-	});
-
-	function handleDrop(acceptedFiles: File[]) {
-		const file = acceptedFiles[0];
-		if (file === undefined) {
-			return;
-		}
-
-		uploadMutation.mutate(file);
-	}
-
-	const uploadBarMessage =
-		fileName || (progress === 0 ? "Drag file here to upload" : "Uploading...");
-
-	return (
-		<>
-			<Alert>
-				<strong>
-					Create a reference from a file previously exported from another
-					Virtool reference.
-				</strong>
-			</Alert>
-
-			<Controller
-				control={control}
-				name="upload"
-				rules={{ required: true }}
-				render={({ field: { onChange } }) => (
-					<div className="mb-4">
-						<ProgressBarAffixed color="green" now={progress} />
-						<UploadBar
-							message={uploadBarMessage}
-							onDrop={(acceptedFiles) => {
-								handleDrop(acceptedFiles);
-								const file = acceptedFiles[0];
-								if (file) {
-									onChange(file.name);
-								}
-							}}
-							multiple={false}
-						/>
-
-						<InputError>
-							{errors.upload?.type === "required" &&
-								"A reference file must be uploaded"}
-						</InputError>
-					</div>
-				)}
-			/>
-
-			<form
-				onSubmit={handleSubmit((values) => {
-					if (uploadId === null) {
-						return;
-					}
-					importMutation.mutate(
-						{ ...values, importFrom: uploadId },
-						{ onSuccess: () => navigate({ to: "/refs", replace: true }) },
-					);
-				})}
-			>
-				<InputGroup>
-					<InputLabel htmlFor="name">Name</InputLabel>
-					<InputSimple id="name" {...register("name", { required: true })} />
-					<InputError>{errors.name?.type && "A name is required."}</InputError>
-				</InputGroup>
-				<InputGroup>
-					<InputLabel htmlFor="description">Description</InputLabel>
-					<InputSimple
-						as="textarea"
-						id="description"
-						{...register("description")}
-					/>
-				</InputGroup>
-
-				<DialogFooter>
-					<SaveButton
-						disabled={progress > 0 && uploadId === null}
-						altText="Import"
-					/>
-				</DialogFooter>
-			</form>
-		</>
-	);
-}
diff --git a/apps/web/src/references/components/ReferenceForm.tsx b/apps/web/src/references/components/ReferenceForm.tsx
index 95040c8fa..9f101c5f3 100644
--- a/apps/web/src/references/components/ReferenceForm.tsx
+++ b/apps/web/src/references/components/ReferenceForm.tsx
@@ -3,6 +3,7 @@ import InputGroup from "@base/InputGroup";
 import InputLabel from "@base/InputLabel";
 import InputSimple from "@base/InputSimple";
 import TextArea from "@base/TextArea";
+import { useId } from "react";
 import type { FieldErrors, UseFormRegister } from "react-hook-form";
 
 export type ReferenceFormMode = "edit" | "empty";
@@ -26,20 +27,24 @@ type ReferenceFormProps = {
  * Form input fields for organism, name and description
  */
 export function ReferenceForm({ errors, mode, register }: ReferenceFormProps) {
+	const nameId = useId();
+	const organismId = useId();
+	const descriptionId = useId();
+
 	const organismComponent =
 		mode === "empty" || mode === "edit" ? (
 			<InputGroup>
-				<InputLabel htmlFor="organism">Organism</InputLabel>
-				<InputSimple id="organism" {...register("organism")} />
+				<InputLabel htmlFor={organismId}>Organism</InputLabel>
+				<InputSimple id={organismId} {...register("organism")} />
 			</InputGroup>
 		) : null;
 
 	return (
 		<>
 			<InputGroup className="pb-0">
-				<InputLabel htmlFor="name">Name</InputLabel>
+				<InputLabel htmlFor={nameId}>Name</InputLabel>
 				<InputSimple
-					id="name"
+					id={nameId}
 					{...register("name", { required: "Required Field" })}
 				/>
 				<InputError>{errors.name?.message}</InputError>
@@ -48,8 +53,8 @@ export function ReferenceForm({ errors, mode, register }: ReferenceFormProps) {
 			{organismComponent}
 
 			<InputGroup>
-				<InputLabel htmlFor="description">Description</InputLabel>
-				<TextArea id="description" {...register("description")} />
+				<InputLabel htmlFor={descriptionId}>Description</InputLabel>
+				<TextArea id={descriptionId} {...register("description")} />
 			</InputGroup>
 		</>
 	);
diff --git a/apps/web/src/references/components/ReferenceList.tsx b/apps/web/src/references/components/ReferenceList.tsx
index 6a8dfb91b..3e9506448 100644
--- a/apps/web/src/references/components/ReferenceList.tsx
+++ b/apps/web/src/references/components/ReferenceList.tsx
@@ -9,6 +9,7 @@ import ViewHeader from "@base/ViewHeader";
 import ViewHeaderTitle from "@base/ViewHeaderTitle";
 import ViewHeaderTitleBadge from "@base/ViewHeaderTitleBadge";
 import { Library } from "lucide-react";
+import { useState } from "react";
 import { useFindReferences } from "../queries";
 import Clone from "./CloneReference";
 import { CreateReference } from "./CreateReference";
@@ -18,14 +19,12 @@ import ReferenceToolbar from "./ReferenceToolbar";
 type ReferenceListProps = {
 	archived?: boolean;
 	cloneReferenceId?: string;
-	createReferenceType?: string;
 	find?: string;
 	page?: number;
 	setSearch?: (
 		next: {
 			archived?: boolean;
 			cloneReferenceId?: string;
-			createReferenceType?: string;
 			find?: string;
 			page?: number;
 		},
@@ -39,11 +38,12 @@ type ReferenceListProps = {
 export default function ReferenceList({
 	archived = false,
 	cloneReferenceId,
-	createReferenceType,
 	find = "",
 	page = 1,
 	setSearch = () => {},
 }: ReferenceListProps) {
+	const [isCreateReferenceOpen, setIsCreateReferenceOpen] = useState(false);
+
 	const { data, isPending, isError } = useFindReferences(
 		page,
 		25,
@@ -73,17 +73,13 @@ export default function ReferenceList({
 				<ReferenceToolbar
 					archived={archived}
 					find={find}
+					onCreate={() => setIsCreateReferenceOpen(true)}
 					setArchived={(archived) => setSearch({ archived, page: 1 })}
-					setCreateReferenceType={(createReferenceType) =>
-						setSearch({ createReferenceType })
-					}
 					setFind={(find) => setSearch({ find, page: 1 }, { replace: true })}
 				/>
 				<CreateReference
-					createReferenceType={createReferenceType}
-					setCreateReferenceType={(createReferenceType) =>
-						setSearch({ createReferenceType })
-					}
+					open={isCreateReferenceOpen}
+					onOpenChange={setIsCreateReferenceOpen}
 				/>
 				{!items.length ? (
 					<Box>
diff --git a/apps/web/src/references/components/ReferenceToolbar.tsx b/apps/web/src/references/components/ReferenceToolbar.tsx
index af38c61f4..292eb8752 100644
--- a/apps/web/src/references/components/ReferenceToolbar.tsx
+++ b/apps/web/src/references/components/ReferenceToolbar.tsx
@@ -9,8 +9,8 @@ import Toolbar from "@base/Toolbar";
 type ReferenceToolbarProps = {
 	archived: boolean;
 	find: string;
+	onCreate: () => void;
 	setArchived: (archived: boolean) => void;
-	setCreateReferenceType: (type: string) => void;
 	setFind: (find: string) => void;
 };
 
@@ -20,8 +20,8 @@ type ReferenceToolbarProps = {
 export default function ReferenceToolbar({
 	archived,
 	find,
+	onCreate,
 	setArchived,
-	setCreateReferenceType,
 	setFind,
 }: ReferenceToolbarProps) {
 	const { hasPermission: canCreate } =
@@ -46,7 +46,7 @@ export default function ReferenceToolbar({
 				<ToggleGroupItem value="archived">Archived</ToggleGroupItem>
 			</ToggleGroup>
 			{canCreate && (
-				<Button color="blue" onClick={() => setCreateReferenceType("empty")}>
+				<Button color="blue" onClick={onCreate}>
 					Create
 				</Button>
 			)}
diff --git a/apps/web/src/references/components/__tests__/CreateReference.test.tsx b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
new file mode 100644
index 000000000..6a6e7ee4d
--- /dev/null
+++ b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
@@ -0,0 +1,66 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithRouter } from "@tests/setup";
+import { describe, expect, it } from "vitest";
+import { CreateReference } from "../CreateReference";
+
+describe("<CreateReference />", () => {
+	it("should not render dialog content when closed", async () => {
+		await renderWithRouter(
+			<CreateReference open={false} onOpenChange={() => {}} />,
+		);
+
+		expect(screen.queryByText("Create Reference")).not.toBeInTheDocument();
+	});
+
+	it("should default to the Empty mode when opened", async () => {
+		await renderWithRouter(
+			<CreateReference open={true} onOpenChange={() => {}} />,
+		);
+
+		expect(screen.getByText("Create Reference")).toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: /Empty/i })).toHaveAttribute(
+			"data-state",
+			"on",
+		);
+		expect(
+			screen.getByRole("textbox", { name: "Organism" }),
+		).toBeInTheDocument();
+	});
+
+	it("should preserve name and description when switching between modes", async () => {
+		await renderWithRouter(
+			<CreateReference open={true} onOpenChange={() => {}} />,
+		);
+
+		await userEvent.type(
+			screen.getByRole("textbox", { name: "Name" }),
+			"Test Reference",
+		);
+		await userEvent.type(
+			screen.getByRole("textbox", { name: "Description" }),
+			"A description",
+		);
+
+		await userEvent.click(screen.getByRole("radio", { name: /Import/i }));
+
+		expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue(
+			"Test Reference",
+		);
+		expect(screen.getByRole("textbox", { name: "Description" })).toHaveValue(
+			"A description",
+		);
+		expect(
+			screen.queryByRole("textbox", { name: "Organism" }),
+		).not.toBeInTheDocument();
+
+		await userEvent.click(screen.getByRole("radio", { name: /Empty/i }));
+
+		expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue(
+			"Test Reference",
+		);
+		expect(screen.getByRole("textbox", { name: "Description" })).toHaveValue(
+			"A description",
+		);
+	});
+});
diff --git a/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
new file mode 100644
index 000000000..22cd69b6b
--- /dev/null
+++ b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
@@ -0,0 +1,137 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mockApiCreateReference } from "@tests/fake/references";
+import { renderWithRouter } from "@tests/setup";
+import nock from "nock";
+import { describe, expect, it } from "vitest";
+import { CreateReferenceForm } from "../CreateReferenceForm";
+
+describe("<CreateReferenceForm />", () => {
+	describe("mode='empty'", () => {
+		it("should display error and block submission when name is empty", async () => {
+			await renderWithRouter(
+				<CreateReferenceForm mode="empty" onSuccess={() => {}} />,
+			);
+
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+			expect(screen.getByText("Required Field")).toBeInTheDocument();
+		});
+
+		it("should submit and call onSuccess when name is provided", async () => {
+			const scope = mockApiCreateReference("Test Reference", "", "");
+
+			let succeeded = false;
+			await renderWithRouter(
+				<CreateReferenceForm
+					mode="empty"
+					onSuccess={() => {
+						succeeded = true;
+					}}
+				/>,
+			);
+
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Name" }),
+				"Test Reference",
+			);
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+			await screen.findByRole("button", { name: "Create" });
+			expect(succeeded).toBe(true);
+			scope.done();
+		});
+	});
+
+	describe("mode='import'", () => {
+		it("should upload file and import reference", async () => {
+			const scope = nock("http://localhost");
+
+			scope
+				.post("/api/uploads?name=external.json.gz&type=reference")
+				.reply(200, {
+					id: 12,
+					name: "external.json.gz",
+				});
+
+			scope
+				.post("/api/refs", {
+					name: "External",
+					description: "External reference",
+					import_from: 12,
+				})
+				.reply(201, {
+					id: "foo",
+					name: "External",
+					description: "External reference",
+				});
+
+			await renderWithRouter(
+				<CreateReferenceForm mode="import" onSuccess={() => {}} />,
+			);
+
+			await userEvent.upload(
+				screen.getByLabelText("Upload file"),
+				new File(['{"test": true}'], "external.json.gz", {
+					type: "application/gzip",
+				}),
+			);
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Name" }),
+				"External",
+			);
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Description" }),
+				"External reference",
+			);
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+			expect(scope.isDone()).toBeTruthy();
+		});
+
+		it("should surface an error when submitted before the upload finishes", async () => {
+			nock("http://localhost")
+				.post("/api/uploads?name=external.json.gz&type=reference")
+				.delay(100)
+				.reply(200, { id: 12, name: "external.json.gz" });
+
+			await renderWithRouter(
+				<CreateReferenceForm mode="import" onSuccess={() => {}} />,
+			);
+
+			await userEvent.upload(
+				screen.getByLabelText("Upload file"),
+				new File(['{"test": true}'], "external.json.gz", {
+					type: "application/gzip",
+				}),
+			);
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Name" }),
+				"External",
+			);
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+			expect(
+				screen.getByText("Please wait for the upload to finish"),
+			).toBeInTheDocument();
+		});
+
+		it("should display errors when file or name missing", async () => {
+			await renderWithRouter(
+				<CreateReferenceForm mode="import" onSuccess={() => {}} />,
+			);
+
+			expect(
+				screen.queryByText("A reference file must be uploaded"),
+			).not.toBeInTheDocument();
+			expect(screen.queryByText("Required Field")).not.toBeInTheDocument();
+
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+			expect(
+				screen.getByText("A reference file must be uploaded"),
+			).toBeInTheDocument();
+			expect(screen.getByText("Required Field")).toBeInTheDocument();
+		});
+	});
+});
diff --git a/apps/web/src/references/components/__tests__/EmptyReference.test.tsx b/apps/web/src/references/components/__tests__/EmptyReference.test.tsx
deleted file mode 100644
index 7db1e2137..000000000
--- a/apps/web/src/references/components/__tests__/EmptyReference.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { mockApiCreateReference } from "@tests/fake/references";
-import { renderWithProviders } from "@tests/setup";
-import { describe, expect, it } from "vitest";
-import EmptyReference from "../EmptyReference";
-
-describe("<EmptyReference />", () => {
-	it("should display error and block submission when name is empty", async () => {
-		renderWithProviders(<EmptyReference />);
-
-		await userEvent.click(screen.getByRole("button", { name: "Save" }));
-
-		expect(screen.getByText("Required Field")).toBeInTheDocument();
-	});
-
-	it("should submit when name length is non-zero", async () => {
-		const scope = mockApiCreateReference("Test Reference", "", "");
-
-		renderWithProviders(<EmptyReference />);
-
-		await userEvent.type(
-			screen.getByRole("textbox", { name: "Name" }),
-			"Test Reference",
-		);
-		await userEvent.click(screen.getByRole("button", { name: "Save" }));
-
-		scope.done();
-	});
-
-	it("should submit all filled fields", async () => {
-		const name = "Test Reference";
-		const organism = "Virus";
-		const description = "A collection of pathogenic virus genomes.";
-
-		const scope = mockApiCreateReference(name, description, organism);
-		renderWithProviders(<EmptyReference />);
-
-		await userEvent.type(screen.getByRole("textbox", { name: "Name" }), name);
-		await userEvent.type(
-			screen.getByRole("textbox", { name: "Organism" }),
-			organism,
-		);
-		await userEvent.type(
-			screen.getByRole("textbox", { name: "Description" }),
-			description,
-		);
-		await userEvent.click(screen.getByRole("button", { name: "Save" }));
-
-		scope.done();
-	});
-});
diff --git a/apps/web/src/references/components/__tests__/ImportReference.test.tsx b/apps/web/src/references/components/__tests__/ImportReference.test.tsx
deleted file mode 100644
index d4d64794b..000000000
--- a/apps/web/src/references/components/__tests__/ImportReference.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "@tests/setup";
-import nock from "nock";
-import { describe, expect, it } from "vitest";
-import ImportReference from "../ImportReference";
-
-describe("<ImportReference />", () => {
-	it("should upload file and import reference", async () => {
-		const scope = nock("http://localhost");
-
-		scope.post("/api/uploads?name=external.json.gz&type=reference").reply(200, {
-			id: 12,
-			name: "external.json.gz",
-		});
-
-		scope
-			.post("/api/refs", {
-				name: "External",
-				description: "External reference",
-				import_from: 12,
-			})
-			.reply(201, {
-				id: "foo",
-				name: "External",
-				description: "External reference",
-			});
-
-		renderWithProviders(<ImportReference />);
-
-		await userEvent.upload(
-			screen.getByLabelText("Upload file"),
-			new File(['{"test": true}'], "external.json.gz", {
-				type: "application/gzip",
-			}),
-		);
-		await userEvent.type(screen.getByLabelText("Name"), "External");
-		await userEvent.type(
-			screen.getByLabelText("Description"),
-			"External reference",
-		);
-		await userEvent.click(screen.getByRole("button", { name: "Import" }));
-
-		expect(scope.isDone()).toBeTruthy();
-	});
-
-	it("should display errors when file or name missing", async () => {
-		renderWithProviders(<ImportReference />);
-
-		expect(
-			screen.queryByText("A reference file must be uploaded"),
-		).not.toBeInTheDocument();
-		expect(screen.queryByText("A name is required.")).not.toBeInTheDocument();
-
-		await userEvent.click(screen.getByRole("button", { name: "Import" }));
-
-		expect(
-			screen.getByText("A reference file must be uploaded"),
-		).toBeInTheDocument();
-		expect(screen.getByText("A name is required.")).toBeInTheDocument();
-	});
-});
diff --git a/apps/web/src/references/components/__tests__/ReferenceList.test.tsx b/apps/web/src/references/components/__tests__/ReferenceList.test.tsx
index e02426bd9..7936790f9 100644
--- a/apps/web/src/references/components/__tests__/ReferenceList.test.tsx
+++ b/apps/web/src/references/components/__tests__/ReferenceList.test.tsx
@@ -16,7 +16,6 @@ import ReferenceList from "../ReferenceList";
 type ReferenceListSearch = {
 	archived?: boolean;
 	cloneReferenceId?: string;
-	createReferenceType?: string;
 	find?: string;
 	page?: number;
 };
diff --git a/apps/web/src/routes/_authenticated/refs/index.tsx b/apps/web/src/routes/_authenticated/refs/index.tsx
index 9fb637615..f6a2e2644 100644
--- a/apps/web/src/routes/_authenticated/refs/index.tsx
+++ b/apps/web/src/routes/_authenticated/refs/index.tsx
@@ -6,7 +6,6 @@ const refsSearchSchema = z.object({
 	archived: z.boolean().default(false).catch(false),
 	find: z.string().default("").catch(""),
 	page: z.number().default(1).catch(1),
-	createReferenceType: z.string().optional().catch(undefined),
 	cloneReferenceId: z.string().optional().catch(undefined),
 });
 
@@ -23,7 +22,6 @@ function ReferencesRoute() {
 		<ReferenceList
 			archived={search.archived}
 			cloneReferenceId={search.cloneReferenceId}
-			createReferenceType={search.createReferenceType}
 			find={search.find}
 			page={search.page}
 			setSearch={(next, options) =>