diff --git a/apps/settings/src/components/PersonalInfo/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection.vue
new file mode 100644
index 0000000000..733d876379
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/EmailSection.vue
@@ -0,0 +1,108 @@
+<!--
+  - @copyright 2021 Christopher Ng <chrng8@gmail.com>
+  -
+  - @author 2021 Christopher Ng <chrng8@gmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<form id="emailform" class="section">
+		<h3>
+			<label for="email">{{ t('settings', 'Emails') }}</label>
+			<a href="#" class="federation-menu" :aria-label="t('settings', 'Change privacy level of email')">
+				<span class="icon-federation-menu icon-password">
+					<span class="icon-triangle-s"></span>
+				</span>
+			</a>
+			<Actions>
+				<ActionButton icon="icon-add" @click.stop.prevent="addEmails(email, additionalEmails)">
+					{{ t('settings', 'Add email address') }}
+				</ActionButton>
+			</Actions>
+		</h3>
+		<input
+			type="email"
+			name="email"
+			id="email"
+			v-model="email"
+			:placeholder="t('settings', 'Your email address')" />
+		<input
+			v-for="(email, index) in additionalEmails"
+			type="email"
+			name="additionalEmail[]"
+			:id="`additionalEmail-${index}`"
+			v-model="email.value"
+			:placeholder="t('settings', `Additional email address ${index+1}`)"
+			:key="index" />
+		<input type="hidden" id="emailscope" value="emailScope">
+	</form>
+</template>
+
+<script>
+import { Actions, ActionButton } from '@nextcloud/vue'
+import axios from '@nextcloud/axios'
+import * as auth from '@nextcloud/auth'
+import * as router from '@nextcloud/router'
+
+export default {
+	name: 'EmailSection',
+	components: {
+		Actions,
+		ActionButton,
+	},
+	props: {
+		initialEmails: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		/* eslint-disable */
+		console.log(this.initialEmails)
+		return {
+			email: this.initialEmails[0],
+			additionalEmails: this.initialEmails.slice(1).map(email => ({ value: email })),
+		}
+	},
+	methods: {
+		async addEmails(email, additionalEmails) {
+			const userId = auth.getCurrentUser().uid
+			// TODO upgrade @nextcloud/router to v2.0 so we can remove the .slice() trailing slash hack
+			const url = router.generateOcsUrl(`cloud/users/${userId}`, 2).slice(0, -1)
+
+			// Set the primary email
+			const res = await axios.put(url, {
+				key: 'email',
+				value: email,
+			})
+			// console.log(res.data)
+
+			// Set additional emails
+			const resp = await axios.put(url, {
+				key: 'additional_mail',
+				value: additionalEmails.map(({ value }) => value),
+			})
+			// console.log(res.data)
+
+			additionalEmails.push({ value: '' })
+		}
+	}
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js
new file mode 100644
index 0000000000..c8e37056d9
--- /dev/null
+++ b/apps/settings/src/main-personal-info.js
@@ -0,0 +1,39 @@
+/**
+ * @copyright 2021, Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import { loadState } from '@nextcloud/initial-state'
+
+import EmailSection from './components/PersonalInfo/EmailSection'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(OC.requestToken)
+
+Vue.prototype.t = t
+
+const View = Vue.extend(EmailSection)
+new View({
+	propsData: {
+		initialEmails: loadState('settings', 'emails'),
+		// ...more initial props
+	},
+}).$mount('#vue-emailform')
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index 6f8516e643..8c6d37890b 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -31,6 +31,7 @@ script('settings', [
 	'federationsettingsview',
 	'federationscopemenu',
 	'settings/personalInfo',
+	'vue-settings-personal-info',
 ]);
 ?>
 
@@ -125,6 +126,9 @@ script('settings', [
 				<input type="hidden" id="displaynamescope" value="<?php p($_['displayNameScope']) ?>">
 			</form>
 		</div>
+		<div class="personal-settings-setting-box">
+			<div id="vue-emailform" class="section"></div>
+		</div>
 		<div class="personal-settings-setting-box">
 			<form id="emailform" class="section">
 				<h3>
diff --git a/apps/settings/webpack.js b/apps/settings/webpack.js
index 756a748ae1..12ac464fed 100644
--- a/apps/settings/webpack.js
+++ b/apps/settings/webpack.js
@@ -32,6 +32,7 @@ module.exports = {
 		'settings-personal-security': path.join(__dirname, 'src', 'main-personal-security'),
 		'settings-personal-webauthn': path.join(__dirname, 'src', 'main-personal-webauth'),
 		'settings-nextcloud-pdf': path.join(__dirname, 'src', 'main-nextcloud-pdf'),
+		'settings-personal-info': path.join(__dirname, 'src', 'main-personal-info'),
 	},
 	output: {
 		path: path.resolve(__dirname, './js'),