diff --git a/src/client/webapp/elements/context-menu-guild-title.tsx b/src/client/webapp/elements/context-menu-guild-title.tsx
index 6cc835f..09c26ee 100644
--- a/src/client/webapp/elements/context-menu-guild-title.tsx
+++ b/src/client/webapp/elements/context-menu-guild-title.tsx
@@ -18,6 +18,7 @@ import CombinedGuild from '../guild-combined';
 import React from 'react';
 import ReactHelper from './require/react-helper';
 import GuildSettingsOverlay from './overlays/overlay-guild-settings';
+import ErrorMessageOverlay from './overlays/overlay-error-message';
 
 export default function createGuildTitleContextMenu(document: Document, q: Q, ui: UI, guild: CombinedGuild): Element {
 	if (ui.activeConnection === null) {
@@ -83,12 +84,9 @@ export default function createGuildTitleContextMenu(document: Document, q: Q, ui
 				LOG.error('error fetching guild info', e);
 			}
 			if (guildMeta === null) {
-				const overlay = createErrorMessageOverlay(document, 'Error Opening Settings', 'Could not load guild information');
-				document.body.appendChild(overlay);
+				ElementsUtil.presentReactOverlay(document, <ErrorMessageOverlay title="Error Opening Settings" message="Could not load guild information" />);
 			} else {
 				ElementsUtil.presentReactOverlay(document, <GuildSettingsOverlay guild={guild} guildMeta={guildMeta} />);
-				// const overlay = createGuildSettingsOverlay(document, q, guild, guildMeta);
-				// document.body.appendChild(overlay);
 			}
 		});
 	}
diff --git a/src/client/webapp/elements/events-add-guild.tsx b/src/client/webapp/elements/events-add-guild.tsx
index 7f5e6aa..3103d73 100644
--- a/src/client/webapp/elements/events-add-guild.tsx
+++ b/src/client/webapp/elements/events-add-guild.tsx
@@ -13,6 +13,7 @@ import GuildsManager from '../guilds-manager';
 import createErrorMessageOverlay from './overlay-error-message';
 import AddGuildOverlay from './overlays/overlay-add-guild';
 import React from 'react';
+import ErrorMessageOverlay from './overlays/overlay-error-message';
 
 export default function bindAddGuildEvents(document: Document, q: Q, ui: UI, guildsManager: GuildsManager): void {
 	let choosingFile = false;
@@ -53,13 +54,10 @@ export default function bindAddGuildEvents(document: Document, q: Q, ui: UI, gui
 				LOG.debug('bad guild data:', { addGuildData, fileText })
 				throw new Error('bad guild data');
 			}
-			ElementsUtil.presentReactOverlay(document, <AddGuildOverlay document={document} ui={ui} guildsManager={guildsManager} addGuildData={addGuildData} />)
-			// const overlayElement = createAddGuildOverlay(document, q, ui, guildsManager, addGuildData as IAddGuildData);
-			// document.body.appendChild(overlayElement);
+			ElementsUtil.presentReactOverlay(document, <AddGuildOverlay document={document} ui={ui} guildsManager={guildsManager} addGuildData={addGuildData} />);
 		} catch (e: unknown) {
 			LOG.error('Unable to parse guild data', e);
-			const errorOverlayElement = createErrorMessageOverlay(document, 'Unable to parse guild file', (e as Error).message);
-			document.body.appendChild(errorOverlayElement);
+			ElementsUtil.presentReactOverlay(document, <ErrorMessageOverlay title="Unable to parse guild file" message={(e as Error).message} />);
 		}
 		
 		choosingFile = false;
diff --git a/src/client/webapp/elements/overlays/overlay-error-message.tsx b/src/client/webapp/elements/overlays/overlay-error-message.tsx
new file mode 100644
index 0000000..d019e18
--- /dev/null
+++ b/src/client/webapp/elements/overlays/overlay-error-message.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+
+export interface ErrorMessageOverlayProps {
+	title: string;
+	message: string;
+}
+const ErrorMessageOverlay: FC<ErrorMessageOverlayProps> = (props: ErrorMessageOverlayProps) => {
+	const { title, message } = props;
+
+	return (
+		<div className="content error-message">
+			<div className="icon">
+				<img src="./img/error.png" alt="error" />
+			</div>
+			<div className="text">
+				<div className="title">{title}</div>
+				<div className="message">{message}</div>
+			</div>
+		</div>
+	);
+}
+
+export default ErrorMessageOverlay;
diff --git a/src/client/webapp/styles/overlays.scss b/src/client/webapp/styles/overlays.scss
index c2267da..27d7061 100644
--- a/src/client/webapp/styles/overlays.scss
+++ b/src/client/webapp/styles/overlays.scss
@@ -376,19 +376,31 @@ body > .overlay,
 	> .content.error-message {
 		background-color: $background-secondary;
 		padding: 16px;
-		border-radius: 12px;
+		border-radius: 8px;
+		align-items: center;
+		display: flex;
 
-		.title {
-			color: $header-primary;
-			font-size: 1.25em;
-			font-weight: 600;
-			line-height: 1;
-			margin-bottom: 12px;
+		.icon img {
+			display: block;
+			width: 48px;
+			height: 48px;
 		}
 
-		.message {
-			padding: 0;
-			color: $text-normal;
+		.text {
+			margin-left: 16px;
+
+			.title {
+				color: $header-primary;
+				font-size: 1.2em;
+				font-weight: 600;
+				line-height: 1;
+				margin-bottom: 4px;
+			}
+	
+			.message {
+				padding: 0;
+				color: $text-normal;
+			}
 		}
 	}