diff --git a/src/app/mii/[id]/page.tsx b/src/app/mii/[id]/page.tsx
index e3e554c..a31fadb 100644
--- a/src/app/mii/[id]/page.tsx
+++ b/src/app/mii/[id]/page.tsx
@@ -130,11 +130,12 @@ export default async function MiiPage({ params }: Props) {
 					</div>
 				)}
 				{mii.in_queue && (
-					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-center gap-3 text-zinc-700">
+					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600">
 						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
 						<p className="font-medium">
-							This Mii is waiting to be manually reviewed and is hidden from the main page. (This could take a few hours or a couple of days) You can still
-							share the Mii through the URL!
+							This Mii is waiting to be manually reviewed and is hidden from the main page. The review could take between a few hours and a few days.
+							<br />
+							Despite that, you can still share the Mii through the URL!
 						</p>
 					</div>
 				)}
diff --git a/src/app/submit/page.tsx b/src/app/submit/page.tsx
index 82e0cfa..52749f3 100644
--- a/src/app/submit/page.tsx
+++ b/src/app/submit/page.tsx
@@ -22,7 +22,7 @@ export const metadata: Metadata = {
 export default async function SubmitPage() {
 	const session = await auth();
 
-	if (!session) redirect("/login");
+	if (!session || !session.user) redirect("/login");
 	const activePunishment = await prisma.punishment.findFirst({
 		where: {
 			userId: Number(session?.user?.id),
@@ -45,5 +45,7 @@ export default async function SubmitPage() {
 			</div>
 		);
 
-	return <SubmitForm />;
+	const inQueueMiisCount = await prisma.mii.count({ where: { userId: Number(session.user.id), in_queue: true } });
+
+	return <SubmitForm inQueueMiisCount={inQueueMiisCount} />;
 }
diff --git a/src/components/mii/list/index.tsx b/src/components/mii/list/index.tsx
index 5c1c4d0..6d1485f 100644
--- a/src/components/mii/list/index.tsx
+++ b/src/components/mii/list/index.tsx
@@ -37,7 +37,19 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
 	}
 
 	const where: Prisma.MiiWhereInput = {
-		in_queue: parentPage === "admin",
+		// In queue logic
+		...(parentPage === "admin"
+			? { in_queue: true } // Only show queued Miis
+			: userId
+				? {
+						// Include queued Miis if user is on their profile
+						...(Number(session?.user?.id) === userId ? {} : { in_queue: false }),
+						userId,
+					}
+				: {
+						// Don't show queued Miis on main page
+						in_queue: false,
+					}),
 		// Only show liked miis on likes page
 		...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
 		// Searching
@@ -57,8 +69,6 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
 		...(makeup && { makeup: { equals: makeup } }),
 		// Quarantined
 		...(!quarantined && !userId && { quarantined: false }),
-		// Profiles
-		...(userId && { userId }),
 	};
 
 	const select: Prisma.MiiSelect = {
@@ -81,6 +91,7 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
 		makeup: true,
 		allowedCopying: true,
 		quarantined: true,
+		in_queue: true,
 		// Mii liked check
 		...(session?.user?.id && {
 			likedBy: {
diff --git a/src/components/mii/list/mii-grid.tsx b/src/components/mii/list/mii-grid.tsx
index 10652e2..1793dcb 100644
--- a/src/components/mii/list/mii-grid.tsx
+++ b/src/components/mii/list/mii-grid.tsx
@@ -32,8 +32,15 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
 			{miis.map((mii) => (
 				<div
 					key={mii.id}
-					className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300" : "border-zinc-300"}`}
+					className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300" : mii.in_queue ? "border-zinc-400 opacity-70" : "border-zinc-300"}`}
 				>
+					{mii.in_queue && (
+						<div className="absolute top-2 left-2 z-10 bg-zinc-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1">
+							<Icon icon="mdi:clock-outline" className="text-base" />
+							In Queue
+						</div>
+					)}
+
 					<Carousel
 						images={[
 							`/mii/${mii.id}/image?type=mii`,
diff --git a/src/components/submit-form/index.tsx b/src/components/submit-form/index.tsx
index 285c486..488c2df 100644
--- a/src/components/submit-form/index.tsx
+++ b/src/components/submit-form/index.tsx
@@ -30,7 +30,11 @@ import SubmitButton from "../submit-button";
 import Dropzone from "../dropzone";
 import Image from "next/image";
 
-export default function SubmitForm() {
+interface Props {
+	inQueueMiisCount: number;
+}
+
+export default function SubmitForm({ inQueueMiisCount }: Props) {
 	const [files, setFiles] = useState<FileWithPath[]>([]);
 
 	const handleDrop = useCallback(
@@ -192,316 +196,326 @@ export default function SubmitForm() {
 				</div>
 			</div>
 
-			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
-				<div>
-					<h2 className="text-2xl font-bold">Submit your Mii</h2>
-					<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
-				</div>
-
-				{/* Separator */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
-					<hr className="grow border-zinc-300" />
-					<span>Info</span>
-					<hr className="grow border-zinc-300" />
-				</div>
-
-				{/* Platform select */}
-				<div className="w-full grid grid-cols-3 items-center">
-					<label htmlFor="name" className="font-semibold">
-						Platform
-					</label>
-					<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
-						{/* Animated indicator */}
-						{/* TODO: maybe change width as part of animation? */}
-						<div
-							className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
-								platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
-							}`}
-						></div>
-
-						{/* Switch button */}
-						<button
-							type="button"
-							onClick={() => setPlatform("SWITCH")}
-							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
-								platform === "SWITCH" && "text-slate-800!"
-							}`}
-						>
-							<Icon icon="cib:nintendo-switch" className="text-2xl" />
-							Switch
-						</button>
-
-						{/* 3DS button */}
-						<button
-							type="button"
-							onClick={() => setPlatform("THREE_DS")}
-							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
-								platform === "THREE_DS" && "text-slate-800!"
-							}`}
-						>
-							<Icon icon="cib:nintendo-3ds" className="text-2xl" />
-							3DS
-						</button>
-					</div>
-				</div>
-
-				{/* Name */}
-				<div className="w-full grid grid-cols-3 items-center">
-					<label htmlFor="name" className="font-semibold">
-						Name
-					</label>
-					<input
-						id="name"
-						type="text"
-						className="pill input w-full col-span-2"
-						minLength={2}
-						maxLength={64}
-						placeholder="Type your mii's name here..."
-						value={name}
-						onChange={(e) => setName(e.target.value)}
-					/>
-				</div>
-
-				<div className="w-full grid grid-cols-3 items-center">
-					<label htmlFor="tags" className="font-semibold">
-						Tags
-					</label>
-					<TagSelector tags={tags} setTags={setTags} showTagLimit />
-				</div>
-
-				{/* Description */}
-				<div className="w-full grid grid-cols-3 items-start">
-					<label htmlFor="description" className="font-semibold py-2">
-						Description
-					</label>
-					<textarea
-						id="description"
-						rows={5}
-						maxLength={512}
-						placeholder="(optional) Type a description..."
-						className="pill input rounded-xl! resize-none col-span-2 text-sm"
-						value={description}
-						onChange={(e) => setDescription(e.target.value)}
-					/>
-				</div>
-
-				{/* Gender (switch only) */}
-				<div className={`w-full grid grid-cols-3 items-start z-10 ${platform === "SWITCH" ? "" : "hidden"}`}>
-					<label htmlFor="gender" className="font-semibold py-2">
-						Gender
-					</label>
-					<div className="col-span-2 flex gap-1">
-						<button
-							type="button"
-							onClick={() => setGender("MALE")}
-							aria-label="Filter for Male Miis"
-							data-tooltip="Male"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400!  ${
-								gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="foundation:male" className="text-blue-400" />
-						</button>
-
-						<button
-							type="button"
-							onClick={() => setGender("FEMALE")}
-							aria-label="Filter for Female Miis"
-							data-tooltip="Female"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
-								gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="foundation:female" className="text-pink-400" />
-						</button>
-
-						<button
-							type="button"
-							onClick={() => setGender("NONBINARY")}
-							aria-label="Filter for Nonbinary Miis"
-							data-tooltip="Nonbinary"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400!  ${
-								gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
-						</button>
-					</div>
-				</div>
-
-				{/* Makeup (switch only) */}
-				<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
-					<label htmlFor="makeup" className="font-semibold py-2">
-						Face Paint
-					</label>
-
-					<div className="col-span-2 flex gap-1">
-						{/* Full Makeup */}
-						<button
-							type="button"
-							onClick={() => setMakeup("FULL")}
-							aria-label="Full Face Paint"
-							data-tooltip="Full Face Paint"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
-								makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="mdi:palette" className="text-pink-400" />
-						</button>
-
-						{/* Partial Makeup */}
-						<button
-							type="button"
-							onClick={() => setMakeup("PARTIAL")}
-							aria-label="Partial Face Paint"
-							data-tooltip="Partial Face Paint"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
-								makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="mdi:lipstick" className="text-purple-400" />
-						</button>
-
-						{/* No Makeup */}
-						<button
-							type="button"
-							onClick={() => setMakeup("NONE")}
-							aria-label="No Face Paint"
-							data-tooltip="No Face Paint"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
-								makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="codex:cross" className="text-gray-400" />
-						</button>
-					</div>
-				</div>
-
-				{/* (Switch Only) Mii Screenshots */}
-				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
-					{/* Separator */}
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
-						<hr className="grow border-zinc-300" />
-						<span>Mii Screenshots</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-
-					<div className="flex flex-col items-center gap-4 w-full">
-						{/* Step 1 - Portrait */}
-						<div className="flex flex-col items-center gap-2 w-full">
-							<div className="flex items-center gap-2 self-start">
-								<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
-								<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
-							</div>
-							<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
-								<div data-tooltip="Your screenshot should look like this">
-									<Image
-										src="/tutorial/switch/portrait.png"
-										alt="Example portrait screenshot"
-										width={80}
-										height={80}
-										className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
-									/>
-								</div>
-								<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
-							</div>
-						</div>
-
-						{/* Step 2 - Features */}
-						<div className="flex flex-col items-center gap-2 w-full">
-							<div className="flex items-center gap-2 self-start">
-								<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
-								<span className="text-sm font-semibold text-zinc-600">
-									Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
-								</span>
-							</div>
-							<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
-								<div data-tooltip="Your features screenshot should show this">
-									<Image
-										src="/tutorial/switch/features.png"
-										alt="Example features screenshot showing the parts panel"
-										width={80}
-										height={80}
-										className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
-									/>
-								</div>
-								<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
-							</div>
-						</div>
-
-						<SwitchSubmitTutorialButton />
-					</div>
-
-					<p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
-				</div>
-
-				{/* (3DS only) QR code scanning */}
-				<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
-						<hr className="grow border-zinc-300" />
-						<span>QR Code</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-
-					<div className="flex flex-col items-center gap-2">
-						<QrUpload setQrBytesRaw={setQrBytesRaw} />
-						<span>or</span>
-
-						<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
-							<Icon icon="mdi:camera" fontSize={20} />
-							Use your camera
-						</button>
-
-						<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
-						<ThreeDsSubmitTutorialButton />
-
-						<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
-					</div>
-				</div>
-
-				{/* (Switch only) Mii instructions */}
-				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
-						<hr className="grow border-zinc-300" />
-						<span>Mii Instructions</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-
-					<div className="flex flex-col items-center gap-2">
-						<MiiEditor instructions={instructions} />
-						<SwitchSubmitTutorialButton />
-						<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
-							Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
-						</span>
-					</div>
-				</div>
-
-				{/* Custom images selector */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
-					<hr className="grow border-zinc-300" />
-					<span>Custom images</span>
-					<hr className="grow border-zinc-300" />
-				</div>
-
-				<div className="max-w-md w-full self-center flex flex-col items-center">
-					<Dropzone onDrop={handleDrop}>
-						<p className="text-center text-sm">
-							Drag and drop your images here
-							<br />
-							or click to open
+			<div className="max-w-2xl">
+				{inQueueMiisCount && (
+					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600 mb-4">
+						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
+						<p className="font-medium">
+							You have {inQueueMiisCount} Mii{inQueueMiisCount > 1 && "s"} pending manual review. You can view your queue on your profile.
 						</p>
-					</Dropzone>
+					</div>
+				)}
+				<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 w-full">
+					<div>
+						<h2 className="text-2xl font-bold">Submit your Mii</h2>
+						<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
+					</div>
 
-					<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
-				</div>
+					{/* Separator */}
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+						<hr className="grow border-zinc-300" />
+						<span>Info</span>
+						<hr className="grow border-zinc-300" />
+					</div>
 
-				<ImageList files={files} setFiles={setFiles} />
+					{/* Platform select */}
+					<div className="w-full grid grid-cols-3 items-center">
+						<label htmlFor="name" className="font-semibold">
+							Platform
+						</label>
+						<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
+							{/* Animated indicator */}
+							{/* TODO: maybe change width as part of animation? */}
+							<div
+								className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
+									platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
+								}`}
+							></div>
 
-				<hr className="border-zinc-300 my-2" />
-				<div className="flex justify-between items-center">
-					{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+							{/* Switch button */}
+							<button
+								type="button"
+								onClick={() => setPlatform("SWITCH")}
+								className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
+									platform === "SWITCH" && "text-slate-800!"
+								}`}
+							>
+								<Icon icon="cib:nintendo-switch" className="text-2xl" />
+								Switch
+							</button>
 
-					<SubmitButton onClick={handleSubmit} className="ml-auto" />
+							{/* 3DS button */}
+							<button
+								type="button"
+								onClick={() => setPlatform("THREE_DS")}
+								className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
+									platform === "THREE_DS" && "text-slate-800!"
+								}`}
+							>
+								<Icon icon="cib:nintendo-3ds" className="text-2xl" />
+								3DS
+							</button>
+						</div>
+					</div>
+
+					{/* Name */}
+					<div className="w-full grid grid-cols-3 items-center">
+						<label htmlFor="name" className="font-semibold">
+							Name
+						</label>
+						<input
+							id="name"
+							type="text"
+							className="pill input w-full col-span-2"
+							minLength={2}
+							maxLength={64}
+							placeholder="Type your mii's name here..."
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</div>
+
+					<div className="w-full grid grid-cols-3 items-center">
+						<label htmlFor="tags" className="font-semibold">
+							Tags
+						</label>
+						<TagSelector tags={tags} setTags={setTags} showTagLimit />
+					</div>
+
+					{/* Description */}
+					<div className="w-full grid grid-cols-3 items-start">
+						<label htmlFor="description" className="font-semibold py-2">
+							Description
+						</label>
+						<textarea
+							id="description"
+							rows={5}
+							maxLength={512}
+							placeholder="(optional) Type a description..."
+							className="pill input rounded-xl! resize-none col-span-2 text-sm"
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+					</div>
+
+					{/* Gender (switch only) */}
+					<div className={`w-full grid grid-cols-3 items-start z-10 ${platform === "SWITCH" ? "" : "hidden"}`}>
+						<label htmlFor="gender" className="font-semibold py-2">
+							Gender
+						</label>
+						<div className="col-span-2 flex gap-1">
+							<button
+								type="button"
+								onClick={() => setGender("MALE")}
+								aria-label="Filter for Male Miis"
+								data-tooltip="Male"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400!  ${
+									gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="foundation:male" className="text-blue-400" />
+							</button>
+
+							<button
+								type="button"
+								onClick={() => setGender("FEMALE")}
+								aria-label="Filter for Female Miis"
+								data-tooltip="Female"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
+									gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="foundation:female" className="text-pink-400" />
+							</button>
+
+							<button
+								type="button"
+								onClick={() => setGender("NONBINARY")}
+								aria-label="Filter for Nonbinary Miis"
+								data-tooltip="Nonbinary"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400!  ${
+									gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+							</button>
+						</div>
+					</div>
+
+					{/* Makeup (switch only) */}
+					<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
+						<label htmlFor="makeup" className="font-semibold py-2">
+							Face Paint
+						</label>
+
+						<div className="col-span-2 flex gap-1">
+							{/* Full Makeup */}
+							<button
+								type="button"
+								onClick={() => setMakeup("FULL")}
+								aria-label="Full Face Paint"
+								data-tooltip="Full Face Paint"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
+									makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="mdi:palette" className="text-pink-400" />
+							</button>
+
+							{/* Partial Makeup */}
+							<button
+								type="button"
+								onClick={() => setMakeup("PARTIAL")}
+								aria-label="Partial Face Paint"
+								data-tooltip="Partial Face Paint"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
+									makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="mdi:lipstick" className="text-purple-400" />
+							</button>
+
+							{/* No Makeup */}
+							<button
+								type="button"
+								onClick={() => setMakeup("NONE")}
+								aria-label="No Face Paint"
+								data-tooltip="No Face Paint"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
+									makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="codex:cross" className="text-gray-400" />
+							</button>
+						</div>
+					</div>
+
+					{/* (Switch Only) Mii Screenshots */}
+					<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
+						{/* Separator */}
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Mii Screenshots</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col items-center gap-4 w-full">
+							{/* Step 1 - Portrait */}
+							<div className="flex flex-col items-center gap-2 w-full">
+								<div className="flex items-center gap-2 self-start">
+									<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
+									<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
+								</div>
+								<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
+									<div data-tooltip="Your screenshot should look like this">
+										<Image
+											src="/tutorial/switch/portrait.png"
+											alt="Example portrait screenshot"
+											width={80}
+											height={80}
+											className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
+										/>
+									</div>
+									<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
+								</div>
+							</div>
+
+							{/* Step 2 - Features */}
+							<div className="flex flex-col items-center gap-2 w-full">
+								<div className="flex items-center gap-2 self-start">
+									<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
+									<span className="text-sm font-semibold text-zinc-600">
+										Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
+									</span>
+								</div>
+								<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
+									<div data-tooltip="Your features screenshot should show this">
+										<Image
+											src="/tutorial/switch/features.png"
+											alt="Example features screenshot showing the parts panel"
+											width={80}
+											height={80}
+											className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
+										/>
+									</div>
+									<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
+								</div>
+							</div>
+
+							<SwitchSubmitTutorialButton />
+						</div>
+
+						<p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
+					</div>
+
+					{/* (3DS only) QR code scanning */}
+					<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>QR Code</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col items-center gap-2">
+							<QrUpload setQrBytesRaw={setQrBytesRaw} />
+							<span>or</span>
+
+							<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
+								<Icon icon="mdi:camera" fontSize={20} />
+								Use your camera
+							</button>
+
+							<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
+							<ThreeDsSubmitTutorialButton />
+
+							<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
+						</div>
+					</div>
+
+					{/* (Switch only) Mii instructions */}
+					<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Mii Instructions</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col items-center gap-2">
+							<MiiEditor instructions={instructions} />
+							<SwitchSubmitTutorialButton />
+							<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
+								Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
+							</span>
+						</div>
+					</div>
+
+					{/* Custom images selector */}
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Custom images</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+
+					<div className="max-w-md w-full self-center flex flex-col items-center">
+						<Dropzone onDrop={handleDrop}>
+							<p className="text-center text-sm">
+								Drag and drop your images here
+								<br />
+								or click to open
+							</p>
+						</Dropzone>
+
+						<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
+					</div>
+
+					<ImageList files={files} setFiles={setFiles} />
+
+					<hr className="border-zinc-300 my-2" />
+					<div className="flex justify-between items-center">
+						{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+
+						<SubmitButton onClick={handleSubmit} className="ml-auto" />
+					</div>
 				</div>
 			</div>
 		</form>