diff --git a/src/app/components/profile-settings/index.tsx b/src/app/components/profile-settings/index.tsx
new file mode 100644
index 0000000..771fa4e
--- /dev/null
+++ b/src/app/components/profile-settings/index.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import SubmitDialogButton from "./submit-dialog-button";
+import DeleteAccount from "./delete-account";
+
+interface Props {
+	name: string | null | undefined;
+	username: string | null | undefined;
+}
+
+export default function ProfileSettings({ name, username }: Props) {
+	const [displayName, setDisplayName] = useState(name ?? "");
+	const [usernameState, setUsernameState] = useState(username ?? "");
+
+	return (
+		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-4 flex flex-col gap-4">
+			<div>
+				<h2 className="text-2xl font-bold">Profile Settings</h2>
+				<p className="text-sm text-zinc-500">Update your account info, username, and preferences.</p>
+			</div>
+
+			{/* Separator */}
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+				<hr className="flex-grow border-zinc-300" />
+				<span>Account Info</span>
+				<hr className="flex-grow border-zinc-300" />
+			</div>
+
+			{/* Change Name */}
+			<div className="grid grid-cols-2">
+				<div>
+					<label htmlFor="deletion" className="font-semibold">
+						Change Display Name
+					</label>
+					<p className="text-sm text-zinc-500">This is a display name shown on your profile — feel free to change it anytime</p>
+				</div>
+
+				<div className="flex justify-end gap-1">
+					<input type="text" className="pill input w-full max-w-64" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+					<SubmitDialogButton
+						title="Confirm Display Name Change"
+						description="Update your display name? This will only be visible on your profile. You can change it again later."
+						onSubmit={() => {}}
+					>
+						<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 px-2 py-1">
+							<p className="font-semibold">New display name:</p>
+							<p className="indent-4">"{name}"</p>
+						</div>
+					</SubmitDialogButton>
+				</div>
+			</div>
+
+			{/* Change Username */}
+			<div className="grid grid-cols-2">
+				<div>
+					<label htmlFor="deletion" className="font-semibold">
+						Change Username
+					</label>
+					<p className="text-sm text-zinc-500">Your unique tag on the site. Can only be changed once every 90 days</p>
+				</div>
+
+				<div className="flex justify-end gap-1">
+					<div className="relative">
+						<input
+							type="text"
+							className="pill input w-full max-w-64 indent-4"
+							value={usernameState}
+							onChange={(e) => setUsernameState(e.target.value)}
+						/>
+						<span className="absolute top-1/2 -translate-y-1/2 left-4 select-none">@</span>
+					</div>
+					<SubmitDialogButton
+						title="Confirm Username Change"
+						description="Are you sure? Your username is your unique indentifier and can only be changed every 90 days."
+						onSubmit={() => {}}
+					>
+						<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 px-2 py-1">
+							<p className="font-semibold">New username:</p>
+							<p className="indent-4">"@{usernameState}"</p>
+						</div>
+					</SubmitDialogButton>
+				</div>
+			</div>
+
+			{/* Separator */}
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+				<hr className="flex-grow border-zinc-300" />
+				<span>Danger Zone</span>
+				<hr className="flex-grow border-zinc-300" />
+			</div>
+
+			{/* Delete Account */}
+			<div className="grid grid-cols-2">
+				<div>
+					<label htmlFor="deletion" className="font-semibold">
+						Delete Account
+					</label>
+					<p className="text-sm text-zinc-500">This will permanently remove your account and all uploaded Miis. This action cannot be undone</p>
+				</div>
+
+				<DeleteAccount />
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/components/profile-settings/submit-dialog-button.tsx b/src/app/components/profile-settings/submit-dialog-button.tsx
new file mode 100644
index 0000000..d7c193a
--- /dev/null
+++ b/src/app/components/profile-settings/submit-dialog-button.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	title: string;
+	description: string;
+	onSubmit: () => void;
+	error?: string;
+	children?: React.ReactNode;
+}
+
+export default function SubmitDialogButton({ title, description, onSubmit, error, children }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const submit = () => {
+		onSubmit();
+		close();
+		window.location.reload(); // I would use router.refresh() here but the API data fetching breaks
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} className="pill button aspect-square !p-1 text-2xl">
+				<Icon icon="material-symbols:check-rounded" />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">{title}</h2>
+								<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">{description}</p>
+
+							{children}
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<button onClick={submit} className="pill button">
+									Submit
+								</button>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}
diff --git a/src/app/profile/settings/page.tsx b/src/app/profile/settings/page.tsx
index b008fdc..3bbf3a0 100644
--- a/src/app/profile/settings/page.tsx
+++ b/src/app/profile/settings/page.tsx
@@ -7,7 +7,7 @@ import { Icon } from "@iconify/react";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
-import DeleteAccount from "@/app/components/profile-settings/delete-account";
+import ProfileSettings from "@/app/components/profile-settings";
 
 export default async function ProfileSettingsPage() {
 	const session = await auth();
@@ -46,72 +46,7 @@ export default async function ProfileSettingsPage() {
 				</div>
 			</div>
 
-			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-4 flex flex-col gap-4">
-				<div>
-					<h2 className="text-2xl font-bold">Profile Settings</h2>
-					<p className="text-sm text-zinc-500">Update your account info, username, and preferences.</p>
-				</div>
-
-				{/* Separator */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
-					<hr className="flex-grow border-zinc-300" />
-					<span>Account Info</span>
-					<hr className="flex-grow border-zinc-300" />
-				</div>
-
-				{/* Change Name */}
-				<div className="grid grid-cols-2">
-					<div>
-						<label htmlFor="deletion" className="font-semibold">
-							Change Name
-						</label>
-						<p className="text-sm text-zinc-500">This is the name shown on your profile — feel free to change it anytime</p>
-					</div>
-
-					<div className="flex justify-end gap-1">
-						<input type="text" className="pill input w-full max-w-64" />
-						<button className="pill button aspect-square !p-1 text-2xl">
-							<Icon icon="material-symbols:check-rounded" />
-						</button>
-					</div>
-				</div>
-
-				{/* Change Username */}
-				<div className="grid grid-cols-2">
-					<div>
-						<label htmlFor="deletion" className="font-semibold">
-							Change Username
-						</label>
-						<p className="text-sm text-zinc-500">Your unique tag on the site. Can only be changed once every 90 days</p>
-					</div>
-
-					<div className="flex justify-end gap-1">
-						<input type="text" className="pill input w-full max-w-64" />
-						<button className="pill button aspect-square !p-1 text-2xl">
-							<Icon icon="material-symbols:check-rounded" />
-						</button>
-					</div>
-				</div>
-
-				{/* Separator */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
-					<hr className="flex-grow border-zinc-300" />
-					<span>Danger Zone</span>
-					<hr className="flex-grow border-zinc-300" />
-				</div>
-
-				{/* Delete Account */}
-				<div className="grid grid-cols-2">
-					<div>
-						<label htmlFor="deletion" className="font-semibold">
-							Delete Account
-						</label>
-						<p className="text-sm text-zinc-500">This will permanently remove your account and all uploaded Miis. This action cannot be undone</p>
-					</div>
-
-					<DeleteAccount />
-				</div>
-			</div>
+			<ProfileSettings name={session.user.name} username={session.user.username} />
 		</div>
 	);
 }