diff --git a/packages/web_ui/src/components/AssignInstanceModal.jsx b/packages/web_ui/src/components/AssignInstanceModal.jsx
index f64edfbc..05049f41 100644
--- a/packages/web_ui/src/components/AssignInstanceModal.jsx
+++ b/packages/web_ui/src/components/AssignInstanceModal.jsx
@@ -11,20 +11,16 @@ const { Paragraph } = Typography;
 
 
 export default function AssignInstanceModal(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [hostList] = useHostList();
 	let [applying, setApplying] = useState(false);
 	let [form] = Form.useForm();
 	let control = useContext(ControlContext);
 
-	function open() {
-		setVisible(true);
-	}
-
 	function handleAssign() {
 		let hostId = form.getFieldValue("host");
 		if (hostId === undefined) {
-			setVisible(false);
+			setOpen(false);
 			return;
 		}
 
@@ -36,7 +32,7 @@ export default function AssignInstanceModal(props) {
 		control.send(
 			new libData.InstanceAssignRequest(props.id, hostId)
 		).then(() => {
-			setVisible(false);
+			setOpen(false);
 			if (props.onFinish) {
 				props.onFinish();
 			}
@@ -48,17 +44,17 @@ export default function AssignInstanceModal(props) {
 	}
 
 	function handleCancel() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	return <>
-		<Button {...props.buttonProps} onClick={open}>
+		<Button {...props.buttonProps} onClick={() => setOpen(true)}>
 			{props.buttonContent || "Assign"}
 		</Button>
 		<Modal
 			title="Assign Instance"
 			okText="Assign"
-			visible={visible}
+			open={open}
 			confirmLoading={applying}
 			onOk={handleAssign}
 			onCancel={handleCancel}
diff --git a/packages/web_ui/src/components/CreateSaveModal.jsx b/packages/web_ui/src/components/CreateSaveModal.jsx
index 4f8663d3..7da5b8df 100644
--- a/packages/web_ui/src/components/CreateSaveModal.jsx
+++ b/packages/web_ui/src/components/CreateSaveModal.jsx
@@ -8,7 +8,7 @@ import { notifyErrorHandler } from "../util/notify";
 
 
 export default function CreateSaveModal(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [creatingSave, setCreatingSave] = useState(false);
 	let [form] = Form.useForm();
 	let control = useContext(ControlContext);
@@ -56,7 +56,7 @@ export default function CreateSaveModal(props) {
 			new libData.InstanceCreateSaveRequest(name, seed, mapGenSettings, mapSettings),
 		).then(() => {
 			form.resetFields();
-			setVisible(false);
+			setOpen(false);
 		}).catch(
 			notifyErrorHandler("Error creating save")
 		).finally(() => {
@@ -81,7 +81,7 @@ export default function CreateSaveModal(props) {
 	}
 
 	function handleCancel() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	return <>
@@ -89,7 +89,7 @@ export default function CreateSaveModal(props) {
 			loading={creatingSave}
 			disabled={props.instance.status !== "stopped"}
 			onClick={() => {
-				setVisible(true);
+				setOpen(true);
 			}}
 		>
 			Create save
@@ -98,7 +98,7 @@ export default function CreateSaveModal(props) {
 			title="Create Save"
 			width={560}
 			okText="Create"
-			visible={visible}
+			open={open}
 			confirmLoading={creatingSave}
 			onOk={createSave}
 			onCancel={handleCancel}
diff --git a/packages/web_ui/src/components/HostsPage.jsx b/packages/web_ui/src/components/HostsPage.jsx
index afb8c2dd..e58d582a 100644
--- a/packages/web_ui/src/components/HostsPage.jsx
+++ b/packages/web_ui/src/components/HostsPage.jsx
@@ -17,7 +17,7 @@ const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "ba
 
 function GenerateHostTokenButton(props) {
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [token, setToken] = useState(null);
 	let [hostId, setHostId] = useState(null);
 	let [form] = Form.useForm();
@@ -53,23 +53,23 @@ function GenerateHostTokenButton(props) {
 
 	// Generate a new random
 	useEffect(() => {
-		if (visible) {
+		if (open) {
 			generateToken().catch(notifyErrorHandler("Error generating token"));
 		}
-	}, [visible]);
+	}, [open]);
 
 	// Only install plugins that aren't filesystem paths. Npm modules have max 1 forward slash in their name.
 	const pluginString = pluginList.map(p => `"${p.requirePath}"`).filter(x => x.split("/") <= 1).join(" ");
 	return <>
 		<Button
-			onClick={() => { setVisible(true); }}
+			onClick={() => { setOpen(true); }}
 		>Generate Token</Button>
 		<Modal
 			title="Generate Host Token"
-			visible={visible}
+			open={open}
 			footer={null}
 			onCancel={() => {
-				setVisible(false);
+				setOpen(false);
 				setToken(null);
 				form.resetFields();
 			}}
diff --git a/packages/web_ui/src/components/InstanceViewPage.jsx b/packages/web_ui/src/components/InstanceViewPage.jsx
index 74a74335..1c5330df 100644
--- a/packages/web_ui/src/components/InstanceViewPage.jsx
+++ b/packages/web_ui/src/components/InstanceViewPage.jsx
@@ -126,9 +126,9 @@ export default function InstanceViewPage(props) {
 			label: "Delete",
 		});
 	}
-	let instanceButtonsMenu = <Menu
-		items={instanceButtonMenuItems}
-		onClick={({ key }) => {
+	let instanceButtonsMenuProps = {
+		items: instanceButtonMenuItems,
+		onClick: ({ key }) => {
 			if (key === "export") {
 				setExportingData(true);
 				control.sendTo(
@@ -167,8 +167,8 @@ export default function InstanceViewPage(props) {
 					},
 				});
 			}
-		}}
-	/>;
+		},
+	};
 	let instanceButtons = <Space>
 		{
 			account.hasAnyPermission("core.instance.start", "core.instance.stop")
@@ -180,7 +180,7 @@ export default function InstanceViewPage(props) {
 			"core.instance.extract_players",
 			"core.instance.kill",
 			"core.instance.delete",
-		) && <Dropdown placement="bottomRight" trigger={["click"]} overlay={instanceButtonsMenu}>
+		) && <Dropdown placement="bottomRight" trigger={["click"]} menu={instanceButtonsMenuProps}>
 			<Button>More <DownOutlined /></Button>
 		</Dropdown>}
 	</Space>;
diff --git a/packages/web_ui/src/components/InstancesPage.jsx b/packages/web_ui/src/components/InstancesPage.jsx
index b943c04e..1a33e9d7 100644
--- a/packages/web_ui/src/components/InstancesPage.jsx
+++ b/packages/web_ui/src/components/InstancesPage.jsx
@@ -15,7 +15,7 @@ import { notifyErrorHandler } from "../util/notify";
 function CreateInstanceButton(props) {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	async function createInstance() {
@@ -30,7 +30,7 @@ function CreateInstanceButton(props) {
 		instanceConfig.set("instance.name", values.instanceName);
 		let serializedConfig = instanceConfig.serialize("controller");
 		await control.send(new libData.InstanceCreateRequest(serializedConfig));
-		setVisible(false);
+		setOpen(false);
 		history.push(`/instances/${instanceConfig.get("instance.id")}/view`);
 	}
 
@@ -38,15 +38,15 @@ function CreateInstanceButton(props) {
 		<Button
 			type="primary"
 			onClick={() => {
-				setVisible(true);
+				setOpen(true);
 			}}
 		>Create</Button>
 		<Modal
 			title="Create Instance"
 			okText="Create"
-			visible={visible}
+			open={open}
 			onOk={() => { createInstance().catch(notifyErrorHandler("Error creating instance")); }}
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			destroyOnClose
 		>
 			<Form form={form}>
diff --git a/packages/web_ui/src/components/LoadScenarioModal.jsx b/packages/web_ui/src/components/LoadScenarioModal.jsx
index cc290281..e4fba49d 100644
--- a/packages/web_ui/src/components/LoadScenarioModal.jsx
+++ b/packages/web_ui/src/components/LoadScenarioModal.jsx
@@ -8,7 +8,7 @@ import { notifyErrorHandler } from "../util/notify";
 
 
 export default function LoadScenarioModal(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [loadingScenario, setLoadingScenario] = useState(false);
 	let [form] = Form.useForm();
 	let control = useContext(ControlContext);
@@ -55,7 +55,7 @@ export default function LoadScenarioModal(props) {
 			{ instanceId: props.instance.id },
 			new libData.InstanceLoadScenarioRequest(scenario, seed, mapGenSettings, mapSettings),
 		).then(() => {
-			setVisible(false);
+			setOpen(false);
 		}).catch(
 			notifyErrorHandler("Error loading scenario")
 		).finally(() => {
@@ -80,7 +80,7 @@ export default function LoadScenarioModal(props) {
 	}
 
 	function handleCancel() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	return <>
@@ -88,7 +88,7 @@ export default function LoadScenarioModal(props) {
 			loading={loadingScenario}
 			disabled={props.instance.status !== "stopped"}
 			onClick={() => {
-				setVisible(true);
+				setOpen(true);
 			}}
 		>
 			Load scenario
@@ -97,7 +97,7 @@ export default function LoadScenarioModal(props) {
 			title="Load Scenario"
 			width={560}
 			okText="Load"
-			visible={visible}
+			open={open}
 			confirmLoading={loadingScenario}
 			onOk={loadScenario}
 			onCancel={handleCancel}
diff --git a/packages/web_ui/src/components/ModPackViewPage.jsx b/packages/web_ui/src/components/ModPackViewPage.jsx
index 3a8a4b26..29a56351 100644
--- a/packages/web_ui/src/components/ModPackViewPage.jsx
+++ b/packages/web_ui/src/components/ModPackViewPage.jsx
@@ -485,7 +485,7 @@ function CopyButton(props) {
 	}, []);
 
 	let denied = clipboard.readPermissionState === "denied";
-	return <Tooltip title={denied ? clipboard.deniedReason : "Copied!"} visible={denied ? undefined : copiedVisible}>
+	return <Tooltip title={denied ? clipboard.deniedReason : "Copied!"} open={denied ? undefined : copiedVisible}>
 		<Button disabled={denied} onClick={() => {
 			try {
 				clipboard.writeText(props.content);
@@ -503,19 +503,19 @@ function CopyButton(props) {
 }
 
 function ExportButton(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	function close() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	let exportString;
-	if (visible) { exportString = props.modPack.toModPackString(); }
+	if (open) { exportString = props.modPack.toModPackString(); }
 
 	return <>
-		<Button icon={<ExportOutlined />} onClick={() => { setVisible(true); }}>Export to string</Button>
+		<Button icon={<ExportOutlined />} onClick={() => { setOpen(true); }}>Export to string</Button>
 		<Modal
 			title="Mod Pack String"
-			visible={visible}
+			open={open}
 			onOk={close}
 			onCancel={close}
 			destroyOnClose
diff --git a/packages/web_ui/src/components/ModsPage.jsx b/packages/web_ui/src/components/ModsPage.jsx
index 12fd43e4..041168f5 100644
--- a/packages/web_ui/src/components/ModsPage.jsx
+++ b/packages/web_ui/src/components/ModsPage.jsx
@@ -25,19 +25,19 @@ const { logger } = libLogging;
 function ImportModPackButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 	function close() {
-		setVisible(false);
+		setOpen(false);
 	}
 	return <>
-		<Button icon={<ImportOutlined />} onClick={() => { setVisible(true); }}>Import string</Button>
+		<Button icon={<ImportOutlined />} onClick={() => { setOpen(true); }}>Import string</Button>
 		<Modal
 			title="Import Mod Pack String"
-			visible={visible}
+			open={open}
 			okText="Import"
 			cancelText="Cancel"
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			onOk={() => {
 				(async () => {
 					let values;
@@ -74,19 +74,19 @@ function ImportModPackButton() {
 function CreateModPackButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 	function close() {
-		setVisible(false);
+		setOpen(false);
 	}
 	return <>
-		<Button type="primary" icon={<PlusOutlined />} onClick={() => { setVisible(true); }}>Create</Button>
+		<Button type="primary" icon={<PlusOutlined />} onClick={() => { setOpen(true); }}>Create</Button>
 		<Modal
 			title="Create Mod Pack"
-			visible={visible}
+			open={open}
 			okText="Create"
 			cancelText="Cancel"
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			onOk={() => {
 				(async () => {
 					let values;
diff --git a/packages/web_ui/src/components/RolesPage.jsx b/packages/web_ui/src/components/RolesPage.jsx
index 62eca08e..e78658bc 100644
--- a/packages/web_ui/src/components/RolesPage.jsx
+++ b/packages/web_ui/src/components/RolesPage.jsx
@@ -16,7 +16,7 @@ const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "ba
 function CreateRoleButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	async function createRole() {
@@ -29,21 +29,21 @@ function CreateRoleButton() {
 		let result = await control.send(
 			new libData.RoleCreateRequest(values.roleName, values.description || "", [])
 		);
-		setVisible(false);
+		setOpen(false);
 		history.push(`/roles/${result.id}/view`);
 	}
 
 	return <>
 		<Button
 			type="primary"
-			onClick={() => { setVisible(true); }}
+			onClick={() => { setOpen(true); }}
 		>Create</Button>
 		<Modal
 			title="Create Role"
 			okText="Create"
-			visible={visible}
+			open={open}
 			onOk={() => { createRole().catch(notifyErrorHandler("Error creating role")); }}
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			destroyOnClose
 		>
 			<Form form={form}>
diff --git a/packages/web_ui/src/components/SavesList.jsx b/packages/web_ui/src/components/SavesList.jsx
index 04b908d1..50a72ed0 100644
--- a/packages/web_ui/src/components/SavesList.jsx
+++ b/packages/web_ui/src/components/SavesList.jsx
@@ -19,17 +19,17 @@ import { notifyErrorHandler } from "../util/notify";
 
 function RenameModal(props) {
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	return <>
-		<Button disabled={props.disabled} onClick={() => setVisible(true)}>Rename</Button>
+		<Button disabled={props.disabled} onClick={() => setOpen(true)}>Rename</Button>
 		<Modal
 			title="Rename save"
 			okText="Rename"
-			visible={visible}
+			open={open}
 			onOk={() => form.submit()}
-			onCancel={() => setVisible(false)}
+			onCancel={() => setOpen(false)}
 		>
 			<Form
 				form={form}
@@ -39,7 +39,7 @@ function RenameModal(props) {
 					control.send(
 						new libData.InstanceRenameSaveRequest(props.instanceId, props.save.name, values.newName)
 					).then(() => {
-						setVisible(false);
+						setOpen(false);
 						form.resetFields();
 					}).catch(notifyErrorHandler("Error renaming save"));
 				}}
@@ -58,17 +58,17 @@ function RenameModal(props) {
 
 function CopyModal(props) {
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	return <>
-		<Button disabled={props.disabled} onClick={() => setVisible(true)}>Copy</Button>
+		<Button disabled={props.disabled} onClick={() => setOpen(true)}>Copy</Button>
 		<Modal
 			title="Copy save"
 			okText="Copy"
-			visible={visible}
+			open={open}
 			onOk={() => form.submit()}
-			onCancel={() => setVisible(false)}
+			onCancel={() => setOpen(false)}
 		>
 			<Form
 				form={form}
@@ -78,7 +78,7 @@ function CopyModal(props) {
 					control.send(
 						new libData.InstanceCopySaveRequest(props.instanceId, props.save.name, values.newName)
 					).then(() => {
-						setVisible(false);
+						setOpen(false);
 						form.resetFields();
 					}).catch(notifyErrorHandler("Error copying save"));
 				}}
@@ -98,18 +98,18 @@ function CopyModal(props) {
 function TransferModal(props) {
 	let account = useAccount();
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 	let [instanceList] = useInstanceList();
 
 	return <>
-		<Button disabled={props.disabled} onClick={() => setVisible(true)}>Transfer</Button>
+		<Button disabled={props.disabled} onClick={() => setOpen(true)}>Transfer</Button>
 		<Modal
 			title="Transfer save"
 			okText="Transfer"
-			visible={visible}
+			open={open}
 			onOk={() => form.submit()}
-			onCancel={() => setVisible(false)}
+			onCancel={() => setOpen(false)}
 			destroyOnClose
 		>
 			<Form
@@ -118,7 +118,7 @@ function TransferModal(props) {
 				wrapperCol={{ span: 18 }}
 				initialValues={{ transferredName: props.save.name, copy: false }}
 				onFinish={values => {
-					setVisible(false);
+					setOpen(false);
 					let hide = message.loading("Transferring save...", 0);
 					control.send(new libData.InstanceTransferSaveRequest(
 						props.instanceId,
diff --git a/packages/web_ui/src/components/SiteLayout.jsx b/packages/web_ui/src/components/SiteLayout.jsx
index 2d83b3d5..70cc2a35 100644
--- a/packages/web_ui/src/components/SiteLayout.jsx
+++ b/packages/web_ui/src/components/SiteLayout.jsx
@@ -26,20 +26,20 @@ export default function SiteLayout(props) {
 		return null;
 	}
 
-	let accountMenu = <Menu
-		onClick={({ key }) => {
+	let accountMenuProps = {
+		onClick: ({ key }) => {
 			if (key === "user") {
 				history.push(`/users/${account.name}/view`);
 			} else if (key === "logOut") {
 				account.logOut();
 			}
-		}}
-		items={[
+		},
+		items: [
 			{ label: account.name, key: "user" },
 			{ type: "divider" },
 			{ label: "Log out", danger: true, key: "logOut" },
-		]}
-	/>;
+		],
+	};
 
 	let combinedPages = [...pages];
 	for (let plugin of plugins.values()) {
@@ -88,7 +88,7 @@ export default function SiteLayout(props) {
 				className="account-dropdown-header"
 				placement="bottomRight"
 				trigger="click"
-				overlay={accountMenu}
+				menu={accountMenuProps}
 			>
 				<UserOutlined/>
 			</Dropdown>
diff --git a/packages/web_ui/src/components/UsersPage.jsx b/packages/web_ui/src/components/UsersPage.jsx
index 1d0d82ad..6475e2c5 100644
--- a/packages/web_ui/src/components/UsersPage.jsx
+++ b/packages/web_ui/src/components/UsersPage.jsx
@@ -18,7 +18,7 @@ const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "ba
 function CreateUserButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	async function createUser() {
@@ -29,21 +29,21 @@ function CreateUserButton() {
 		}
 
 		await control.send(new libData.UserCreateRequest(values.userName));
-		setVisible(false);
+		setOpen(false);
 		history.push(`/users/${values.userName}/view`);
 	}
 
 	return <>
 		<Button
 			type="primary"
-			onClick={() => { setVisible(true); }}
+			onClick={() => { setOpen(true); }}
 		>Create</Button>
 		<Modal
 			title="Create User"
 			okText="Create"
-			visible={visible}
+			open={open}
 			onOk={() => { createUser().catch(notifyErrorHandler("Error creating user")); }}
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			destroyOnClose
 		>
 			<Form form={form}>