diff --git a/src/client/webapp/elements/overlay-personalize.tsx b/src/client/webapp/elements/overlay-personalize.tsx
deleted file mode 100644
index b199ab4..0000000
--- a/src/client/webapp/elements/overlay-personalize.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import * as electronRemote from '@electron/remote';
-const electronConsole = electronRemote.getGlobal('console') as Console;
-import Logger from '../../../logger/logger';
-const LOG = Logger.create(__filename, electronConsole);
-
-import BaseElements, { HTMLElementWithRemoveSelf } from './require/base-elements';
-import ElementsUtil from './require/elements-util';
-
-import Globals from '../globals';
-
-import Q from '../q-module';
-import createTextMessage from './msg-txt';
-import CombinedGuild from '../guild-combined';
-import { ConnectionInfo } from '../data-types';
-
-import React from 'react';
-import moment from 'moment';
-
-export default function createPersonalizeOverlay(document: Document, q: Q, guild: CombinedGuild, connection: ConnectionInfo): HTMLElementWithRemoveSelf {
-	const element = BaseElements.createOverlay(document, (
-		<div className="content submit-dialog personalize">
-			<div className="message">
-				<div className="member-avatar">
-					<img src="./img/loading.svg" alt={connection.displayName}></img>
-				</div>
-				<div className="right">
-					<div className="header">
-						<div className="member-name">{connection.displayName}</div>
-						<div className="timestamp">{moment(new Date()).calendar(ElementsUtil.calendarFormats)}</div>
-					</div>
-					<div className="content text">Example Message</div>
-				</div>
-			</div>
-			<div className="text-input display-name-input" data-placeholder="New Display Name"
-				contentEditable={'plaintext-only' as unknown as boolean /* React doesn't have plaintext-only in its typings (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54779) */}></div>
-			<div className="image-input avatar-input">
-				<label className="image-input-label avatar-input-label button">
-					Select New Avatar
-					<input className="image-input-upload avatar-upload" type="file" accept=".png,.jpg,.jpeg" style={{ display: 'none' }}></input>
-				</label>
-			</div>
-			<div className="lower">
-				<div className="error"></div>
-				<div className="buttons">
-					<div className="button submit">Save Changes</div>
-				</div>
-			</div>
-		</div>
-	));
-
-	q.$$$(element, '.text-input.display-name-input').innerText = connection.displayName;
-	(async () => {
-		(q.$$$(element, '.member-avatar img') as HTMLImageElement).src =
-			await ElementsUtil.getImageBufferFromResourceFailSoftly(guild, connection.avatarResourceId);
-	})();
-
-	let newAvatarBuffer: Buffer | null = null;
-	BaseElements.bindImageUploadEvents(q.$$$(element, '.avatar-upload') as HTMLInputElement, {
-		maxSize: Globals.MAX_AVATAR_SIZE,
-		acceptedMimeTypes: [ 'image/png', 'image/jpeg', 'image/jpg' ],
-		onChangeStart: () => { q.$$$(element, '.error').innerText = ''; },
-		onCleared: () => {},
-		onError: async (errMsg) => {
-			q.$$$(element, '.error').innerText = errMsg;
-			await ElementsUtil.shakeElement(q.$$$(element, '.avatar-upload-label'), 400);
-		},
-		onLoaded: (buff, src) => {
-			newAvatarBuffer = buff;
-			(q.$$$(element, '.member-avatar img') as HTMLImageElement).src = src;
-		}
-	});
-
-	q.$$$(element, '.text-input').addEventListener('keydown', (e) => {
-		if (e.key == 'Enter') {
-			e.preventDefault();
-			if (e.shiftKey) return; // since the shift key makes newlines other places
-			q.$$$(element, '.button.submit').click();
-		}
-	});
-
-	q.$$$(element, '.text-input').addEventListener('input', () => {
-		q.$$$(element, '.member-name').innerText = q.$$$(element, '.text-input').innerText;
-	});
-
-	let setting = false;
-	q.$$$(element, '.button.submit').addEventListener('click', async () => {
-		if (setting) return;
-		setting = true;
-		q.$$$(element, '.error').innerText = '';
-		q.$$$(element, '.button.submit').innerText = 'Submitting...';
-		const newDisplayName = q.$$$(element, '.text-input').innerText;
-
-		if (newDisplayName == connection.displayName && newAvatarBuffer == null) {
-			// nothing changed, simply close the diaolg
-			element.removeSelf();
-			setting = false;
-			return;
-		}
-
-		q.$$$(element, '.text-input').removeAttribute('contenteditable');
-
-		let success = false;
-		if (newDisplayName != connection.displayName && newDisplayName.length == 0) {
-			LOG.warn('attempted to set empty new display name');
-			q.$$$(element, '.button.submit').innerText = 'Try Again';
-			q.$$$(element, '.error').innerText = 'New display name is empty.';
-			await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
-		} else if (newDisplayName != connection.displayName && newDisplayName.length > Globals.MAX_DISPLAY_NAME_LENGTH) {
-			LOG.warn('attempted to set too long new display name');
-			q.$$$(element, '.button.submit').innerText = 'Try Again';
-			q.$$$(element, '.error').innerText = 'New display name too long. ' + newDisplayName.length + ' > ' + Globals.MAX_DISPLAY_NAME_LENGTH;
-			await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
-		} else { // new avatar buffer size is already checked above
-			// Set Display Name
-			let failed = false;
-			if (newDisplayName != connection.displayName) {
-				try {
-					await guild.requestSetDisplayName(newDisplayName);
-					connection.displayName = newDisplayName; // prevent resubmit
-				} catch (e) {
-					LOG.error('error setting display name', e);
-					q.$$$(element, '.button.submit').innerText = 'Try Again';
-					q.$$$(element, '.error').innerText = 'Error setting display name';
-					await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
-					failed = true;
-				}
-			}
-
-			// Set New Avatar
-			if (!failed && newAvatarBuffer != null) {
-				try {
-					await guild.requestSetAvatar(newAvatarBuffer);
-					newAvatarBuffer = null; // prevent resubmit
-				} catch (e) {
-					LOG.error('error setting avatar buffer', e);
-					q.$$$(element, '.button.submit').innerText = 'Try Again';
-					q.$$$(element, '.error').innerText = 'Error submitting avatar';
-					await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
-					failed = true;
-				}
-			}
-
-			success = !failed;
-		}
-
-		q.$$$(element, '.text-input').setAttribute('contenteditable', 'plaintext-only');
-		q.$$$(element, '.text-input').focus();
-		
-		if (success) {
-			element.removeSelf(); // close the dialog
-		}
-		
-		setting = false;
-	});
-	return element;
-}
diff --git a/src/client/webapp/styles/components.scss b/src/client/webapp/styles/components.scss
index 6809ef6..df0448b 100644
--- a/src/client/webapp/styles/components.scss
+++ b/src/client/webapp/styles/components.scss
@@ -42,6 +42,7 @@
 		width: 64px;
 		height: 64px;
 		border-radius: 8px;
+		display: block;
 	}
 
 	.modify {