diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 5a19a46137..333b4c6448 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -9,11 +9,12 @@
 			:has-to-type="true"
 			@proceed="deleteAccount"
 		/>
-		<Modal
+		<NewModal
 			ref="changeEmailModal"
 			:header="`${auth.user.email ? formatMessage(messages.changeEmailHeaderChange) : formatMessage(messages.changeEmailHeaderAdd)}`"
+			width="600px"
 		>
-			<div class="universal-modal">
+			<div class="universal-body">
 				<p>{{ formatMessage(messages.emailNotPublicNotice) }}</p>
 				<label for="email-input">
 					<span class="label__title">{{ formatMessage(messages.emailAddressLabel) }}</span>
@@ -24,9 +25,12 @@
 					:maxlength="2048"
 					type="email"
 					:placeholder="formatMessage(messages.emailAddressPlaceholder)"
+					wrapper-class="w-full"
 					@keyup.enter="saveEmail()"
 				/>
-				<div class="input-group push-right">
+			</div>
+			<template #actions>
+				<div class="flex justify-end gap-2">
 					<ButtonStyled>
 						<button @click="$refs.changeEmailModal.hide()">
 							<XIcon />
@@ -40,8 +44,8 @@
 						</button>
 					</ButtonStyled>
 				</div>
-			</div>
-		</Modal>
+			</template>
+		</NewModal>
 		<Modal
 			ref="managePasswordModal"
 			:header="`${
@@ -477,6 +481,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	NewModal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'